JavaScript 程式碼格式化

一倍速的夏味發表於2019-03-04
JavaScript
JavaScript 程式碼格式化

圖片來源：pixiv 54808053
每個人都可能有自己的程式碼風格和格式，但如果一個專案中的所有人都遵循同一風格的話，這個專案就能更順利地進行。每個人未必能同意每一處格式規則，而且其中的不少規則需要一定時間的適應，但整個專案服從統一的程式設計風格是很重要的，只有這樣才能讓所有人輕鬆地閱讀和理解程式碼。

更新於 2018.07.27
首發於夏味的部落格: xiaweiss.com

本篇由於圖片較多，如需要看帶圖版本的文章，請 點選這裡閱讀原文

介紹

關於程式碼格式化，有3個相關的概念，比較容易混淆

  1. 程式碼格式：人工自定義的、或者遵循某種通用規範
    例如 JavaScript Standard Style，Airbnb JavaScript Style，Google JavaScript Style 等）
  2. 程式碼檢查：依據一種 指定的程式碼格式，用提示出不符合格式的程式碼（ESLint、TSLint、stylelint 等）
  3. 程式碼格式化（code format）：依據一種 指定的程式碼格式，修正 不符合格式的程式碼（ESLint、Prettier 等）

格式化工具支援 CLI 模式，可以在 package.json 中配置命令
（CLI 模式其他引數請參考各官方文件）

"scripts": {
  "standard": "standard --fix",
  "prettier": "prettier --write `*.js`",
  "eslint": "eslint --fix `*.js`"
},
複製程式碼

設定 JavaScript 程式碼格式，從簡單到嚴格依次有下面的方式，選一種即可

  1. 使用 EditorConfig，新增配置檔案.editorconfig即可， 可以設定部分的基本格式，然後使用編輯器預設的格式化
  2. 使用 Prettier，不做程式碼檢測，直接格式化。也可以新增配置檔案 .prettierrc 自定義格式
  3. 使用標準的 JavaScript Standard Style，直接安裝即可 npm install standard --save-dev, 不需要任何配置檔案。 然後使用 standard 外掛格式化（ 可以不安裝 ESlint 程式碼檢查 ）
  4. 使用 ESLint, 執行命令列 npx eslint --init 初始化即可，然後可以自己選擇配置規則，之後會自動生成配置檔案，並安裝相關依賴。並且可以自定義規則。然後使用外掛格式化（ ESLint 外掛，或者 Pretter + ESLint 同時使用）

.editorconfig 檔案示例：

root = true

[*]                             # [] 內是正規表示式，匹配檔案
charset = utf-8                 # 文字格式
end_of_line = lf                # 配置結尾符號
insert_final_newline = true     # 檔案末尾空行
indent_style = space            # 縮排使用空格
indent_size = 2                 # 縮排長度
trim_trailing_whitespace = true # 去掉行尾多餘的空格
複製程式碼

關於 CSS 的程式碼檢查，可以使用工具 stylelint
安裝npm install stylelint --save-dev
安裝程式碼格式 npm install stylelint-config-standard --save-dev
Vue 檔案還需要安裝前處理器 npm install @mapbox/stylelint-processor-arbitrary-tags --save-dev

新增配置檔案 .stylelintrc

{
  "defaultSeverity": "warning",
  "processors": ["@mapbox/stylelint-processor-arbitrary-tags"],
  "extends": "stylelint-config-standard",
  "rules": {}
}
複製程式碼

其中 rules 裡可以寫自定義的規則，自定義的規則優先順序最高
想要自己生成自定義規則的話，可以訪問網站 https://maximgatilin.github.io/stylelint-config/

stylelint 的編輯器外掛，可以使用 stylefmt, 也可以使用 Prettier 格式化

下面是各種編輯器外掛的配置

Webstorm 配置

啟用 EditorConfig

安裝外掛 EditorConfig，在設定 Editor -> Code Style 中
勾選 Enable EditorConfig support
建立 .editorconfig 檔案，重啟編輯器即可

編輯器預設格式化

選單欄 Code -> Reformat Code
快捷鍵 Alt + Cmd + L

