从官网抄些有用的话,介绍什么的建议右转百度,熟悉npm者直接拉到中间
安装
通过npm安装npm install -g eslint
,详细右转百度
入门常见bug:
1.没用过nodejs,不知道npm中全局安装和本地安装有什么区别,导致一系列xxx找不到问题的,右转百度解决,与eslint关系不大
2.eslint以命令行运行。各种编辑器的eslint插件本质只是调用命令行执行eslint命令而已,eslint本体还是要在npm中安装的
3.命令行--fix或者插件自动修复无效?eslint基本只对各种空格、引号、分号有自动修复,其他的基本靠手动;或者没有搞好--ext参数没有检查某些文件等等
了解一下就算的使用
1.配置文件
.eslintrc.js
、.eslintrc.json
、.eslintrc.yml
之类的,后缀名并不重要eslint都认,按照对应格式写就行。一个没有的话自己想办法搞个出来或右转百度,下面以.eslintrc.js
格式为例
2.三个相对有用的参数
(1)parser
,语法分析器
ESLint 默认使用Espree作为其解析器,你可以在配置文件中指定一个不同的解析器,只要该解析器符合下列要求:
- 它必须是本地安装的一个 npm 模块。
- 它必须有兼容 Esprima 的接口(它必须输出一个
parse()
方法)- 它必须产出兼容 Esprima 的 AST 和 token 对象。
会用就行。目的在于前端框架如vue文件这些,肯定不能用默认parser的,默认parser只认识原生js相关文件。这个时候直接用第三方如parser: 'babel-eslint'
。
(2)env
env: {
browser: false,
node: true,
es6: true
}
告诉eslint你在什么环境下js开发。实际上主要是判断一些常规预定义的全局变量是否合法,如浏览器中window
、location
这些,然而由于node一般可兼容浏览器环境的js写法,所以即使上面设置了browser: false,使用这些全局变量时仍不会被eslint报错。
(3)extends
指定当前规则配置从哪里继承。
有两个来源:
规则包:eslint-config-xxx,基于已有规则,提供特定的代码风格检查
插件包:eslint-plugin-xxx,可提供新的规则
命名使用规律:
extends 属性值可以省略包名的前缀 eslint-config-。
extends 属性值可以由以下组成(指插件包):
plugin:
包名 (可省略前缀eslint-plugin-)
/
配置名称 (比如recommended
)
"extends": [
"eslint:recommended",
"standard",
"plugin:vue/recommended"
],
数组形式,规则从左往右依次被覆盖。
eslint:recommended
属于官方提供的最基本规则,命名不受上面约束,相对特殊。
standard
即eslint-config-standard,注意npm install后才可用。
plugin:vue/recommended
即eslint-plugin-vue下的recommended配置,同样的还有base、essential、strongly-recommended等配置,可直接查看源码或官网介绍。
注:一般而言直接去npm仓库查找后,直接npm install按照上述逻辑即可使用,但是不排除例外。如eslint-plugin-vue,官方文档指明需要额外的配置,即parser需要更改为vue-eslint-parser
,若此时还想使用babel-eslint
作自定义parser,则需要把它放到parserOptions.parser(非官方指定的属性,属于第三方自己的实现手段)。
关键使用
核心就是rules: {...}
,选择启用哪些规则。规则的中文文档:Rules
例子:
"rules": {
"quotes": "error"
}
关于规则的值:
"off"
or 0
- 关闭规则
"warn"
or 1
- 将规则视为一个警告(不会影响退出码)
"error"
or 2
- 将规则视为一个错误 (退出码为1)
数组形式:
"quotes": ["error", "double"]
,第一个值是错误级别,后面的值是选项。注意选项有可能是一个对象选项而不一定是字符串,且具体可选项视乎规则而定,看文档查询即可
规则覆盖:
我们手动在rules定义的优先级最高,覆盖其他插件扩展的设置。
配置定义在插件中的一个规则的时候,你必须使用插件名/规则ID
的形式。如:
{
"plugins": [
"plugin1"
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error"
}
}
文件中例外地设置
可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告:
/* eslint-disable */
这里开始的代码不被eslint检查
/* eslint-enable */
这里开始的代码被eslint检查
你也可以对指定的规则启用或禁用警告:
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */
插进中的自定义规则同理,插件名/规则ID
放入注释中即可。
基本结束,下面是我的vscode和vue环节
vscode集成
其实就是装个ESLint扩展。
看图,vscode打开"问题",所有eslint报错都在这。鼠标移过去,能自动修复的图标会变成灯泡(上面那个错误也可修复,只是鼠标没有移过去),右键选择解决方案,自行看英文不翻译了。
Strings must use singlequote. eslint(quotes) [10,15]
分析:
1.Strings must use singlequote.
是提示信息,看不懂就继续
2.eslint(quotes)
,说明这是eslint报的问题,括号内是eslint的提示信息,意思为quotes
这条规则不符合。然后你可以文档/百度查询这条规则要求的格式、默认值是什么,或者rules中直接关掉
-
[10,15]
这行错误的代码在10行15列
vue中使用eslint
使用第三方模板或者@vue-cli的常见问题:项目下有(新建)一个.eslintrc.js
配置文件,然后百度再粘贴,导致覆盖默认设置产生各种报错,诸如:<template>的'<'报unexpected token、'const'报错、'import'动态引入的函数报错等等。
使用cli新建的项目一般默认配置好parser、extends这些参数,只去覆盖rules就行。如果你看懂了上面那个eslint-plugin-vue的使用说明,那么可以完全自己写一遍,最简单的常用结构应该是:
module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: 'babel-eslint'
},
extends: ['plugin:vue/essential'],
rules: {}
}
注:eslint-plugin-vue与eslint-plugin-html存在冲突,具体请看文档。babel-eslint直接作parser也可以,但是效果一般,且不太支持eslint-plugin-vue