Web 项目编码规范化工具

[lvisei]

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 配置

1. 安装 prettier 包。
2. 项目根目录下添加配置.prettierrc文件。

ESLint 配置

1. 安装 eslint 包。
2. 安装项目特定语法校验规则 eslint 扩展插件，如Vue项目eslint-plugin-vue,React项目eslint-plugin-react、eslint-plugin-react-hooks 等。
3. 安装 eslint-plugin-prettier 在 ESLint 中集成 prettier 格式化能力。安装 eslint-config-prettier 解决 prettier 与其他规则等冲突问题。
4. 项目根目录下添加配置.eslintrc文件。
5. 将上述等插件及扩展规则添加到配置文件，才会生效。在配置文件到rules项可对单条规则一一进行改写。

项目完整配置参考

• React 项目集成
• Vue 项目集成

编辑器集成

安装插件

以 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",
  },

参考链接

• Prettier your project
• 一步一步，统一项目中的编码规范（vue, vscode, vetur, prettier, eslint）