react項目配置Eslint

React Or Taro 項目配置Eslint校驗

一、下載Eslint相關deps依賴項；

npm install --save-dev  eslint-plugin-prettier  eslint-plugin-jsx-a11y eslint-config-airbnb

註意：由於eslint-config-airbnb目前版本已經超過19，會出現一個小問題，箭頭函數和命名函數會被Eslint 提示衝突，這是由於19版本的升級導致的解決方案目前有兩個

1，在.eslintrc.js 文件中添加了以下規則

    'react/function-component-definition': [2, { namedComponents: 'arrow-function', unnamedComponents: 'arrow-function' }],

    這樣，eslint 將只接受組件的箭頭函數，而不是函數表達式（預設情況下）；

2，可以改變函數寫法來解決衝突，這樣是最簡單的

    箭頭函數：const Demo = () : ReactNode => <div>demo</div>;

    function Demo () {
        return <div>demo</div>
    }
3，通過改變版本去解決衝突，

    直接下載指定的版本的包就可以解決，現在自測18.1.0可以滿足當下需求；

二、配置.eslintrc.js文件（將預設的 .eslintrc 文件改完預設導出 .eslintrc.js)

// .eslintrc.js 如果編輯器module.exports報錯，可嘗試重啟編輯器

module.exports = {
  root: true,
  extends: ['taro/react', 'airbnb', 'airbnb/hooks'],
  parser: '@typescript-eslint/parser', // ESLint 預設使用 esprima 作為其解析器，也可以在配置文件中指定一個不同的解析器（它必須是一個 Node 模塊，且它必須符合 parser interface）
  plugins: [
    'react',
    'react-hooks',
    'import',
    'jsx-a11y'
  ],
  rules: {
    'react/function-component-definition': [2, { namedComponents: 'arrow-function', unnamedComponents: 'arrow-function' }],
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    'no-undef': 'off',
    'import/no-extraneous-dependencies': 'off',
    'import/prefer-default-export': 'off',
    'import/no-unresolved': 'off',
    'no-unused-vars': 'off',
    'import/extensions': 'off',
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    indent: ['error', 2, { SwitchCase: 1 }],
    'linebreak-style': 'off',
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'dot-notation': 'off',
    'spaced-comment': 'off',
    'comma-dangle': 'off',
    'space-before-function-paren': ['error', 'never'],
    'one-var': 'off',
    'one-var-declaration-per-line': 'off',
    'no-use-before-define': 'off',
    'no-restricted-globals': ['error', 'history'],
    'class-methods-use-this': 'off',
    radix: 'off',
    'global-require': 'error',
    'default-case': 'off',
    'no-param-reassign': 'error',
    'consistent-return': 'off',
    'no-script-url': 'error',
    'no-else-return': 'error',
    'no-restricted-syntax': 'error',
    'no-extend-native': 'error',
    'no-return-assign': 'off',
    'no-underscore-dangle': 'off',
    'no-unused-expressions': ['error', {
      allowShortCircuit: true,
      allowTernary: true,
      allowTaggedTemplates: true
    }],
    'max-len': ['error', {
      code: 200,
      ignoreComments: true,
      ignoreUrls: true,
      ignoreTemplateLiterals: true
    }],
    'jsx-quotes': ['error', 'prefer-single'],
    'jsx-a11y/alt-text': 'off',
    'jsx-a11y/no-autofocus': 'off',
    'jsx-a11y/label-has-for': 'off',
    'jsx-a11y/label-has-associated-control': 'off',
    'jsx-a11y/media-has-caption': 'off',
    'jsx-a11y/click-events-have-key-events': 'off',
    'jsx-a11y/no-noninteractive-element-interactions': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'jsx-a11y/anchor-is-valid': 'off',
    'prefer-destructuring': 'off',
    'no-plusplus': 'off',
    'no-trailing-spaces': 'off',
    'react/prop-types': 'off',
    'react/jsx-tag-spacing': 'off',
    'import/no-duplicates': 'off',
    'import/order': 'off',
    'import/no-dynamic-require': 'off',
    'react/no-did-update-set-state': 'error',
    'react/no-unused-state': 'error',
    'react/no-find-dom-node': 'error',
    'react/forbid-prop-types': 'off',
    'react/jsx-indent-props': 'off',
    'react/no-array-index-key': 'off',
    'react/require-default-props': 'off',
    'react/sort-comp': 'off',
    'react/jsx-wrap-multilines': 'off',
    'react/destructuring-assignment': 'off',
    'react/jsx-closing-bracket-location': 'off',
    'react/jsx-first-prop-new-line': 'off',
    'react/no-multi-comp': 'off',
    'react/jsx-one-expression-per-line': 'off',
    'react/no-access-state-in-setstate': 'off',
    'react/jsx-no-bind': 'off',
    'react/jsx-indent': [2, 2],
    'react/no-unescaped-entities': 'off',
    'no-prototype-builtins': 'error',
    'no-nested-ternary': 'error',
    'react-hooks/exhaustive-deps': 'off',
    'react/jsx-no-target-blank': 'error',
    'no-console': ['off'],
    'react/jsx-props-no-spreading': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'no-useless-constructor': 'off',
    'no-empty-function': 'off',
    'object-curly-newline': 'off',
    'react/no-danger': 'off',
    'react/button-has-type': 'off',
    'no-multiple-empty-lines': 'off',
    'no-useless-escape': 'off',
    'react/no-unused-prop-types': 'off',
    'react/default-props-match-prop-types': 'off',
    camelcase: 'off',
  },
};

三、新建 .eslintignore 文件，配置eslint不檢測的文件

// 沒啥好講的，直接將不需要檢測的路徑或文件丟在這裡就ok
/.git/
/.Vscode/
node_modules//
dist/

4.新建.prettierrc.js文件

module.exports = {
    tabWidth: 4,
    singleQuote: true,
    jsxSingleQuote: true,
    printWidth: 140,
    endOfLine: 'auto',
};

 5.修改編輯器的配置文件.editorconfig

.editorconfig 文件用於 統一不同編輯器的代碼風格的配置。比如我們要控制一個多人維護的項目縮進統一用4個空格：indent_size = 4

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = crlf

[*.md]
trim_trailing_whitespace = false

6.修改vscode編輯器的setting.json文件

// jsx自動修複
    "editor.formatOnSave": true,
    // 保存自動修複
    "eslint.autoFixOnSave": true,
    "eslint.run": "onSave",
    "javascript.format.enable": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnPaste": false,
    "editor.formatOnType": true,
    "files.autoSave": "onFocusChange",
    "eslint.nodePath": "",
    "files.trimTrailingWhitespace": true,

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
        "language": "html",
        "autoFix": true
        },
        {
        "language": "react",
        "autoFix": true
        }
    ]