JSXのESLint設定

Question

私のJSXファイルをチェックするためにESLintを設定したいが、設定がうまくいかない。正しい方法はありますか？

.eslintrc.js：

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

Answer 1

だけでJSXファイルの設定をlintのためには十分ではありません。ステージ4の提案よりも低い機能を使用している場合を除き、構成は正常です（ただし、babel-eslintは必要ありません）。デフォルトでは、ESLintはファイル.jsのみを処理します。 eslint --ext .jsx .

Answer 2

私はあなたが私が使用方法をチェックアウトすることができeslint https://github.com/yannickcr/eslint-plugin-react

にもプラグインを使用することをお勧めいたしますでしょう：あなたは、コマンドラインで--extフラグを使用して、同様.jsxファイルを処理したいということを指示する必要がありますそれ私の共有設定で： https://github.com/fernandopasik/eslint-config/blob/master/react.js

'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' 
    } 
};