Web 項目編碼規範化工具

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 集成 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）