Web 项目编码规范化工具
工具
ESLint
The pluggable linting utility for JavaScript and JSX
代码校验工具（linting utility），让代码更一致和避免 bug。
Prettier
Prettier is an opinionated code formatter.
支持 JavaScript · TypeScript · Flow · JSX · JSON · CSS · SCSS · Less · HTML · Vue · Angular ·GraphQL · Markdown · YAML 等文件的格式化。
代码格式化工具（code formatter），少数服从多数，任性的风格统一，来确保所有输出的代码符合一致。
集成
编辑器与终端集成，以便开发时代码不规范及语法错误时，编辑器与终端都将信息暴露给用户，以方便查看与及时解决问题。
项目集成
代码格式化过程
- 终端下发出格式化命令 ☟
- ESLint 收到命令 ☟
- ESLint 读取项目目录下的 ESLint 配置文件 ☟
- 如果配置文件里面有 Prettier ☟ 插件则读取项目目录下的Prettier配置文件，反之则跳过该步骤 ☟
- ESLint 发出格式化命令 ↺
Prettier 配置
- 安装
prettier包。 - 项目根目录下添加配置
.prettierrc文件。
ESLint 配置
- 安装
eslint包。 - 安装项目特定语法校验规则eslint扩展插件，如Vue项目
eslint-plugin-vue,React项目eslint-plugin-react、eslint-plugin-react-hooks 等。 - 安装
eslint-plugin-prettier集成 prettier 语法规则，安装eslint-config-prettier解决 prettier 与其他规则等冲突问题。 - 项目根目录下添加配置
.eslintrc文件。 - 将上述等插件及扩展规则添加到配置文件，才会生效。在配置文件到rules项可对单条规则一一进行改写。
项目完整配置参考
编辑器集成
安装插件
以 VSCode 为例，其他编辑器类似。
- ESLint插件 - VS Code ESLint extension
- Prettie 插件 - Prettier Code Formatter
如果项目是 Vue 工程，再安装一个插件 Vetur : 为 Vue 框架提供语法高亮、代码片段、Emmet、格式化、代码风格检查、智能提示、调试帮助等。vetur 文档。
配置
可参考这篇文章或网上有很多配置教程可查阅，此处不在重复诉述。保证插件格式化与脚本格式化命令结果一致即可。
代码格式化
格式化单文件
当某个文件当代码不规范时，可用编辑器安装当插件进行格式化代码。
配置使用 Prettie 插件格式化文件，保证插件格式化与以下脚本格式化命令结果一致。
格式项目下文件
当想校验工程目录下当所有代码时，可填配脚本格式化命令，例如提交代码之前添加Hooks校验代码。
填配脚本格式化命令，使用 ESLint 校验代码并格式化不规范代码。以下以 React 项目需校验文件为例：
"scripts": {
"lint": "eslint --ext tsx,ts,js,jsx src",
"lint-fix": "eslint --fix --ext tsx,ts,js,jsx src",
},
