使用eslint和editorconfig規(guī)范代碼

為什么要用這些：

代碼規(guī)范有利于團(tuán)隊協(xié)作 純手工規(guī)范耗時耗力而且不能保證準(zhǔn)確性 能配合編輯器自動提醒錯誤，提高開發(fā)效率

eslint

隨著ECMAScript版本一直更新的Js lint工具，插件豐富，并且能夠套用規(guī)范，規(guī)則非常豐富，能夠滿足大部分團(tuán)隊的需求。

eslint 配合 git

為了最大程度控制每個人的規(guī)范，我們可以在git commit代碼的時候，使用git hook調(diào)用eslint進(jìn)行代碼規(guī)范驗(yàn)證，不規(guī)范的代碼無法提交到倉庫。

editorconfig

不同編輯器對文本的格式會有一定的區(qū)別，如果不統(tǒng)一一些規(guī)范，可能你和別人合作的時候每次更新下來別人的代碼就會出一大堆錯誤-webstorm自動支持editorconfig配置文件。

首先安裝eslintnpm i eslint 因?yàn)閏reate-react-app默認(rèn)已經(jīng)安裝了

  "babel-eslint": "7.2.3",  "eslint": "4.10.0",  "eslint-config-react-app": "^2.1.0",  "eslint-loader": "1.9.0",  "eslint-plugin-flowtype": "2.39.1",  "eslint-plugin-import": "2.8.0",  "eslint-plugin-jsx-a11y": "5.1.1",  "eslint-plugin-react": "7.4.0",

我們針對我們想要的自定義配置，我們再安裝如下

npm i babel-eslint // eslint-config-airbnb eslint-config-standard // eslint-loader // eslint-plugin-import // eslint-plugin-jsx-a11y // eslint-plugin-node // eslint-plugin-promise // eslint-plugin-react // eslint-plugin-standard -D

我們在根目錄下新建 .eslintrc 文件針對整個項(xiàng)目做一個標(biāo)準(zhǔn)的規(guī)范

{ "extends": "standard"}

主要項(xiàng)目是前端工程，所以我們在前端文件夾下新建 .eslintrc 文件，在這里去規(guī)范客戶端代碼，客戶端代碼使用 jsx，很多規(guī)則和 nodejs 是不同的，在這里使用更加嚴(yán)格的規(guī)范來要求客戶端代碼。

配置的value對應(yīng)的值： 0 : off 1 : warning 2 : error

{ "parser": "babel-eslint", "env": {  "browser": true,  "es6": true,  "node": true }, "parserOptions": {  "ecmaVersion": 6,  "sourceType": "module" }, "extends": "airbnb", "rules": {  "semi": [0],  "react/jsx-filename-extension": [0],  "jsx-a11y/anchor-is-valid": [0] }}

使用 babel-eslint 去解析代碼，定義環(huán)境是瀏覽器和es6，會包含公共變量，webpack所以需要node一些環(huán)境變量，parserOptions定義版本，jsmodule模式方法書寫。

因?yàn)樾枰诿看尉幾g之前都要去檢查一下代碼，所以還需要配置 webpack,這是create-react-app默認(rèn)的

   {    test: //.(js|jsx|mjs)$/,    enforce: 'pre',    use: [     {      options: {       formatter: eslintFormatter,       eslintPath: require.resolve('eslint'),             },      loader: require.resolve('eslint-loader'),     },    ],    include: paths.appSrc,   },