2

React Or Taro 项目配置Eslint校验

 1 year ago
source link: https://www.fly63.com/article/detial/12190
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

一、下载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/

四、新建.prettierrc.js文件

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

五、修改编辑器的配置文件.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

六、修改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
        }
    ]
 来自：https://www.cnblogs.com/UnfetteredMan/archive/2022/09/30/16745415.html

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK