使用JSX配置eslint

时间:2016-03-23 20:59:05

标签: reactjs atom-editor eslint jsx

我无法弄清楚如何正确配置我的.eslintrc文件"接受" JSX。换句话说,当在Atom中输入JSX时,它就吓坏了。

我添加了"parser": "babel-eslint",因为这似乎是其他人为调整他们的短片而做的事情的一部分......但是我在Atom中遇到了这个错误:

错误:无法找到模块' babel-eslint'来自&Users/josetello/.atom/packages/linter-eslint/node_modules'

我在全球范围内安装了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"
    ]
  }
}

1 个答案:

答案 0 :(得分:22)

关于ecmaFeaturesand a lot more...

,ESLint 2的情况发生了变化

而不是

{
    ecmaFeatures: {
        jsx: true
    }
}

{
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        }
    }
}

我认为你可以删除parser,但我自己并不使用Atom,所以我不会肯定地说出来。它不属于我自己的.eslintrc。然后你probalby想要添加反应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
  }
}