在 React 项目中集成 ESLint 做代码规范

"在团队项目开发中,每人都有自己代码分格,而这些不同的代码风格混合在同一个项目中会使得代码看起来十分混乱,不利于阅读和维护,而这常常令我们感到烦恼。因此在一个团队中制定一套统一的代码规范势在必行。我之前在《React 项目中引入 TSLint 做代码规范》这篇文章中简单的介绍了一下如何在项目中引入TSLint做代码规范,现在本篇文章要介绍一下如何在项目中引入ESLint做代码规范。TSLint 和 ESlint 都是用来制定代码规范的工具,因此选择其中一个集成项目即可。这里介绍的是使用著名的独角兽公司 Airbnb 的前端ESlint编码规范

步骤一、安装 Airbnb 相关插件

现在终端(或cmd)中执行命令 npm -v 查看npm 版本号,如果不是 5 以上版本请先安装 nodejs 得到最新版本的 npm 执行一下命令

npx install-peerdeps --dev eslint-config-airbnb

1-1

这是最简单的做法安装 Airbnb 相关配套插件,当然官网中还有介绍其他的安装方法,不过另一种方法不如上面这一条命令来的简单所以这里不做赘述,有兴趣的可以 点击这里查看

注意:如果在执行安装 eslint-config-airbnb 命令时报错,错误信息为:“找不到命令:install-peerdeps”,这时需要执行命令 npm install -g install-peerdeps 来安装  install-peerdeps 之后再尝试使用命令安装 eslint-config-airbnb

步骤二、配置 .eslintrc.js 文件

在项目根目录下检查是否有以 eslintrc 为名字的文件(可能是 .eslintrc、.eslintrc.js、.eslintrc.json 等),如果没有则手动创建一个 .eslintrc.js 文件

2-1

我的 .eslintrc.js 的初步配置文件如下图,在后期项目逐步完善可能还会再根据团队偏好再在rules中添加新的规则或覆盖airbnb中的规则(在文末有 .eslintrc.js 文件中的代码可复制)

2-2

需要注意的是在 .eslintrc.js 文件的配置中有几个字段需要注意

parser: 配置解析器,可以是 babel-eslint,也可所以是 @typescript-eslint/parser,而官网中写道默认是 esprima,根据我的测试 babel-eslint 貌似只能解析 js 文件中ESLint规则,解析不到 tsx 文件中的规则,因此我在项目中使用的 @typescript-eslint/parser

plugins:在配置文件里配置插件时, 可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

rules:这是规则配置字段,该字段中的规则的优先级高于 aribnb 的规则,可以在该字段中配置规则覆盖 aribnb 中的规则。

步骤三、配置 .eslintignore 忽略文件

在该文件中配置不需要被 ESLint 检测的文件,如图3-1是我在项目中的配置

3-1

官网中的介绍如图3-2

3-2

步骤四、安装VsCode插件

安装ESLint插件后重启编辑器,查看ESLint规则是否生效

4-1

步骤五、检查ESLint规则是否生效

5-1

注意:如果没有生效查看在 .eslintrc.js  中的 rules 字段中是否配置了如下(如图2-1)规则

'react/jsx-filename-extension': ['error',{extensions: ['.js', '.jsx', '.ts', '.tsx'],}, ],

添加该规则后重启编辑器


注意:配置ESLint生效后请前往 《React 项目中添加 ESLint + Perttier 做代码规范》查看 ESLint 如何搭配 Perttier 写出更优质的代码。


.eslintrc.js 中的编码

module.exports = {

    extends: ['airbnb', 'airbnb/hooks', 'prettier'],

    parser: '@typescript-eslint/parser', // ESLint 默认使用 esprima 作为其解析器,也可以在配置文件中指定一个不同的解析器(它必须是一个 Node 模块,且它必须符合 parser interface)

    env: {

        // 要在配置文件里指定环境,使用 env 关键字指定你想启用的环境,并设置它们为 true

        browser: true,

        node: true,

        mocha: true,

        es6: true,

        commonjs: true,

    },

    globals: {

        // 要在配置文件中配置全局变量, 对于每个全局变量键,将对应的值设置为 "writable" 以允许重写变量,或 "readonly" 不允许重写变量

        // "Babel": "writable",

        // "React": "writable"

    },

    plugins: [

        // 在配置文件里配置插件时, 可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

        'react',

        'jsx-a11y',

        'react-hooks',

        'import',

        'prettier',

    ],

    rules: {

        // 可以使用 rules 连同错误级别和任何你想使用的选项,在配置文件中进行对airbnb规则的修改

        indent: ['error', 4],

        semi: [

            'error',

            'always',

            {

                omitLastInOneLineBlock: true,

            },

        ],

        'react/jsx-indent': ['error', 4],

        'linebreak-style': ['error', 'windows'],

        'react/jsx-filename-extension': [

            'error',

            {

                extensions: ['.js', '.jsx', '.ts', '.tsx'],

            },

        ],

        'class-methods-use-this': 'off',

        'import/extensions': 'off',

        'import/no-unresolved': 'off',

        'prettier/prettier': 'error',

        // 'sort-imports': ['error', {

        //     ignoreCase: false,

        //     ignoreDeclarationSort: false,

        //     ignoreMemberSort: false,

        //     memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],

        // }],

        // "global-require": "off",

        // "no-underscore-dangle": "off",

        // "no-new-func": "off",

        // "no-param-reassign": "off",

        // "react/prefer-stateless-function": "off",

        // "react/no-multi-comp": "off",

        // "react/jsx-no-bind": "off",

        // "react/jsx-indent": "off",

        // "react/jsx-first-prop-new-line": "off",

        // "react/jsx-filename-extension": "off",

        // "no-restricted-syntax": "off"

    },

};





参考网址:

ESlint中文官网:https://eslint.bootcss.com/docs/user-guide/getting-started

https://www.npmjs.com/package/eslint-config-airbnb

https://blog.csdn.net/msg1254765721/article/details/90090242

https://www.jianshu.com/p/933b6b6a84c9

https://www.cnblogs.com/samwu/p/5772778.html

https://www.cnblogs.com/kugeliu/p/9154021.html

https://blog.csdn.net/weixin_34167043/article/details/88728537

https://blog.csdn.net/qq_43093708/article/details/82969272

https://www.jianshu.com/p/857a840cc9c6

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342