使用React JS, ESLint, Prettier和git precommit hooks管理前端代码

在前端项目开发中, 开发style因人而异, 为了让team的code面对所有开发人员可维护, 可读, 最好的方法是使用linter. Linter 可以统一team代码规范, 检测潜在的bugs, 性能问题等. precommit是git的一个钩子, 它能让你在提交代码之前干点事, 今天就demo一下如何在一个项目里使用这些tools.编辑工具统一为vscode.

1, 什么是linter?

    说白了就是一个帮你分析程序代码, 检测程序中潜在的输入错误工具. 它能帮开发快速的定位错误, 提示如何改正等. 现在js社区最流行的linter是Prettier和Eslint. 

2,创建项目

    找个空旷的目录, 执行:

 

npx create-react-app eslint-app 
cd eslint-app 
npm start

3,安装eslint

 

 

npm install eslint --save-dev

# or

yarn add eslint --dev

初始化eslint

 

 

npx eslint --init

 

按照上面的选择会生成一个.eslintrc.json在项目根目录,内容如下

 

{

     "env": {

         "browser":  true,

         "es6":  true

    },

     "extends": [

         "plugin:react/recommended",

         "airbnb"

    ],

     "globals": {

         "Atomics":  "readonly",

         "SharedArrayBuffer":  "readonly"

    },

     "parserOptions": {

         "ecmaFeatures": {

             "jsx":  true

        },

         "ecmaVersion":  11,

         "sourceType":  "module"

    },

     "plugins": [

         "react"

    ],

     "rules": {

    }

}

如果想覆盖  Airbnb规则在在rules里面添加rule就行. 传送Eslint Rules. 

4, 安装Prettier

作为vscode的一般插件安装就好了. 

安装好之后在terminal执行命令把这几个包装上

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

然后更新.eslintrc文件的extends如下:

"extends": [ "airbnb", "plugin:prettier/recommended" ]

如果不想用Prettier的配置, 可以在根目录新建一个名为.prettierrc的文件, 配置自己的配置.

 

{

   "root":  true,

   "printWidth":  120,

   "trailingComma":  "none",

   "bracketSpacing":  true,

   "jsxBracketSameLine":  true,

   "endOfLine":  "lf",

   "singleQuote":  false,

   "jsxSingleQuote":  false,

   "semi":  true,

   "parser":  "typescript"

}

 

5, 让vscode每次format code当保存文件的时候

 

打开vscode的setting配置  添加如下配置

 

{

     "workbench.iconTheme":  "vscode-icons",

     "editor.fontSize":  16,

     "editor.formatOnPaste":  false,

     "[javascript]": {},

     "files.associations": {

         "*.js":  "javascriptreact",

         "*.wxss":  "css",

         "*.wxml":  "html"

    },

     "eslint.lintTask.enable":  true,

     "eslint.validate": [

         "javascript",

         "javascriptreact",

         "typescript",

         "typescriptreact",

    ],

     "javascript.updateImportsOnFileMove.enabled":  "always",

     "search.exclude": {

         "**/node_modules":  false

    },

     "editor.codeActionsOnSave": {

         "source.fixAll.eslint":  true

    },

     "editor.formatOnSave":  true,

     "typescript.updateImportsOnFileMove.enabled":  "always",

     "window.zoomLevel":  0

}

这样基本的配置就算完成了, 可以检查代码的格式, 一般性的代码错误了

 

6, 设置Husky pre-commit hook 

这一步看似是没什么必要, 因为每次format的时候已经改了, 可能有些人懒得改设置了disable, 就当再上个保险吧.

(1), 什么是Husky?

Husky让我们在git commit和push之前能运行一些命令.

(2), 什么是lint-staged?

lint-staged 能让我们在git staged状态的文件上跑多个linter, 在这跑的就是Eslint和Prettier.

下面就说说怎么用husky

先安装几个必要的包

 

使用 npm
npm install --save-dev husky lint-staged eslint eslint-config-airbnb prettier

