2022年1月11号会完成视频录制,敬请期待!
0.工具介绍
- eslint 是两个东西:
- eslint包,用来在编译时做语法检查
- eslint扩展工具,是vscode的扩展,打开代码时直接检查语法规范并报错
- 两个工具都可以 用来修复代码规范错误
- prettier 是格式化工具,在 vue脚手架项目中,作为 vuter 扩展工具的插件,结合 eslint 扩展工具 来 检查语法 和 格式化修复代码
1.eslint
- 官网:
https://eslint.bootcss.com/
- 作用:对 js 语法规范 做 检查 和 修复
- 检查时机:
- 单独通过 eslint 命令 来检查
- 通过 脚手架 调用 eslint 来检查
1.1 检查工具
- eslint 包 (通过 npm/yarn 或者 Vue/cli 下载安装的)
- vscode eslint扩展插件 (通过vscode 搜索下载的扩展插件)
1.2 通过 eslint 包做检查
1.2.1 通过 eslint包检查
-
运行 eslint包程序,并传入 要检查的文件路径
-
命令1:
./node_modules/.bin/eslint yourfile.js
-
命令2:
npx eslint yourfile.js
npx 会去 ./node_modules/.bin 里去找到并运行 eslint 脚本文件
-
-
通过 eslint包 做代码修复
- 命令1:
./node_modules/.bin/eslint yourfile.js --fix
- 命令2:
npx eslint yourfile.js --fix
- 命令1:
-
图解:
1.2.2 通过 vue/cli调用eslint检查
- 通过 vue脚手架 检查 并 修复问题
- 命令1:
yarn lint
- 命令2:
npm run lint
- 命令1:
1.2.3 同时修复.js和.vue
- eslint 本身只能处理 .js 文件,对于 .vue 文件处理不了
- 解决方案:
- 通过 脚手架命令
yarn lint
同时 检查和修复 两种文件(.js/.vue)
- 通过 脚手架命令
2. vscode 插件实时检查
2.1 问题
真实开发时,我们每次打包编译代码前,先调用检查的命令太麻烦了 所以,运行
yarn serve
启动项目 或yarn build
编译项目时 vue脚手架会自动通过eslint对代码做语法检查
-
命令:
yarn serve
- 输出:报错
- 注意:由于没有修复错误,项目无法继续编译并运行
想要项目正常运行,还得去修复错误!麻烦!想要保存代码时 就立即检查语法规范错误,并修复!
- 安装
eslint
扩展工具,每次 vscode 打开时,会自动启动一个eslint扩展工具服务器
对文件代码 做语法规范检查,并提示错误消息
- 问题:默认情况下,
eslint 扩展工具
只在页面提示错误!不会直接修复错误! - 如果想用它 保存时 修复错误,需要配置 ↓
3.格式化时修复错误
- 显示和修复错误,需要两个 扩展插件+配置文件配合使用
3.1 eslint扩展 修复代码
-
eslint 扩展工具 默认 只检查 规范问题,但 不修复
-
为它配置开启修复功能:
- 去 vscode 配置文件中设置
- 代码:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
复制代码
-
配置好后,再保存代码文件时,就会自动修复了!
-
问题: 只能修复 .js 文件,.vue 文件处理不了!
-
如果要处理 .vue 文件,就需要 使用 格式化插件了 ↓
3.2 vuter.prettier 修复代码
vscode 的 Prettier 扩展工具专门用来格式化代码,所它也可以根据规范来格式化修复代码
-
注意:此时,我们不需要单独安装它,因为 vetur 内置了 prettier
如果已经单独安装了 Prettier,请禁用 或 卸载它,否则 会 影响 eslint 和 vetur 扩展的功能!
3.2.1 Vetur介绍
-
功能:
- 对 .vue 文件 做 语法着色
- 对 .vue 代码做格式化( 通过 第三方的 格式化器 来做代码格式化 )
-
什么时候做格式化呢?
- 默认 是需要 右键菜单
格式化文档
来操作
- 默认 是需要 右键菜单
- 设置 vscode 保存时 来格式化
3.2.2 格式化时修复错误
- 介绍:Vetur 内部模式使用 prettier 来格式化 .vue 文件 代码
- 注意:
- 语法规范检查 用的是 eslint 语法规范包(airbnb/standard/google/...)
- 对.vue 格式化的 用的是 prettier 工具自己的语法规范
- 这样容易产生冲突( prettiter 格式化后的 代码 不符合 eslint 的语法规范包,导致eslint报错)
- 解决方案:
- 将 prettier 的语法规范 配置成 eslint 一致的规范!
3.2.3 prettier 规范配置
-
创建 配置文件
.prettierrc.js
-
配置 prettier规则:
// 配置文件 -> .prettierrc.js module.exports = { // ------------------------最重要---------------------------- // 最大长度80个字符 printWidth: 80, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) singleQuote: true, // 行末分号, 默认true semi: false, // 尽可能使用尾随逗号(包括函数参数),默认none,可选 none|es5|all // es5 包括es5中的数组、对象 // all 包括函数对象等所有可选 trailingComma: 'none', // ------------------------------------------------------------ // 对象字面量的大括号间使用空格(默认true) { a:1 } bracketSpacing: true, // 箭头函数参数括号 默认avoid 可选 avoid| always // avoid 能省略括号的时候就省略 如x => x // always 总是有括号 如(x) => x arrowParens: 'always', // tab缩进大小,默认为2 tabWidth: 2, // 使用tab缩进还是空格,默认false useTabs: false, // ------------------------------------------------------------ // vue缩进脚本和样式 vueIndentScriptAndStyle: false, // 在文件顶部插入一个特殊的 @format 标记,指定文件格式需要被格式化。 insertPragma: false, // 行尾换行格式 endOfLine: 'auto', // html空格敏感度 htmlWhitespaceSensitivity: 'ignore', // jsx 中的 > 标签放在最后一行的末尾,而不是单独放在下一行 默认false // jsxBracketSameLine: true, // JSX双引号 // jsxSingleQuote: false, }; 复制代码
大功告成,现在,项目 在打开代码文件后,会自动显示 规范错误 在保存代码时,可以自动格式化 并 修复代码错误啦~!