Prettier 外掛格式化

1.安裝外掛 Prettier
Webstorm 內建了 Prettier 外掛不需要安裝，Phpstorm 等在設定中心裡 Plugins外掛選項裡安裝即可

2.全域性安裝或專案安裝 prettier 的 npm 依賴包

npm install prettier --save-dev
複製程式碼

3.使用 Prettier 格式化檔案
Alt + Shift + Cmd + P

設定儲存時自動格式化：
手工配置設定裡的 Tools -> File Watchers 即可
可以按照官方教程 https://prettier.io/docs/en/webstorm.html

開啟設定，搜尋 Prettier，然後複製 Prettier package 裡的路徑

清空搜尋欄，開啟設定裡 Tools -> File Watchers
點選右側左下角的 ➕ 加號，選擇 <custom> 新建自定義模板

然後可以看到（注意點選三角箭頭，展開全部的選項）

按上圖來配置，並且填入下面內容，注意取消勾選 Auto-save 選項
最後點右下角 ok 結束配置
（使用 Vue 時請再建立一個，檔案型別請選擇 Vue Template）

$ProjectFileDir$/node_modules/.bin/prettier
--write $FilePathRelativeToProjectRoot$
$FilePathRelativeToProjectRoot$
$ProjectFileDir$
複製程式碼

Windows 系統必須包含 cmd 字尾，Programs 請填寫

$ProjectFileDir$/node_modules/.bin/prettier.cmd
複製程式碼

重啟編輯器，之後只要 Ctrl + S 儲存時，就可以自動格式化程式碼

ESLint 格式化

1.全域性或專案內安裝 eslint 的 npm 依賴包

npm install eslint --save-dev
複製程式碼

2.開啟編輯器配置，如下圖，找到 ESLint 配置項，路徑系統會自動檢測到，只要勾選 Enable 即可
（如果沒有路徑，需要重啟編輯器，或手動指定 eslint 的 npm 包路徑）

3.重啟編輯器
4.設定快捷鍵

建議設為 Ctrl + Alt + F

設定儲存時自動格式化：
和 Prettier 配置相同，同樣新建一個 File Watcher 即可
引數請填寫為

$ProjectFileDir$/node_modules/.bin/eslint
--fix $FilePathRelativeToProjectRoot$
$FilePathRelativeToProjectRoot$
$ProjectFileDir$
複製程式碼

Windows 系統必須包含 cmd 字尾，Programs 請填寫

$ProjectFileDir$/node_modules/.bin/prettier.cmd
複製程式碼

重啟編輯器，之後只要 Ctrl + S 儲存時，就可以自動格式化程式碼

（使用 Vue 時請再建立一個，檔案型別請選擇 Vue Template）

standard 標準格式化

安裝 npm 依賴，注意必須安裝到開發依賴裡

npm install standard --save-dev
複製程式碼

設定 JS 程式碼風格為 standard（Webstorm 預設為 Google 風格），出處點這裡
設定的位置見下圖，為 Editor -> Code Style -> JavaScript -> Warping and Braces -> Set from…
-> Predefined Style -> JavaScript Standard Style

然後使用編輯器預設的格式化功能即可, Alt + Cmd + L

開啟程式碼檢查(可選，不設定時不會提示格式錯誤)：
開啟上圖配置 ESlint 的介面, 勾選 Enable，並且將 ESLint package 選為 standard 的 npm 路徑即可

Prettier + ESLint 同時使用

按前文配置 Prettier 和 ESLint，並且都設定儲存時自動格式化即可
WebStorm 會自動先執行 Pretter，再執行 ESLint 格式化程式碼

VSCode 配置

啟用 EditorConfig

安裝外掛 EditorConfig for VS Code, 重啟編輯器
建立 .editorconfig 檔案

編輯器預設格式化

快捷鍵 Shift + Alt + F
或者 Cmd + Shift + P 調出命令皮膚，輸入 format，選擇 Format Document

Prettier 外掛格式化

安裝外掛 Prettier – Code formatter
依舊使用 Shift + Alt + F

