ESLint介绍,常见的ESLint代码规范,创建Vue项目的过程中如何配置ESLint规范,下载ESLint插件自动排除格式报错

1.什么是ESLint?

ESLint是js的静态代码分析工具,用来识别代码中的潜在问题,让用户强制执行统一的代码规范,它会自动检测代码,对于不符合格式要求的代码会报错

2.常见的ESLint代码规范

-什么是代码规范?即一套写代码的约定规则,如

"="和"+"的两侧是否需要加空格,
代码句末是否要加";"

JS Standard Style,包括不限于

• 字符串使用单引号 'abc'
• 无分号 句末不要加分号
• 关键字后面加空格 if (name = 'zs'){}
• 函数后面加空格 function func1 (){}
• 使用全等号===而不是仅仅==

即:在ESLint规则下,句末有分号,存在一些空行,都会报错,我们可以在其报错页面中,查看第几行存在具体的格式错误,或者根据报错,对照官网的ESLint规则表来修正格式

3.创建vue项目时配置ESLint规范

• 安装脚手架项目

安装脚手架==>创建项目==>选择自定义
可勾选的包括:(空格选中)
Babel/Router/CSS(sass和less等等)/Linter(linter就是ESLinter)

• 重点:应该选那一套ESLinter应用规范?

ESLint with error prevention only
ESLint Airbnb config
ESlint Standard config:无分号规范(应用最广泛)
ESlint Prettier

• ESLint配置文件放在哪里?

where do you prefer placing config for Babel,ESLint,etc?
In dedicated config files:将配置文件放在单独的文件中,更好管理
In package.json

4.排除ESLint报错

• 手动排除:(见上条),根据报错提示手动修正

*注意:ESLint和Prettier有规则冲突的情况,不要太依赖自动格式化

• 自动排除:下载ESLint插件

下载后配置以下代码在vscode当中:

//当保存时.,eslint自动修复错误:
"editor.codeActionsOnSave"{
    "source.fixAll":true
}
//保存代码,不自动格式化
"editor.formatOnSave:false

代码添加位置:VSCode设置>打开设置json(右上角笔记图标),粘贴在原有的配置代码后面