如何配置Eslint檢測React代碼
1 回答
Cats萌萌
TA貢獻1805條經驗 獲得超9個贊
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 |
添加回答
舉報
0/150
提交
取消