1. 前提说明
eslint是什么: ESLint是在JavaScript代码中 识别 和 报告 模式匹配的工具。
为什么需要eslint:保证代码的一致性,避免错误。
2. 叙述大纲
- 所需依赖
- 定义模式规则(.eslintrc配置文件)
- 报告不符合模式的语法(vscode和eslint的结合)
- 纠正不符合模式的语法
3. 所需依赖
"eslint": "^6.7.2",
"babel-eslint": "^10.1.0",
"eslint-plugin-vue": "^6.2.2",
复制代码
- 首先需要安装eslint模式识别工具,然后在项目根目录下创建eslint的配置文件.eslintrc.json。eslint会自动去读取.eslintrc的配置文件。
- babel-eslint 解析器(为什么使用babel-eslint ? 你这个异教徒去死吧。)
- eslint-plugin-vue eslint默认只能识别js文件,要识别vue文件,这个插件是必不可少的。
4. 配置文件
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended" // 启用推荐的规则,推荐的规则都带有一个标记。
],
"parserOptions": {
"parser": "babel-eslint" // 以babel-eslint作为解析器
},
"rules": {
"no-debugger": ["error"], // [(0 : off) ; (1 : warn) ; (2 : error)]
"semi": ["warn"]
}
}
复制代码
需要关注的是extends选项。这里我们启用了推荐的规则。推荐的规则前面会有一个勾勾。通过 plugin:vue/essential 也启用了vue的规则。至此,当代码存在debugger,编译阶段就会报错。因为rules中定义了debugger的级别是error。
5.报告不符合规则的语法
要想将不符合规则的语法标红,需要安装eslint插件。
6.修复不符合规则的语法
首先定义规则 "semi": ["error"]
每一行结尾必需要有分号。在没有分号的情况下...
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
},
复制代码
现在当我们自动保存的时候,缺失的分号就会自动补全。
7. 注意事项
在推荐的规则中只有携带🔧图标的rule才能够自动修复。例如,即便启动了no-debugger,代码中出现的debuger也不会自动删除。
免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。
暂无评论