1. 前端工程化，开发体验¶

1.1 ESLint¶

1.1.1 安装 ESLint¶

npm install eslint --save-dev

1.1.2 初始化 ESLint¶

npx eslint --init

1.1.3 Eslint 9 的重要变更¶

1.1.3.1 默认使用 Flag Config¶

• 官方 Release Note 中的记录 ⧉
• 新版 Flat Config 的官方文档 ⧉
• 旧版 Config 的官方文档 ⧉
• Flag Config 的背景 ⧉
• 迁移说明 ⧉

目前 (v9.x.x) 仍然可以通过设置环境变量 ESLINT_USE_FLAT_CONFIG=false 使用旧版 eslintrc 格式的配置文件，但预计在 v10.0.0 完全移除对 eslintrc 方式的支持

1.1.3.2 什么是 Flag Config¶

Flag Config 默认配置文件按照如下顺序查找

eslint.config.js
eslint.config.mjs
eslint.config.cjs

1.1.3.3 迁移说明¶

• Flag Config 不支持 .eslintignore 文件，通过 Ignoring Files 配置 ⧉ 支持，需要将 .eslintignore 中的规则迁移过去

1.1.4 Eslint + TS 的官方支持¶

主要通过 typescript-eslint ⧉ 的一系列功能进行支持

1.1.5 Eslint + Vue 的官方支持¶

项目地址 eslint-plugin-vue ⧉

配置说明 详见这里 ⧉, 注意 是针对 eslint 9.0.0 之前的版本，还是之后的版本

1.1.5.1 备注¶

• "extends": ["plugin:vue/vue3-recommended"] 和 "extends": ["plugin:vue/base"] 至少要在 .eslintrc.json 中配置一个
• eslint-plugin-vue 和 eslint-plugin-html 不能一起工作

1.1.6 Eslint + Vite 的官方支持¶

1.2 Prettier¶

• https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code ⧉

1.2.1 安装¶

npm install --save-dev prettier

1.2.2 创建相关配置文件¶

touch .prettierrc .prettierignore 

1.2.3 基本使用¶

检查当前目录文件的格式

npx prettier . --check

npx prettiere . --write

1.2.4 配置 VS Code 保存时自动进行格式化¶

1.3 StyeLint¶

1.4 CI/CD¶

1.5 IDE 的支持¶

1.5.1 vscode 支持 vue¶

• Vue2 是通过 Vetur ⧉ 插件进行支持的，目前基本上不演进了
• Vue3 是通过 Volar ⧉ 插件支持的，现在此插件已经更名为 Vue - Official ⧉

1.5.2 vscode 支持 eslint¶

1.5.3 vscode 支持 prettier¶

1.6 其它¶

1.6.1 vscode 设置¶

• vscode的格式化的settings.json的个人配置 ⧉
• 聊聊vscode配置settings.json知其所以然（附大量配置） ⧉

1.7 参考¶

• Vite+Vue3+Ts+Eslint+Prettier+gitHooks+stylelint ⧉
• vue3+vite配置eslint&prettier ⧉
• 【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范 ⧉
• Prettier 官网 ⧉
• ESLint 官网 ⧉
• vscode setting.json 的文档 ⧉