使用 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 去掉行尾的空白字符

 

還可以配置其他的，還是按照你需要的規則配置。

 

拜了個拜！