代碼規範 -- eslint & editorconfig

配置eslint

安裝

安裝eslint；webpack配置用到的eslint-loader；eslint用於解析js的解析器babel-eslint
npm i eslint eslint-loader babel-eslint -D

以airbnb爲eslint的配置規則
npm i eslint-config-airbnb -D
及其所須要的插件
npm i eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D

node環境、es6環境下的插件
npm i eslint-plugin-node eslint-plugin-promise -D

配置.eslintrc

在項目根目錄下新建.eslintrc文件，開始配置。

{
  // 指定js解析器
  "parser": "babel-eslint",

  // 定義ecma版本；sourceType定義爲模塊化的js編寫模式
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },

  // 定義運行環境，如不配置browser爲true則會報出window、document變量未定義的錯誤。同時須要配置node爲true，由於項目基於webpack構建會用到node中的如process全局變量。
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },

  // 運用airbnb規則，標準規則爲standard
  "extends": "airbnb", 

  // 自定義規則
  "rules": {
    "semi": [0] // 是否對結尾分號進行檢測 -- 0爲不檢測
  }
}

配置webpack

module: {
  rules: [{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader']
  }]
}

注意loader的執行順序爲從右到左，eslint-loader需在最右，先進行了eslint驗證再進行babel的編譯。

接着咱們來走一波，而後發現了大量的報錯，其中最爲多的是這個東西👇

Expected linebreaks to be 'LF' but found 'CRLF'

這個就是不一樣系統下的換行符會有所不一樣，windows的是CRLF，解決這個問題就須要用到editorconfig了

配置editorconfig

安裝插件 -- vscode下

市場裏直接搜索EditorConfig for VS Code安裝。

配置.editorconfig文件

項目根目錄下建立.editorconfig文件，而且配置

# 是不是頂級配置文件，設置爲true的時候纔會中止搜索.editorconfig文件
root = true

[*]
charset = utf-8
# 末尾行去掉尾隨的空格
trim_trailing_whitespace = true 
# 末尾行後加多一行空行
insert_final_newline = true 
# <"tab" | "space"> 製表符類型
indent_style = space  
indent_size = 2
# <"lf" | "cr" | "crlf"> 換行符類型
end_of_line = lf

項目中使用eslint

eslint報錯分析

如上，分別爲：
報錯的行數 / 錯誤類型 / 錯誤描述 / 對應的eslint規則

忽略eslint檢測

有時候咱們不須要對某些代碼進行eslint檢測，這時咱們能夠加上eslint註釋👇

export default class App extends React.Component { // eslint-disable-line
  render() {
    return <div>Home</div>;
  }
}

結合git使用eslint

咱們在代碼提交前但願先用eslint檢測一遍代碼，若是不經過則禁止提交代碼。
實施方法以下👇

一、安裝工具husky來設置git鉤子 npm i husky -D
二、配置package.json文件

// husky提供的鉤子
"husky": {
  "hooks": {
    // 在執行git commit以前先執行pre-commit，也就是執行eslint檢測，若不成功不能進入git commit
    "pre-commit": "npm run lint"
  }
},
"scripts": {
  // eslint檢測src目錄下的全部拓展名爲js和jsx的文件
  "lint": "eslint --ext .js  --ext .jsx src/"
}

結果就是這樣👇

eslint報錯了就直接不給commit