校驗(yàn)和格式化誰(shuí)

• 所有文件
• 依據(jù)正則指定的文件
• 特定后綴名
• 特定目錄下的文件

誰(shuí)來(lái)格式化

插件來(lái)格式化內(nèi)容。

常見(jiàn)插件

• editorconfig
• eslint
• vetur
• prettier

格式化規(guī)則

• 首先不同的文件對(duì)應(yīng)不同的格式化內(nèi)容
• 其次不同的插件提供不同的格式化功能
• 再者插件之間的格式化功能會(huì)覆蓋沖突
• 最后格式化規(guī)則會(huì)和校驗(yàn)規(guī)則發(fā)生沖突

參考規(guī)則配置（editorconfig）：

root = true                         # 根目錄的配置文件，編輯器會(huì)由當(dāng)前目錄向上查找，如果找到 `roor = true` 的文件，則不再查找

[*]                                 # 匹配所有的文件
indent_style = space                # 空格縮進(jìn)
indent_size = 4                     # 縮進(jìn)空格為4個(gè)
end_of_line = lf                    # 文件換行符是 linux 的 `\n`
charset = utf-8                     # 文件編碼是 utf-8
trim_trailing_whitespace = true     # 不保留行末的空格
insert_final_newline = true         # 文件末尾添加一個(gè)空行
curly_bracket_next_line = false     # 大括號(hào)不另起一行
spaces_around_operators = true      # 運(yùn)算符兩遍都有空格
indent_brace_style = 1tbs           # 條件語(yǔ)句格式是 1tbs

[*.js]                              # 對(duì)所有的 js 文件生效
quote_type = single                 # 字符串使用單引號(hào)

[*.{html,less,css,json}]            # 對(duì)所有 html, less, css, json 文件生效
quote_type = double                 # 字符串使用雙引號(hào)

[package.json]                      # 對(duì) package.json 生效
indent_size = 2                     # 使用2個(gè)空格縮進(jìn)

格式化時(shí)機(jī)

• 用戶手動(dòng)格式化
• 定時(shí)格式化
• 保存時(shí)格式化

配置步驟

1. 安裝插件
   EditorConfig for VS Code
   ESLint
   Vetur

2. 編寫(xiě)配置文件
   .editorconfig
   .eslintrc.js

3. 編輯器配置