ESLint语法检查

一、什么是ESLint

ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范

常见的规范举例:

• = 的前后必须有一个空格
• 函数名后面必须有空格
• await必须用用在async修饰的函数内
• ==必须转换成3个等

二、ESLint的好处

• 写代码过程中, 检查你代码是否错误, 如果错误会被关进小黑屋哦~

• ESLint可以约束团队内代码的风格统一

三、ESLint在VSCode中使用

1.下载这个插件到vscode中

2.直接打开

一定要把脚手架工程, 作为vscode根目录, 因为eslint要使用配置文件.eslintrc.js 

3.一定要配置插件监测的时机, 修改ESLint插件配置

 需要添加的代码

"eslint.run": "onType",
"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true
}

4.测试eslint是否已经生效

• 随便文件里多敲击几个回车, vscode报错提示, 证明ESLint插件开始工作

• ctrl + s 报错下是否能自动修复部分问题, 可以, 证明ESLint插件开始工作

四、ESLint不工作排错方向

1.ctrl+s保存, 不自动格式化

1. vscode根目录下必须直接是有.eslintrc.js文件

2. ESLint插件是否安装, 配置文件写的是否正确?

3. 如果右下角有这个图表点击后选择AnyWhere, 会变成V对号, 如果没有略过此步骤

2.自动缩进

与其他的美化代码插件冲突了

禁用/卸载如下插件 (或者类似功能的插件)

2关闭vscode自动格式化功能 

vscode文件 -> 首选项 -> 设置 -> 搜索

 vscode文件 -> 首选项 -> 设置 -> 搜索

 一保存, 单引又变双引

在ESLint插件, JSON文件配置里五

"vetur.validation.template": false, // 把 vetur 扩展的 template 格式化去掉

五、自定义规则

在.eslintrc.js文件中, 可以调整规则(团队内可以自定义自己一套)