Vue 项目中 ESlint 配置

Easter79
• 阅读 1164

前言

对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了。

一、eslint 安装

1、全局安装

npm i -g eslint

全局安装的好处是,在任何项目我们都可以使用eslint的全局命令进行代码规则操作,但是这对我们的意义并不大,后续会详细介绍;
全局安装之后,要求相关的eslint插件页必须全局安装,这对多人开发项目来说会比项目安装更加繁琐。所以,我们这里采用在项目上安装eslint:

2、项目安装

npm i -D eslint

3、编辑器安装

二、eslint 定义规则

1、创建 .eslintrc.js 文件

  • 可以使用 ./node_modules/.bin/eslint --init 创建文件
  • .eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件,这里使用 .js文件
  • 在 package.json 里创建一个 eslintConfig 属性,在那里,同样可以定义你的配置
  • 如果 .eslintrc.js 和 package.json里的 eslintConfig 同时存在,则只读取 .eslintrc.js文件

2、eslint 选项说明

"root": true

默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。如果发现配置文件中有 “root”: true,它就会停止在父级目录中寻找。

  parserOptions: {

    parser: 'babel-eslint', // 解析器,默认使用Espree

    ecmaVersion: 6, // 支持es6语法,但并不意味着同时支持新的 ES6 全局变量或类型(比如 Set 等新类型)

    sourceType: 'module', // 指定来源的类型,"script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)

    // 使用的额外的语言特性

    ecmaFeatures: {

      jsx: true, // 启用 JSX

      globalReturn: true, // 允许在全局作用域下使用 return 语句

      impliedStrict: true, // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)

      experimentalObjectRestSpread: true, // 启用实验性的 object rest/spread properties 支持。(重要:这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能,除非当它发生改变时你愿意承担维护成本。)

    },

  }

解析器选项可以在 parserOptions 属性设置。设置解析器选项能帮助 ESLint 确定什么是解析错误,所有语言选项默认都是 false。如上:

  env: {
    es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
    node: true, // Node.js 全局变量和 Node.js 作用域
    browser: true, // 浏览器全局变量
    jquery: true, // jQuery 全局变量
  }

使用 env 关键字指定你想启用的环境。如上:
更多环境设置请参考:https://cn.eslint.org/docs/user-guide/configuring#specifying-environments

  globals: {
    template: false, // false 不允许被重写
    _util: false,
  }

当访问当前源文件内未定义的变量时,no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量,推荐你在 ESLint 中定义这些全局变量,这样 ESLint 就不会发出警告了。如上:

  plugins: [
    'html', // 此插件用来识别.html 和 .vue文件中的js代码
  ]

ESLint 支持使用第三方插件。在使用插件之前,你必须使用 npm 安装它。如:npm i -D eslint-plugin-html。在配置文件里配置插件时,可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。如上:

"extends": "eslint:recommended"

一个配置文件可以从基础配置中继承已启用的规则。如上,如果值为字符串数组则每个配置继承它前面的配置。值为 “eslint:recommended” 的 extends 属性启用了eslint默认的规则,请参考:https://cn.eslint.org/docs/rules/

  rules: {
    indent: [2, 4], // 强制使用一致的缩进
    eqeqeq: [2, 'always'], // 要求使用 === 和 !==
    semi: [2, 'never'], // 要求或禁止使用分号代替 ASI
    quotes: [2, 'single'], // 强制使用一致的反勾号、双引号或单引号
  }

ESLint 附带有大量的规则。你可以在rules选项中设置,设置的规则将覆盖上面继承的默认规则。要改变一个规则设置,你必须将规则 ID 设置为下列值之一:

“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
“error” 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

三、eslint 代码检测和修复

这里讲的是使用 eslint 命令行来操作,后续会讲到如何用编辑器提升代码效率

1、代码检测

项目根目录运行 eslint,检测指定文件,支持 glob 模式

./node_modules/.bin/eslint index.js

检测index.js文件,如下,有一个错误:多余的分号(基于semi规则)。并告诉我们此规则可以通过 --fix 命令修复。

指定文件后缀名

./node_modules/.bin/eslint --ext .js,.html src

目前,告诉 ESLint 哪个文件扩展名要检测的唯一方法是使用 --ext 命令行选项指定一个逗号分隔的扩展名列表。注意,该标记只在与目录一起使用时有效,如果使用文件名或 glob 模式,它将会被忽略。

2、代码修复

项目根目录运行:

./node_modules/.bin/eslint index.js --fix

会自动修复代码,当然不是所有的规则都能实现自动修复的,具体说明请参照:https://cn.eslint.org/docs/rules/

四、eslint更多配置方式

完整的 配置层次结构,从最高优先级最低的优先级,如下:

1、行内配置

/*eslint-disable*/ 、 /*eslint-enable*/
/*global*/
/*eslint*/
/*eslint-env*/

2、命令行选项

--global
--rule
--env
-c、--config

3、项目级配置

与要检测的文件在同一目录下的 .eslintrc.\* 或 package.json 文件
继续在父级目录寻找 .eslintrc 或 package.json文件,直到根目录(包括根目录)或直到发现一个有"root": true的配置。

4、如果不是(1)到(3)中的任何一种情况,退回到 ~/.eslintrc 中自定义的默认配置。

五、.eslintignore 忽略文件

1、定义及作用

在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。

2、忽略规则

.eslintignore 文件是一个纯文本文件,其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如:

/dist/
/*.js

eslint总是忽略 /node_modules/\* 和 /bower_components/\* 中的文件

3、用eslint命令检查忽略文件

./node_modules/.bin/eslint index.js

六、创建自己的规则风格文件

1、命名

eslint-config-* // 如:eslint-config-vui

2、上传

参照:发布一个自己的npm包

3、下载

npm i -D eslint-config-vui

4、使用

在继承规则 extends 属性中定义自己上传的规则名,可以忽略 eslint-config- 字符,如下:

extends: ['vui']

5、eslint-config-vui 规则源码地址

https://github.com/shiguang0116/eslint-config-vui

七、使用编辑器插件标识错误以及自动修复代码

为什么使用编辑器插件:上述讲到的使用 eslint 命令来检测和修复代码的操作显然非常繁琐,我们需要能够自动修复代码的工具,相关编辑器都提供了 eslint 插件。

参考:ESLint配置(二):vscode配置eslint,实现错误代码标识以及自动修复

八、使用构建工具检测代码

为什么:以上方式,包括后续讲到的使用编辑器修复代码,都只是自我书写代码的规范意识而已,在多人开发时如何强制性的要求提交的代码是符合我们自定的规范呢?这就需要在构建工具做相应的配置。

参考:ESLint配置(三):构建工具(webpack、gulp)配置eslint

系列文章

ESLint配置(一):eslint默认及自定义规则介绍,上传自己的eslint-config-*风格文件
ESLint配置(二):vscode配置eslint,实现错误代码标识以及自动修复
ESLint配置(三):构建工具(webpack、gulp)配置eslint

转载自:ESLint 配置

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
vscode中配置eslint
安装Nodejs,然后安装eslint使用全局安装:npminstallgeslintnpminstallg eslintpluginreactnpminstallgeslintpluginhtml安装完毕后,我们使用"eslintinit"命令在用户目录中生成一个配置文件(也可以在任何你喜欢的位
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k