如何配置Eslint检测React代码

Question

如何配置Eslint检测React代码

Answer 1

1、在项目根目录新建 （.eslintrc）文件，注意有个小点，将下面的代码复制进去

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

{   "extends": [     "eslint:recommended",     "plugin:import/errors",     "plugin:import/warnings"   ],   "plugins": [     "react"   ],   "parserOptions": {     "ecmaVersion": 6,     "sourceType": "module",     "ecmaFeatures": {       "jsx": true     }   },   "env": {     "es6": true,     "browser": true,     "node": true,     "jquery": true,     "mocha": true   },   "settings": {     "import/ignore": [       "node_modules"     ]   },   "rules": {     "quotes": 0,     "no-console": 1,     "no-debugger": 1,     "no-var": 1,     "semi": [1, "always"],     "no-trailing-spaces": 0,     "eol-last": 0,     "no-unused-vars": 0,     "no-underscore-dangle": 0,     "no-alert": 0,     "no-lone-blocks": 0,     "jsx-quotes": 1,     "react/display-name": [ 1, {"ignoreTranspilerName": false }],     "react/forbid-prop-types": [1, {"forbid": ["any"]}],     "react/jsx-boolean-value": 1,     "react/jsx-closing-bracket-location": 0,     "react/jsx-curly-spacing": 1,     "react/jsx-indent-props": 0,     "react/jsx-key": 1,     "react/jsx-max-props-per-line": 0,     "react/jsx-no-bind": 1,     "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-did-mount-set-state": 1,     "react/no-did-update-set-state": 1,     "react/no-direct-mutation-state": 1,     "react/no-multi-comp": 1,     "react/no-set-state": 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   } }

2、在package.json文件里面配置scripts的lint属性

1 2 3

"scripts": {     "lint": "eslint src(src表示你需要检测的文件目录，可以自由更改)" }

3、运行检测

1	npm lint 或者 npm run lint

 本回答由提问者推荐