如何配置Eslint检测React代码?

Question

如何配置Eslint检测React代码

Answer 1

1、在项目根目录新建 （.eslintrc）文件，注意有个小点，将下面的代码复制进去{"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属性"scripts": {"lint": "eslint src(src表示你需要检测的文件目录，可以自由更改)"}3、运行检测npm lint 或者 npm run lint