什么是ESLint
-
eslint的目标是提供一个插件化的 JavaScript代码规范检测工具。
- 开发人员编写javascript代码的时候保持一种统一风格。
- 好处:提升项目开发速度、增强代码可维护性。
见到这样子的错误, 证明你的代码不严谨
代码自动规范 - VsCode插件
- 给vscode安装eslint插件以便代码自动规范,插件名字为"ESLint"。
- 在vscode中有一个名称为eslint的插件,可以帮助给js或vue文件做自动代码规范设置,非常好用,省却了手工调整代码规范的繁琐工作,提高项目开发速度。
步骤:
-
给vscode编辑器安装插件:ESLint
-
全局方式安装eslint依赖包
npm install -g eslint
该依赖包安装完毕是对1步骤扩展做支撑的
- 打开vscode配置文件 settings.json
在最末尾添加如下内容
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js",".vue"]
},
"eslint.validate": [
{ "language": "html", "autoFix": true },
{ "language": "javascript", "autoFix": true },
{ "language": "vue", "autoFix": true }
]
- 重启vscode
现在:Ctrl+s: 保存编辑的文件后,会对vue文件或js文件 做js自动代码规范操作,并且是遵守eslint规范的,有时vue文件内容html/css代码部分不规范,可以通过Shift+Alt+f键格式化,之后再Ctrl+s一下
ESLint具体应用
- 开启eslint规范检测,具体在vue.config.js中配置
lintOnSave: true, // 文件保存时(Ctrl+s)就做eslint规范检测
//lintOnSave: false //关闭eslint检查
注意:
更改配置文件后,要重启服务 npm run server
- ESLint的具体的规范
- 声明变量但是未使用会报错
- 简单语句结尾不能有分号
- 给变量赋值 等号 左右要求有空格
- 在行结尾处,多余的空格不允许
- 字符串必须使用单引号圈选,不能是双引号
- 对象成员名称冒号与值之间需要有一个空格
- 方法名称小括号 的左右需要保留一个空格
- 在每一个文件的结尾处,必须有一个空行
- 文件中如果出现空白行,要求只能有一行空白,不能连续出现两行或以上的空白行
注意:
eslint只是针对 js文件 和 vue文件的js部分 做规范检查, 而且eslint只是检查代码规范,不是语法错误,不规范的代码是可以正常运行的
自定义规则配置
- 根据需求给eslint配置规范,修改配置文件.eslintrc.js,给其中的rules段做配置即可
// 匹配规则:[开启规则参数,要求/禁用参数]
'semi':['error','always'], // 简单语句后边要求设置分号,不设置会报错
'semi':['error','never'], // 简单语句后边不要设置分号,设置会报错
'semi':['off','always'], // 关闭规则检测
'semi':['off','never'], // 关闭规则检测
'space-before-function-paren': ['error', 'never'], // 禁止在function小括号左边设置空格,否则报错
'space-before-function-paren': ['error', 'always'], // 要求在function小括号左边设置空格,否则报错
'space-before-function-paren': ['off', 'always'], // 关闭规则
'space-before-function-paren': ['off', 'never'], // 关闭规则
'no-multiple-empty-lines': ['error', { 'max': 3 }], // 文件中间允许出现3个或以内的空白行
'no-multiple-empty-lines': ['off', { 'max': 3 }], // 关闭规则
开启规则参数:
error:将规则视为一个错误 off:关闭规则
要求/禁用参数:
always:要求规则 never:禁止规则
注意:
更改了配置文件要重启服务