携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情
工欲善其事，必先利其器。 阅读本文大约需要 3 分钟。
本文只作简单描述，算是一个项目工具字典。具体细节 和 使用方法，可跳转到官网查看。
1. devDependencies
开发过程中 需要的依赖项。
- --save
将信息保存到 package.json 的 dependencies - --save-dev
保存到 package.json 中的同时，存到 devDependencies
1.1 eslint 与 prettier
| 工具 | 描述 | 其他 |
|---|---|---|
| prettier | 一个“有态度”的代码格式化工具 | 专业格式化 |
| eslint | 代码检测工具 | 主要是检测代码错误，也带格式化 |
1.2 插件分类细节
前端写法可谓是变化多端，所以 eslint 会将 js 文件解析为 抽象语法树（AST），进而根据用户设置的 rule 来进行代码检查。 但对于 ts、babel 等，我们就需要引入插件，来解析这些特定的语法，转成 eslint 能读懂的 AST，所以往往我们引入了其他插件时，如果需要 eslint 校验，则要引入相应的插件。
所以有了下面这个备忘录表格：
| 依赖名称 | 描述 |
|---|---|
| eslint | 代码检测工具 |
| eslint-plugin-vue | 专门针对 Vue 语法的 eslint 规则 |
| eslint-plugin-prettier | prettier 将规则融入到 eslint 中， 使得 eslint 在检测时使用 prettier 的规则 |
| eslint-config-prettier | eslint 和 prettier 都会格式化代码，冲突就产生了。 引入此配置后，prettier 禁用了 eslint 部分规则，解决冲突。 |
| @typescript-eslint/parser | eslint 解析器，将 TS 代码解析为抽象语法树（AST），转换为 eslint 能“读懂”的 ESTree |
| @typescript-eslint/eslint-plugin | 与 eslint-plugin-prettier 类似，提供 ts 独有的 rule，让 eslint 能识别，并禁用 eslint 部分规则 |
2. VSCode 插件
- Eslint
- Prettier
- Volar： Vuter “升级版”，对 Vue3 更友好
- ...
为什么 npm 已经引入了 eslint，VSCode 还要安装 eslint 插件呢？
- VSCode 的插件：在编程过程中出现异常， VSCode 类似波浪线的直观提示
- npm 引入的插件：代码编译时，输出到控制台的异常
3. package.json
其他的依赖就不多说了，最后附上项目中使用的插件
"dependencies": {
"@element-plus/icons-vue": "^2.0.6",
"axios": "^0.27.2",
"element-plus": "^2.2.10",
"pinia": "^2.0.17",
"vue": "^3.2.37",
"vue-router": "^4.1.2",
"ws": "^8.8.1"
},
"devDependencies": {
"@types/node": "^18.6.1",
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"@vitejs/plugin-vue": "^3.0.0",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.3.0",
"less": "^4.1.3",
"prettier": "^2.7.1",
"typescript": "^4.6.4",
"vite": "^3.0.0",
"vue-tsc": "^0.38.4"
}
仿微信实战项目是一个正在更新的系列，过往文章：
