react项目配置Eslint

布拉格广场的鸽子 發表於 2022-9-30 16:44:00

React Or Taro 项目配置Eslint校验
<h2>一、下载Eslint相关deps依赖项；</h2>
<div class="cnblogs_code">
<pre>npm install --save-deveslint-plugin-prettiereslint-plugin-jsx-a11y eslint-config-airbnb</pre>
</div>
<div class="cnblogs_code">
<pre>注意：由于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可以满足当下需求；</pre>
</div>
<h2>二、配置.eslintrc.js文件（将默认的 .eslintrc 文件改完默认导出 .eslintrc.js)</h2>
<div class="cnblogs_code">
<pre>// .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',
},
};</pre>
</div>
 
<h2>三、新建 .eslintignore 文件，配置eslint不检测的文件</h2>
<div class="cnblogs_code">
<pre>// 没啥好讲的，直接将不需要检测的路径或文件丢在这里就ok
/.git/
/.Vscode/
node_modules//
dist/</pre>
</div>
<div>
<h2>4.新建.prettierrc.js文件</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<div class="cnblogs_code">
<pre>module.exports = {
tabWidth: 4,
singleQuote: true,
jsxSingleQuote: true,
printWidth: 140,
endOfLine: 'auto',
};</pre>
</div>
<h2> 5.修改编辑器的配置文件.editorconfig</h2>
</div>
<h4>.editorconfig 文件用于统一不同编辑器的代码风格的配置。比如我们要控制一个多人维护的项目缩进统一用4个空格：indent_size = 4</h4>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<div class="cnblogs_code">
<pre># 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</pre>
</div>
</div>
<h2>6.修改vscode编辑器的setting.json文件</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<div class="cnblogs_code">
<pre>// 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
 }
]</pre>
</div>
 
</div>
</div>

</div>
<div id="MySignature" role="contentinfo">
时间如白驹过隙，忽然而已，且行且珍惜...... 
来源：https://www.cnblogs.com/UnfetteredMan/p/16745415.html

頁: [1]

琼殿技术论坛's Archiver

react项目配置Eslint