JSX 的 ESLint 配置

Question

我想配置 ESLint 来检查我的 JSX 文件，但我的配置不起作用。正确的做法是什么？

.eslintrc.js:

module.exports = {
  extends: 'airbnb',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: [
    'react',
  ],
  parser: 'babel-eslint'
};

Answer 1

为了检查 JSX 文件，仅仅配置是不够的。您的配置看起来不错（尽管您可能不需要 babel-eslint，除非您使用的功能低于第 4 阶段提案）。默认情况下，ESLint 只会处理 .js 个文件。您必须通过在命令行上使用 --ext 标志来告诉它您还想处理 .jsx 文件：eslint --ext .jsx .

Answer 2

我建议您也使用 eslint 插件 https://github.com/yannickcr/eslint-plugin-react

您可以执行此示例配置：

'use strict';

module.exports = {
  'extends': [ 'plugin:react/recommended' ],
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true
    }
  },
  'plugins': [ 'react' ],
  'rules': {

    // React
    'react/forbid-prop-types': 'error',
    'react/no-multi-comp': [ 'error', { 'ignoreStateless': true }],
    'react/no-set-state': 'error',
    'react/no-string-refs': 'error',
    'react/prefer-es6-class': 'error',
    'react/prefer-stateless-function': 'error',
    'react/require-extension': 'error',
    'react/require-render-return': 'error',
    'react/self-closing-comp': 'error',
    'react/sort-comp': 'error',
    'react/sort-prop-types': 'error',
    'react/wrap-multilines': 'error',

    // JSX
    'react/jsx-boolean-value': 'error',
    'react/jsx-closing-bracket-location': 'error',
    'react/jsx-curly-spacing': [ 'error', 'always' ],
    'react/jsx-equals-spacing': 'error',
    'react/jsx-first-prop-new-line': 'error',
    'react/jsx-handler-names': 'error',
    'react/jsx-indent-props': [ 'error', 2 ],
    'react/jsx-indent': [ 'error', 2 ],
    'react/jsx-key': 'error',
    'react/jsx-max-props-per-line': [ 'error', { 'maximum': 3 }],
    'react/jsx-no-bind': 'error',
    'react/jsx-no-literals': 'off',
    'react/jsx-no-target-blank': 'error',
    'react/jsx-pascal-case': 'error',
    'react/jsx-sort-props': 'error',
    'react/jsx-space-before-closing': 'error'
  }
};

Answer 3

我找到了原始答案的替代方法，这样您就不必在运行 eslint 命令时指定参数。

选项 1

使用命令eslint . --ext .js --ext .jsx

选项 2

在您的 eslint 配置中指定 overrides...

//.eslintrc
{
  ...
  "overrides": [
    {
      "files": ["*.jsx", "*.js"]
    }
  ],
  ...
}

JSX 的 ESLint 配置

ESLint configuration for JSX

jsx

reactjs

eslint

选项 1

选项 2