使用 JSX 配置 eslint

Posted 2023-02-21

【中文标题】使用 JSX 配置 eslint

【英文标题】：Configuring eslint with JSX

【发布时间】：2016-07-11 08:35:10

【问题描述】：

我不知道如何配置我的 .eslintrc 文件以正确“接受”JSX。换句话说，当在 Atom 中输入 JSX 时，它会崩溃。

我添加了"parser": "babel-eslint"，因为这似乎是其他人一直在调整他们的 linter 的一部分......但后来我在 Atom 中收到了这个错误：

错误：无法从“/Users/josetello/.atom/packages/linter-eslint/node_modules”中找到模块“babel-eslint”

我已经全局安装了 babel-eslint 和 --save-dev。没有运气。不知道为什么它抱怨原子包......

有没有更好的方法来为 JSX 配置 .eslintrc？

我的 .eslintrc 文件：

  "settings": 
   "ecmascript": 6
 ,
 "ecmaFeatures": 
   "blockBindings": true,
   "jsx": true
 ,
 "parser": "babel-eslint",
 "env": 
   "browser": true,
   "jquery": true,
   "node": true,
   "mocha": true,
   "es6": true
 ,
 "rules": 
   "prefer-arrow-callback": 1,
   "semi": 1,
   "strict": 0,
   "indent": [2, 2],
   "quotes": [1, "single"],
   "no-multi-spaces": [1, 
     "exceptions": 
       "VariableDeclarator": true,
       "FunctionExpression": true
     
   ],
   "key-spacing": [0, "align": "value"],
   "no-underscore-dangle": 0
 ,
 
  "plugins": [
      "react"
    ]
  

【问题讨论】：

你用的是哪个 eslint 版本？

【参考方案1】：

在 ESLint 2 中，ecmaFeatures (and a lot more...) 发生了变化

代替

    ecmaFeatures: 
        jsx: true
    

试试

    parserOptions: 
        ecmaFeatures: 
            jsx: true
        
    

我认为你可以删除parser，但我自己不使用Atom，所以我不会肯定地说。它不是我自己的 .eslintrc 的一部分。然后你可能想要添加反应 linting 规则。 https://github.com/yannickcr/eslint-plugin-react

  "extends": ["eslint:recommended", "plugin:react/recommended"]

我喜欢将所有这些垃圾添加到rules，这样当我想禁用某些东西时我可以快速访问，但也许这只是我自己。

  "rules": 
    "jsx-quotes"       : 1,
    "react/display-name": 0,
    "react/forbid-prop-types": 0,
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 1,
    "react/jsx-curly-spacing": 1,
    "react/jsx-handler-names": 1,
    "react/jsx-indent-props": 1,
    "react/jsx-indent": 1,
    "react/jsx-key": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-bind": 0,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/jsx-pascal-case": 1,
    "react/jsx-sort-prop-types": 0,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-deprecated": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-is-mounted": 1,
    "react/no-multi-comp": 0,
    "react/no-set-state": 1,
    "react/no-string-refs": 0,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  

【讨论】：

我真的很怀疑。上周我刚刚在我当前的项目中升级了 eslint 和一堆其他包，这一点都不好玩，但我显然学到了一些新技巧 :)

它可能对某些人有所帮助：您可以查看robinwieruch.de/react-eslint-webpack-babel 以了解 React、Webpack、Babel 中的 ESLint 设置。