Vue中的ESLint
技术栈工具
- IDE:VSCode
- lint :ESLint
- lang:TypeScript
TS 是啥?
- 语法:TS 是 JS 的超集,语法指的是我们书写文本的方式来编程。
- 类型:TS 是一个类型化的超集,他定义了类型的规则和如何使用他们。
- 请记住:TS 其实就是带有类型检测的JS。
ESLint是啥?
- ESLint可以识别并报告 js 代码的语法错误,避免研发 bug,多人研发时保持统一的代码风格。
TS 里如何使用 ESLint
- 你想知道为啥 TS 要使用 ESLint 么?请移步荷包蛋_(代码检查工具!从 TSLint 到 ESLint)查看,他写的挺详细的,这里主要介绍一下typescript-eslint。
- typescript-eslint:是一个 ESLint 的插件,可以用于加载自定义的规则和已经定义好的规则配置文件。
- @typescript-eslint/parser 解析器,可以将 TS 代码转换为 ESLint 认识的格式。
- 这回你应该知道,下面的一堆依赖了
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
Vue如何使用ESLint
- 跟TS原理类似,ESLint是不认识
.vue
文件的,自然也不会解析,所以这里就需要一个解析器(eslint-plugin-vue),正如官网所说,它可以在.vue
文件中用ESLint检查<template>
、<script>
标签。 - 当你配置完
eslint-plugin-vue
插件之后,你会发现.vue
中的首行报红并提示Parsing error: '>' expected.eslint
错误信息,别担心,你只需要把解析器位置更换一下即可。
//.eslintrc.json 更新后的样子
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"ecmaVersion": "latest",
"sourceType": "module"
}
此时ESLint就认识.vue
文件了。
VSCode ESLint 插件是啥?
- 官方解释:结合 ESLint 到 VSCode。
- eslint 语法问题中分为警告(黄色浪线)和错误(红色浪线),如果没有插件,你就看不到了。
- 没有视觉上的提示,自然你也就无法发现,此时如果运行和打包都没有log 产生。
- 当你在vscode 的终端内运行
eslint .
命令之后你会发现,有eslint 的 error 和warnings产生。 - 综上所述,插件达到了“结合”的效果,让 eslint 语法错误得以在 vscode 编辑器内显示。
- VSCode ESLint 插件相关配置
- 如果你安装了该插件,就可以在 vscode 中配置相关参数,这里强烈建议保存时自动格式化代码,步骤如下:
在工程内创建一个.vscode
文件夹,在该文件夹内创建一个settings.json
文件。
{ //settings.json
//这里的设置是针对 eslint 插件的 2.*版本。如果是小于 2 版本,请异步 eslint 插件的官网查看。
"eslint.format.enable": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
}
以上, 你应该知道了ESLint、ESLint 插件在 VSCode 运作的原理了。
基础工具
基础工具就不介绍了必会的东西如:
工具类介绍(不区分 vue/react)
- Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。官网
npm install lodash
- Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样。官网
npm install dayjs
- Numberal 一个用于格式化和操作数字的javascript库。官网
npm install numberal
- TanStack Query 它可以让数据抓取、缓存、更新、分页等变得更加容易。官网
npm install @tanstack/vue-query (如果是 react 请使用@tanstack/react-query)
- GSAP 一个牛叉的 JS 动画库。官网
npm install gsap