eslint

依赖 babel-eslint

版本一：.eslintrc

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parser": "babel-eslint",
  "rules": {
    "react/prop-types": 0,
    "react/display-name": 0
  },
  "globals": {
    "window": true,
    "document": true,
    "Image": true,
    "Event": true,
    "Promise": true,
    "sessionStorage": true,
    "setTimeout": true,
    "process": true
  }
}

版本二：.eslintrc.js

module.exports = {
  parser: 'babel-eslint',
  extends: 'airbnb',
  plugins: ['react'],
  settings: {
    'import/resolver': {
      node: {
        moduleDirectory: ['node_modules', 'src']
      }
    }
  },
  env: {
    browser: true,
    mocha: true,
    es6: true
  },
  rules: {
    'spaced-comment': [0],
    'class-methods-use-this': 0,
    'jsx-a11y/click-events-have-key-events': 0,
    'no-restricted-syntax': 0,
    'react/jsx-closing-tag-location': 0,
    'arrow-parens': 0,
    'react/prefer-stateless-function': 0,
    'react/require-default-props': 0,
    'jsx-a11y/img-redundant-alt': 0,
    'jsx-a11y/interactive-supports-focus': 0,
    'jsx-a11y/anchor-is-valid': 0,
    'jsx-a11y/mouse-events-have-key-events': 0,
    'no-mixed-operators': 0,
    'react/prop-types': [1, { ignore: ['children'], customValidators: [] }],
    'react/no-array-index-key': 1,
    'no-underscore-dangle': 1,
    'no-unused-vars': 1,
    'space-before-blocks': 1,
    'jsx-a11y/no-static-element-interactions': 0,
    'no-return-assign': 1,
    'no-case-declarations': 1,
    'comma-dangle': [
      'error',
      {
        arrays: 'never',
        objects: 'never',
        imports: 'never',
        exports: 'never',
        functions: 'ignore'
      }
    ],
    "function-paren-newline": 0,
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }]
  }
};

.editorconfig（vscode 需要安装插件配合eslint一起使用解决‘LF’）

root = true
[*]
end_of_line = lf
insert_final_newline = true
insert_final_newline = true

webpack：配置eslint规则

{
        test: /\.(js|jsx|mjs)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve('eslint'),

            },
            loader: require.resolve('eslint-loader'),
          },
        ],
        include: paths.appSrc,
      }, 

React项目增加eslint

• 安装安装ESLint、ESLint loader

npm install --save-dev eslint
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 = {
  parser: 'babel-eslint',
  extends: 'airbnb',
  plugins: ['react'],
  settings: {
    'import/resolver': {
      node: {
        moduleDirectory: ['node_modules', 'src']
      }
    }
  },
  env: {
    browser: true,
    mocha: true,
    es6: true
  },
  rules: {
    'spaced-comment': [0],
    'class-methods-use-this': 0,
    'jsx-a11y/click-events-have-key-events': 0,
    'no-restricted-syntax': 0,
    'react/jsx-closing-tag-location': 0,
    'arrow-parens': 0,
    'react/prefer-stateless-function': 0,
    'react/require-default-props': 0,
    'jsx-a11y/img-redundant-alt': 0,
    'jsx-a11y/interactive-supports-focus': 0,
    'jsx-a11y/anchor-is-valid': 0,
    'jsx-a11y/mouse-events-have-key-events': 0,
    'no-mixed-operators': 0,
    'react/prop-types': [1, { ignore: ['children'], customValidators: [] }],
    'react/no-array-index-key': 1,
    'no-underscore-dangle': 1,
    'no-unused-vars': 1,
    'space-before-blocks': 1,
    'jsx-a11y/no-static-element-interactions': 0,
    'no-return-assign': 1,
    'no-case-declarations': 1,
    'comma-dangle': [
      'error',
      {
        arrays: 'never',
        objects: 'never',
        imports: 'never',
        exports: 'never',
        functions: 'ignore'
      }
    ],
    "function-paren-newline": 0,
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
    "object-curly-newline": 0
  }
};

• 如果使用vscode，再添加.editorconfig

root = true
[*]
end_of_line = lf
insert_final_newline = true
insert_final_newline = true

注意：解决项目‘LF’的问题！！！

1：拉代码之前，要先设置git 规则和vscode的规则

git需要设置：git config --global core.autocrlf input
vscode设置："files.eol": "\n"