React Or Taro 项目配置Eslint校验

更新日期: 2022-09-30阅读: 244标签: 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/

四、新建.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

链接: https://www.fly63.com/article/detial/12190

你不知道的Vuejs - 使用ESLint检查代码质量

Javascript 是一门弱类型语言,所以语法检查变得尤为重要。因此对 Javascript 进行语法检查的工具应运而生,目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。

vue中关于eslint,以及如何在vue项目中关闭或使用ESLint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。 由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要。 这篇文章主要讲解如何在vue项目中关闭或使用ESLint

ESLint_JS代码检查工具

ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。本文将详细介绍ESLint

Eslint规则_ESLint常见命令

详解 ESLint 规则,规范你的代码,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。

ESLint规则配置说明

有的时候多人开发,代码的风格,用的代码编辑器都各不相同,所以为了大家能保持一种统一的风格,ESLint就可以帮我们检查代码的格式,和风格。

vue-cli3 取消eslint 校验代码

vue create hello-world创建项目的时候选择了Linter / Formatter,所以写代码的时候会有代码规范检查,怎么才能关闭这个校验呢?

什么是ESLint?

官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一个工具,而且是一个用来检查代码的工具。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码

项目常用eslint配置(Vue/React/TypeScript)

Vue项目常用eslint配置需要安装依赖(Vue这里使用standard扩展和vue插件,所以需要安装);React项目常用eslint配置同样安装依赖,React这里使用的airbnb扩展。安装eslint-import-resolver-webpack用来解决webpack中设置的别名eslint无法识别报错的问题。

vue开发之代码规范eslint

ESLint不管是多人合作还是个人项目,代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。

认识 ESLint 和 Prettier

先说是什么:ESLint 是一个检查代码质量与风格的工具,配置一套规则,他就能检查出你代码中不符合规则的地方,部分问题支持自动修复。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!