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 包路徑