前端react項目中添加Eslint校驗

1. 當前項目目錄安裝npm eslint --save-dev
2. eslint --init 生成一個.eslintrc.js文件（可本身在這個文件中進行配置）
3. 安裝

npm i eslint-config-airbnb eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react babel-eslint --save-dev
複製代碼

4. package.json文件中添加

"lint-staged": {
    "linters": {
      "*.js": [
        "eslint --fix",
        "git add"
      ]
    },
    "ignore": [
      "**/static/**/*.js"
    ]
  },
複製代碼

.eslintrc.js文件

module.exports = {
    extends: ['eslint-config-airbnb'],
    env: {
      browser: true,
      node: true,
      jasmine: true,
      jest: true,
      es6: true,
    },
    globals: {
      $: false,
      jQuery: false,
      Highcharts: false,
      require: false
    },
    parser: 'babel-eslint',
    parserOptions: {
      ecmaVersion: 6,
      ecmaFeatures: {
        jsx: true,
        experimentalObjectRestSpread: true,
      },
    },
    plugins: [
      'react',
      'babel',
    ],
    rules: {
      'func-names': 0,
      'arrow-parens': 0,
      'prefer-const': 2,            // 不強制 const 仍是let
      'prefer-destructuring': [1, {
        "array": false,
        "object": true
      }],
      'comma-dangle': ['error', 'always-multiline'],           // 不強制 最後一個 ,
      'class-methods-use-this': 0,  // 不判斷對象方法裏是否使用了 this
      'consistent-return': 0,       // 容許函數根據代碼分支具備不一樣的return行爲
      'consistent-this': 2,       // this 的別名統一使用 that
      'curly': [2, 'all'],          // 語句塊不容許省略花括號
      'func-style': ['error', 'declaration', { "allowArrowFunctions": true }], // 只容許使用 function 定義函數
      'multiline-comment-style': ['error', 'starred-block'], // 多行註釋
      'no-await-in-loop': 0,        // 循環裏的 await
      'no-bitwise': 0,              // 容許位運算
      'no-console': 1,              // 上線的代碼裏不容許有 console
      'no-empty-function': ['error', { allow: ['arrowFunctions'] }], // 不容許空函數
      'no-nested-ternary': 0,       // 容許三元運算嵌套
      'no-param-reassign': ['error', { props: false }],              // 禁止對參數賦值
      'no-plusplus': 0,             // 容許 ++  -- 運算
      'no-script-url': 0,           //
      'no-throw-literal': 0,
      'no-unused-expressions': ['error', { "allowShortCircuit": true, "allowTernary": true }],
      'no-warning-comments': ['warn', { terms: ['todo', 'fixme', 'fixed'], location: 'anywhere' }],
      'no-multiple-empty-lines': 0, // 容許連續空行
      'no-mixed-operators': 0,
      'no-prototype-builtins': 0, // 禁止操做 Object.prototype
      'object-curly-newline': ['error', {consistent: true}],
      // 'object-curly-newline': ['error', {multiline: true}],
      'prefer-arrow-callback': 0, // callback裏容許使用普通函數
      'import/no-amd': 0,         // 容許 amd 導入風格
      'import/no-dynamic-require': 0, // 容許使用 require 動態導入
      'import/no-commonjs': 0,    // 容許 commonjs 風格
      'import/namespace': 2,      // 使用import * as xx導入的時候, 檢測使用到的xx的屬性是否有export
      'import/default': 2,        // 確保 import default 的組件裏有 export default
      'import/no-extraneous-dependencies': ['error', { // 只容許導入package.json裏依賴的包
        devDependencies: false,
        optionalDependencies: false,
      }],
      'react/no-danger': 0, // 容許使用 dangerouslySetInnerHTML
      'react/no-direct-mutation-state': 2, // 禁止直接修改 state
      'react/no-did-update-set-state': 0,     //
      'react/no-find-dom-node': 2,            // 禁止使用 findDomNode
      'react/no-render-return-value': 2,      // render 必須有返回值
      'react/no-set-state': 0,                // 關閉 儘可能用無狀態組件
      'react/prefer-es6-class': ['error', 'always'], //
      'react/require-optimization': 1,
      'react/jsx-child-element-spacing': 0,
      'react/jsx-curly-spacing': [2, 'always'], // 屬性大括號內的空格
      'react/jsx-equals-spacing': [2, 'never'],
      'react/prefer-stateless-function': 2,
      'react/jsx-first-prop-new-line': [2, 'multiline-multiprop'], // 多行屬性才換行
      'react/jsx-handler-names': 2,
      'react/jsx-filename-extension': [2, {extensions: ['.js', '.jsx']}],
      'react/jsx-indent': [2, 2], // jsx縮進2個空格
      'react/jsx-indent-props': [2, 2],
      'react/jsx-key': 2,         // 循環元素必須有key
      'react/jsx-no-target-blank': 0,
      'react/jsx-one-expression-per-line': 0, // 關閉 表達式佔單行
      'react/jsx-sort-default-props': 0,
      'react/jsx-sort-props': 0,
      'react/jsx-space-before-closing': [2, 'never'],
      'react/jsx-tag-spacing': 0,
    },
  };
  }
複製代碼