ESLint has been around for four years since its launch in June 2013, with the latest version being V4.8.0. It is currently the mainstream for Javascript and JSX code specification inspection tool, many large companies such as Airbnb and Google have their own Javascript coding specification, and the implementation of the specification cannot be done without the support of ESLint. Examples include eslint-config-Airbnb and eslint-config-Google. In order to better unify the team’s JS programming style and code quality. Feflow official after investigation and exploration, finally ushered in the ESLint solution, the core concept is: rule customization based on ESLint: Recommend.

It started with a manufacturing accident

On April 13, 2017, Tencent senior engineer Xiao Sheng modified apple IAP payment configuration by adding duplicate keys in JSON configuration when he was doing top-up business. After the code was released, a small part of users who used Vivo mobile phones reported that the recharge page was blank and they could not recharge in the Now APP. Finally, the problem was located as follows: Vivo mobile phone used webView of the system instead of X5 kernel, and repeated key errors were reported when parsing JSON, resulting in a blank screen.

There are many similar problems: for example, variables are not defined, methods are overwritten and so on will cause JS code execution times error. So how to avoid it? ESLint officially provides Sharable Config, so front-end teams can customize the ESLint specification configuration for their own team.

Rule definition criterion

  • Don’t duplicate wheels, based on ESLint: Recommend configuration and improved
  • Enable all rules that help you find code errors
  • The goal is to unify the team’s code style, not limit the development experience

Eslint – config – ivweb is introduced

Eslint-config-ivweb is the ESLint configuration of Tencent NOW Live IVWeb team. Currently released in its first edition, there are currently approximately 130 rules, including five large rule blocks, including possible errors, best practices, variables, code styles, and ES6 related.

Warehouse address: github.com/feflow/esli… Welcome to submit an issue or PR to participate in the maintenance of team rules

Some Rules


More detailed rules can be found in the Rules Documentation

Project access and use

Basic idea: Too much project code doesn’t affect historical code. Check only for code with changes (.js and the.jsx suffix).

Step 1: Add or modify the.eslintrc.js configuration file

module.exports = {
    "env": {
        "es6": true."browser": true."node": true
    },
    "extends": ["eslint:recommended"."ivweb"]."globals": {
        "__inline": true."IS_SERVER": true."__uri": true}};Copy the code

Some rules mentioned in ESLint :recommended are not mentioned in IVWeb, so it is best to use them in conjunction with ESLint: Recommend.

Just inherit both ESLint: Recommend and IVWeb, making sure ivWeb comes last. Part of ESLint: The rules for the definition of Recommend are a bit strict, and there are custom changes in IVWeb.

Step 2: Add precommit hooks and eslint-config-ivWeb dependencies

Here we use husky to manage all the hooks, verifying with the previous Commit Message.

{
  "name": "with-lint-staged"."version": "0.0.1"."scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/*.{js,jsx}": [
      "eslint --fix"."git add"]},"devDependencies": {
    "eslint": "^ 4.8.0"."eslint-config-ivweb": "^ 0.1.0 from"."husky": "^ 0.14.3"."lint-staged": "^ holdings"}}Copy the code

Answering questions interaction

Q: Why not just use the Airbnb team’s ESlint-config-Airbnb? A: The official rules of Airbnb are too huge, with more than 10 rules files. Expensive to maintain, choose to base your team’s ESLint rules on the lightweight ESLint base: It’s easier and easier to maintain to customize your team’s ESLint rules on top of the Recommend base.

Q: I don’t think some rules of eslint-config-ivWeb are appropriate, what should I do? A: You are welcome to submit an issue for discussion or directly submit PR. Warehouse address: github.com/feflow/esli…

Q: Why lint-staged? A: Lint-staged code specification checks will only be carried out for the number of lines of js files that have been modified, rather than for all the code, making it more reasonable and controllable.