設定自動格式化開關：
安裝外掛 Formatting Toggle，右下角會出現按鈕 Formatting，點選可以一鍵開關 format 功能
點選時它會自動修改使用者設定檔案，配置 "editor.formatOnPaste": true, "editor.formatOnSave": true,

如果沒有設定開關，儲存時自動格式化需要設定:
編輯器中設定中新增配置 "editor.formatOnSave": true, 即可

ESlint 格式化

安裝外掛 ESLint
雙擊紅色波浪線，會出現黃色小燈泡，點選燈泡，再點選 Fix，就可以完成格式化

或者 輸入 Cmd + Shift+P(win: Ctrl+Shift+P) 調出命令皮膚，輸入指令 fix

也可以新增自定義配置, 設定儲存時自動格式化：

"eslint.autoFixOnSave": true,
複製程式碼

standard 標準格式化

安裝 npm 依賴，建議安裝到開發依賴裡

npm install standard --save-dev
複製程式碼

安裝外掛JavaScript Standard Style

輸入 Cmd + Shift+P(win: Ctrl+Shift+P) 調出命令皮膚，輸入指令 fix
選擇 fix all auto-fixable problems 即可

建議新增自定義配置：

"standard.usePackageJson": true, // 基於專案的 package.json 設定中來配置
"standard.autoFixOnSave": true, // 儲存時自動格式化
複製程式碼

Prettier + standard 同時使用

同時配置 Prettier 和 standard，並且設定

"editor.formatOnSave": true,
"standard.autoFixOnSave": true,
複製程式碼

儲存檔案時，會先執行 Prettier 格式化，再執行 standard 格式化

Prettier + ESLint 同時使用

按前文同時配置 Prettier 和 standard，並且設定

"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
複製程式碼

或者只配置 Prettier，設定為

"editor.formatOnSave": true,
"prettier.eslintIntegration": false, // 使用 Prettier-eslint 功能
複製程式碼

此時不需要配置 "eslint.autoFixOnSave": true,

如果不需要格式檢查提示，不用安裝 ESLint 外掛

Atom 配置

編輯器預設未整合格式化外掛

啟用 EditorConfig

安裝外掛 editorconfig, 重啟編輯器
建立 .editorconfig 檔案

Prettier 外掛格式化

安裝外掛 prettier-atom, 重啟編輯器
使用 Crtl + Alt + F 格式化

設定自動格式化開關：
在外掛設定裡 Format on Save 選項下，勾選 Show in Status Bar
編輯器底部就會出現儲存時自動格式化的開關

ESLint 格式化

安裝外掛 liner-eslint, 重啟編輯器
點選有問題的部分，再點選 fix 即可格式化

設定儲存時自動格式化：
在 linter-eslint 外掛配置中，勾選

standard 標準格式化

安裝 npm 依賴，建議安裝到開發依賴裡

npm install standard --save-dev
複製程式碼

格式化
安裝外掛 standard-formatter
使用快捷鍵 Ctrl + Alt + F 格式化程式碼

開啟程式碼檢查(可選，不安裝時不會提示格式錯誤)：
安裝外掛 linter-js-standard

Prettier + ESLint 同時使用

按前文同時配置 Prettier + ESLint, 並且都開啟儲存時自動格式化即可

或者只配置 Prettier，然後在 Prettier 設定裡勾選

這時不需要安裝 ESLint 格式化外掛 standard-formatter
如果不需要格式檢查提示，也不用安裝格式檢查外掛 linter-js-standard

Stylelint 編輯器配置

安裝 npm 依賴，建議安裝到開發依賴裡

npm install stylelint --save-dev
複製程式碼

設定配置檔案 .stylelintrc 見上文

安裝外掛（與上述配置類似，參考外掛的介紹文件，不一一贅述了）

Atom：外掛 stylefmt 或 vue-stylefmt 或 pretter-atom(設定中勾選Stylelint Integration)
VScode： 外掛stylefmt
WebStorm： 設定 -> Language and FrameWorks -> Stylesheets -> stylelint -> 勾選 enable 並設定stylelint npm 包路徑

相關文章