eslint 搭配 vscode 的简单使用

前言

刚开始时，由于嫌麻烦，并没有安装eslint，最近在新的项目上使用了eslint再配合vscode的插件，真是爽的不要太爽。因此打算写一篇简单的食用说明来记录食用过程

前期准备

没啥好准备的，作为开发肯定是具备yarn和node的，编辑器使用的是微软的亲儿子vscode

然后新建一个文件夹eslint-example，cd进入这个文件夹并初始化一个package.json

初始化package.json命令

$ yarn init -y

文件结构

- eslint-example
	- package.json

配置

首先安装eslint，并初始化一个配置文件

$ yarn add eslint --dev
$ ./node_modules/.bin/eslint --init

初始化完成后会在项目的根目录下生成一个配置文件.eslintrc.js（你的可能和我的不一样，但前缀都是一样的）

关于配置文件的一些说明，配置文件可以使用.js，.json，.yaml/.yml后缀或者没有后缀的.eslintrc文件,也可以直接在package.json中添加一个eslintConfig属性进行配置。eslint会读取这个文件，优先级为从左到右依次查找文件格式，没有后缀的配置文件声明已废弃，不建议使用

module.exports = {
	...
    //在这里添加自定义规则去覆盖默认规则
    "rules": {
        //要求或禁止使用分号代替 ASI
        "semi": ["error", "always"],
        //强制使用一致的缩进
        "indent": ["error", 2],
        //强制使用一致的反勾号、双引号或单引号
        "quotes": ["error", "double"],
        //禁用console
        "no-console": "warn" // 可以直接写错误类型
    }
    ...
}

eslint有三种错误规则，可以直接写规则类型也可以直接写数字，错误规则:

• error对应数字2
• warn对应数字1
• off对应数字0

在package.json中添加scripts

...
"script": {
    "lint": "eslint --ext .js src"
}
...

运行命令验证

配合vscode插件食用更舒适

在vscode的插件栏搜索eslint，安装ESLint插件

然后在settings.json中添加如下配置，对于更详细的配置请查看插件文档^[2]

...
//为eslint开启自动修复，保存时将触发，但并不能自动修复所有的问题，但已经很爽了
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

参考

[1] https://eslint.org/docs/user-guide/

[2] https://github.com/Microsoft/vscode-eslint#readme