使用 yarn
yarn add --dev husky lint-staged eslint eslint-config-airbnb prettier

 

打开package.json, 和dependencies同级添加如下配置:

 

"husky": {

     "hooks": {

       "pre-commit":  "lint-staged"

    }

  },

   "lint-staged": {

     "./src/*.{js,jsx,ts,tsx}": [

       "npm run lint:js",

       "npx prettier --write",

       "eslint src/*.js --fix-dry-run",

       "git add"

    ],

     "**/*.less": [

       "stylelint --syntax less",

       "npm run prettier",

       "git add"

    ]

  },

上面的code会对所有的js,jsx,ts,tsx文件跑一遍Prettier and ESLint rules, 当然这个正则可以修改为自己想匹配了跑的.

添加了上面配置, 如果有eslint报错就没法成功提交, 这样我们统一代码规范的目的就达到了.

最后贴上我的配置:

VsCode:

 

{

     "workbench.iconTheme":  "vscode-icons",

     "editor.fontSize":  16,

     "editor.formatOnPaste":  false,

     "[javascript]": {},

     "files.associations": {

         "*.js":  "javascriptreact",

         "*.wxss":  "css",

         "*.wxml":  "html"

    },

     "eslint.lintTask.enable":  true,

     "eslint.validate": [

         "javascript",

         "javascriptreact",

         "typescript",

         "typescriptreact",

    ],

     "javascript.updateImportsOnFileMove.enabled":  "always",

     "search.exclude": {

         "**/node_modules":  false

    },

     "editor.codeActionsOnSave": {

         "source.fixAll.eslint":  true

    },

     "editor.formatOnSave":  true,

     "typescript.updateImportsOnFileMove.enabled":  "always",

     "window.zoomLevel":  0

}

 

Eslint:

 

 

{

   "env": {

     "browser":  true,

     "es6":  true

  },

   "extends": [ "plugin:prettier/recommended",  "airbnb"],

   "globals": {

     "Atomics":  "readonly",

     "SharedArrayBuffer":  "readonly"

  },

   "parserOptions": {

     "ecmaFeatures": {

       "jsx":  true

    },

     "ecmaVersion":  11,

     "sourceType":  "module"

  },

   "plugins": [ "react"],

   "rules": {

     "react/jsx-filename-extension": [

       1,

      {

         "extensions": [ ".js",  ".jsx"]

      }

    ],

     /**

    "always" enforces braces around the function body

    "as-needed" enforces no braces where they can be omitted (default)

    "never" enforces no braces around the function body (constrains arrow functions to the role of returning an expression)

    */

     "arrow-body-style": [ "error",  "as-needed"],

     /**

    "properties": "always" (default) enforces camelcase style for property names

    "properties": "never" does not check property names

    "ignoreDestructuring": false (default) enforces camelcase style for destructured identifiers

    "ignoreDestructuring": true does not check destructured identifiers (but still checks any use of those identifiers later in the code)

    "ignoreImports": false (default) enforces camelcase style for ES2015 imports

    "ignoreImports": true does not check ES2015 imports (but still checks any use of the imports later in the code except function arguments)

    allow (string[]) list of properties to accept. Accept regex.

    */

     "camelcase": [ "error",  "never"],

     "no-param-reassign":[ "error", {  "props":  false }],

     // "allowForLoopAfterthoughts": true allows unary operators ++ and -- in the afterthought (final expression) of a for loop.

     "allowForLoopAfterthoughts":[ "error", {  "allowForLoopAfterthoughts":  true }],

     "prefer-template":[ "error"],

     "no-use-before-define": [ "error", {  "functions":  true,  "classes":  true }]

  }

}

 

Prettier:

 

 

{

   "root":  true,

   "printWidth":  120,

   "trailingComma":  "all",

   "bracketSpacing":  true,

   "jsxBracketSameLine":  true,

   "jsxBrackets": true,

   "endOfLine":  "lf",

   "singleQuote":  true,

   "jsxSingleQuote":  false,

   "semi":  true,

   "parser":  "typescript"

}

 

 

-- end --