從零搭建前端開發環境（零）——擴展篇：4.eslint統一代碼規範

注：擴展篇裏的內容，並不是建立項目的必要條件，屬於可選範圍。但是如果項目複雜到了一定程度，終究還是要面對的。

統一代碼規範的重要性，相信稍微有點項目經驗的同學一定會有所感觸，光靠人爲的約定限制，效果是無法保證的。所以eslint這種強制性的代碼規範還是很有必要引入的，不過代碼規範到底選擇什麼版本，估計選擇困難症的同學會糾結了。那麼就由我不負責任的來提供一套方案，據說airbnb號稱史上最嚴格標準，那麼我們就用它。

1、查看airbnb依賴並安裝

我們現在只需要安裝最基礎的eslint-config-airbnb-base就可以了，react、vue什麼的後文再說。

$ npm info "eslint-config-airbnb-base@latest" peerDependencies

我們會看到如下信息（版本信息要注意，不一定會跟這裏一模一樣）

{ eslint: '^4.9.0', 'eslint-plugin-import': '^2.7.0' }

接下來就是按照它的提示安裝了，注意，你的版本很可能跟我的不一樣，要寫自己的，再加上一個eslint-import-resolver-webpack來兼容webpack。

$ npm i -D eslint-config-airbnb-base [email protected] [email protected] eslint-import-resolver-webpack

2、配置.eslintrc.js

新建.eslintrc.js

const path = require('path');
const root = __dirname;

module.exports = {
  root: true,
  extends: 'airbnb-base',
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: path.resolve(root, 'config/webpack.base.js')
      }
    }
  }
}

還有.eslintignore（不過筆者發現用vscode如果在工作區不是直接引得demo目錄，比如引得demo的父目錄之類的，這個.eslintigonre不會生效，不過不影響eslint的自檢查）

/config/
/dist/
/*.js
/test/**/coverage/
/test/**/reports/

之後，如果你用的vscode，就搜索eslint這個擴展（可以實時提示語法問題，雖不是必須，但是強烈推薦，如果電腦配置較低，有可能會很卡，往後看，還是有辦法的），安裝一下。然後，你就會看什麼叫史上最嚴格標準……

運行下面的命令

$ ./node_modules/eslint/bin/eslint.js src/**/*.js

就可以看到它報告的結果，不要被嚇到哦。寫了這麼久的代碼，才發現我的代碼竟然這麼不規範。。。在上面的命令後面加上 --fix 可以修復部分警告。爲了方便，我們在package.json的scripts裏面加上一條命令（爲了方便以後，我們把jsx也加進來了，反正影響不大，實在不需要刪掉就好），來自動修復一些簡單的格式。

"lint": "node ./node_modules/eslint/bin/eslint.js src/**/*.js src/**/*.jsx --fix",

只要運行這條命令，就可以修復一些縮進之類的小問題了，大問題還是得自己修復的。

還有更狠的，如果我們裝上了eslint-loader，那麼你要是代碼不符合規範，那每次開發時保存，都會一片片的飄紅，甚至過不了。

$ npm i -D eslint-loader

webapck.base.js配置相應改一下

      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader','eslint-loader'],
      },

可以了，去修改你不規範的代碼吧，編譯不通過別怪我沒提醒過啊～

3、配置展示

全部變化可看筆者的github記錄，還是很清晰的。

package.json

{
  "name": "code-history",
  "version": "1.0.0",
  "description": "Use to show the change of code in blog!",
  "main": "index.js",
  "scripts": {
    "test": "jest --config config/jest.config.js",
    "prod": "webpack --config config/webpack.prod.js",
    "dev": "webpack-dev-server --config config/webpack.dev.js --open",
    "lint": "node ./node_modules/eslint/bin/eslint.js src/**/*.js src/**/*.jsx --fix",
    "start": "npm run dev"
  },
  "keywords": [],
  "author": "[email protected]",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.2",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.9.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-import-resolver-webpack": "^0.9.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.7.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.1.0",
    "jest": "^22.4.3",
    "jest-babel": "^1.0.1",
    "less": "^3.0.1",
    "less-loader": "^4.1.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.3",
    "postcss-url": "^7.3.1",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.2",
    "webpack-merge": "^4.1.2"
  }
}

目錄結構

demo    
  |- config/  
    |- jest.config.js  
    |- webpack.base.js    
    |- webpack.dev.js    
    |- webpack.prod.js    
  |- src/    
    |- assets/    
     |- logo.jpg  
    |- util/  
      |- index.js  
    |- index.css    
    |- index.js    
  |- test/  
    |- spec/  
      |- util.spec.js  
  |- .babelrc    
  |- .eslintignore
  |- .eslintrc.js
  |- .gitignore    
  |- .postcssrc.js    
  |- index.html    
  |- package.json