使用 eslint 和 editorconfig 規範代碼

項目中使用eslint

爲何使用eslint : 爲了保持代碼風格的統一

在作vue項目的時候， 基本上都會使用 vue-cli 腳手架去建立一個vue 項目，裏面能夠選擇使用eslint 代碼檢測，我相信大多數人都關閉了，在之前我是不用eslint 工具的，我會以爲使用很麻煩，處處都在報錯。

並且須要配置不少規則，增長了開發難度。（我太low了）

可是多人合做，爲了保持代碼風格的統一，仍是須要一套規範，讓你們閱讀代碼的時候比較清晰，加上如今編輯器上不少插件，能夠快速的幫咱們格式化代碼，所以使用eslint 早就是一種趨勢了。

 

話很少說，接下來如何使用eslint 和 配置eslint。

首先須要安裝eslint 的依賴包

eslint ，eslint-loader， babel-eslint 是最基本的，另外我作的是react項目 ，所以用到了 airbnb 團隊的規則 (eslint-config-airbnb) 剩下的一些是 airbnb包 須要的依賴，具體的看你本身要用什麼規則就裝什麼規則。

　　　 "eslint-loader": "^2.1.1",

　　　 "babel-eslint": "^10.0.1",

"eslint": "^5.12.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.3",
    "eslint-plugin-standard": "^4.0.0"

 

安裝好後進入webpack.config.js 的配置文件中，配置eslint 規則

module.exports = {  
  module: {
    rules: [
      {
        enforce: 'pre', // 在全部loader編譯以前執行eslint檢查
        test: /\.(js|jsx)$/,
        loader: 'eslint-loader',
        exclude: [
          path.join(__dirname, '../node_modules')
        ]
      },
     ],
     ...
  },
  ...        
}

enforce配置必定要寫上！須要要在因此loader編譯以前去檢測
test配置表示 只驗證 js 和 jsx 結尾的文件
loader配置 表示使用 eslint-loader處理
exclude配置 表示不檢測 node_modules 下的js 和 jsx文件


接下來須要配置具體的規則，在項目的跟目錄下(或者你須要使用eslint的目錄下)建立 .eslintrc的配置文件，該文件下能夠配置具體規則

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

 

parser 是配置 eslint 的解析器

env 是配置eslint 使用的環境  brower表示 支持瀏覽器 環境 ，由於個人項目用到了ssr 渲染 裏面用的node環境， 因此我配置 了 node: true選項

extends 是繼承什麼規則， 我前面有講我是用的 airbnb團隊的 eslint規則， 若是你不須要那個規則， 就能夠填寫 ‘standard’  使用標準規則。

parserOptions 中的 ecmaVersion 表示解析 es的版本， 我項目用的是es6 ，因此填寫的是6, 

rules 裏面是具體的規則,能夠參照官網，須要開啓或者屏蔽的規則的就去這裏面配置  官網 rules規則

 

配置好運行項目就能夠檢測到了。 若是某一行不須要驗證，則能夠在這一行加上註釋     // eslint-disable-line

const NextApp = require('./app.jsx').default // eslint-disable-line

 

配置 .editorconfig

爲何配置.editorconfig: 解決不一樣運行環境，不一樣編輯器運行同一個項目的差別

爲何要配置.editorconfig 呢？ 由於不一樣的編輯器在處理不用操做的時候默認方式不一致，所以須要統一操做的規範。

好比 tab 縮進有的是4格，有的是2格。  結尾換行的的時候 windows  使用的是  crlf  ，而 mac 和 linux 使用的 lf。

接下來在項目根目錄下建立.editorconfig的配置文件

root = true

[*]
charset = utf-8
indent_style = space
index_size = 2
end_of_line = LF
insert_final_newline = true
tirm_trailing_whitespace = true

 

charset 設置 字符集爲 utf-8

index_style 縮進方式使用 空格 

index_size tab 縮進2個空格

end_of_line 換行方式統一爲LF

insert_final_newline  保存文件時在最後新插入一行

trim_trailling_whitespace 去掉行尾的空白字符

 

還能夠配置其餘的，仍是按照你須要的規則配置。

 

拜了個拜！