React系列---ESlint

ESLint是一個JavaScript代碼靜態檢查工具，能夠檢查JavaScript的語法錯誤，提示潛在的bug，能夠有效提升代碼質量。維持前端團隊高度一致的編碼風格。ESLint不但提供一些默認的規則，也提供用戶自定義規則來約束所寫的JavaScript代碼。

詳細的能夠參考：ESLint中文

讓項目加上ESLint代碼規範支持很是容易。

安裝安裝ESLint、ESLint loader

npm install --save-dev eslint@3.19.0
npm install --save-dev eslint-loader

逐個配置規則有點麻煩，ESLint有不少第三方配置好的格式插件，Airbnb開發配置合集就比較經常使用：

npm install --save-dev eslint-config-airbnb

Airbnb包括瞭如下三個插件須要安裝：

npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-react 
npm install --save-dev eslint-plugin-jsx-a11y

項目根目錄下建立並ESLint配置文件，.eslintrc.js：

module.exports = {
  // 指定校驗的ECMAScript的版本及特性
  "parserOptions": {
    "ecmaVersion": 7, // ECMAScript版本，7爲ES7
    "sourceType": "module", //默認script，若是代碼是ECMAScript模塊，設置爲module
    "ecmaFeatures": { // 使用額外的語言特性
        "jsx": true // 啓用JSX
    }
  },
  // 當訪問未定義的變量時，no-undef 規則將發出警告
  // 指定腳本的運行環境。每種環境都有一組特定的預約義全局變量
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
  },
  // 當訪問未定義的變量時，no-undef 規則將發出警告
  // 腳本在執行期間訪問的額外的全局變量
  "globals": {
    "document": true,
    "navigator": true,
    "window":true,
    "node":true
  },
  // 使用第三方airbnb開發配置合集
  "extends": "airbnb",
  // eslint-config-airbnb包括瞭如下3個插件
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  // 定義本身的規則
  "rules": {
    "comma-dangle": ["error", "never"], // 要求或禁止末尾逗號：不容許逗號
    "indent": ["error", 4], // JavaScript代碼強制使用一致的縮進：4格縮進
  }
};

能夠參照ESLint完整規則列表，找到並定製本身的規則。