前言
代碼格式化對於程序員來說，是個高頻使用的功能。直接影響編程體驗，如果每次寫完代碼后，還要手動排版，那寫代碼得多費力，編程效率得多低。然而我驚訝的發現，微信開發者工具默認沒有打開文件保存自動化格式開關，需要開發者自己去打開，打開之后，保存js和json文件時，會提示有兩個格式化擴展可以選擇，然而開發者對這些格式化擴展的功能不太了解，不知道有哪些配置項。不知道應該選擇哪個格式化擴展。本文帶你了解一下微信開發者工具自帶的格式化擴展的美化規則。讓你選擇時不再茫然，現在我們進入主題。
這是微信開發者工具的初始配置：
{ "editor.fontFamily": "Consolas", "editor.fontSize": 14,
// 設置代碼行間距 "editor.lineHeight": 0, "files.autoSave": "off",
// 是否自動換行 "editor.wordWrap": "on",
// 控制是否顯示縮略圖。 "editor.minimap.enabled": false,
// 按tab時插入空格 "editor.insertSpaces": true, "editor.tabSize": 4,
// 單擊文件，在工作區已經打開的tab區域展示文件內容而不是新開tab展示單擊文件內容 "workbench.editor.enablePreview": true,
// 通過ctrl+p搜索打開的文件，在原來的tab區域展示文件而不是新開tab展示 "workbench.editor.enablePreviewFromQuickOpen": true }
對這些配置有修改或者添加新配置，都屬於自定義配置。
當你在setting.json中配置了下面這一句的時候，文件保存的時候，就會自動進行格式化。
"editor.formatOnSave": true,
你會發現，當格式化js和json文件時，js和json文件默認都有兩個開發工具自帶的格式化擴展。
js的兩個默認格式化擴展是: Beautify和TypeScript and JavaScript Language Features
json兩個默認的格式化擴展是： Beautify和JSON Language Features
開發工具遇到這兩種文件，對它們進行格式化時,就比較犯難了。不知分別采用哪種格式化擴展。其實使用者也比較糾結，因為我們不太了解這幾個格式化擴展，所以無從選擇。為了讓我們的選擇有理有據。我們了解一下這三個微信開發者工具自帶的格式化擴展。
1. 先看第一個 微信開發者工具自帶的擴展 - Beautify HookyQR.beautify
它可以美化js,json,css,sass,html代碼，這個美化擴展是VSCode默認使用的美化擴展, 可以創建一個.jsbeautifyrc文件配置美化規則，也可以在VSCode的setting.json文件中配置美化規則。注意同樣的規則，在.jsbeautifyrc和VSCode setting.json中配置，規則名稱書寫不一樣。
有的美化規則是通用的，有的美化只適用html, js|html, css, js。
| .jsbeautifyrc | VSCode |
|---|---|
| eol | files.eol (all) |
| end_with_newline | html.format.endWithNewline（html） |
| end_with_newline | file.insertFinalNewLine（css，js） |
| space_in_paren | javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis(js) |
下面是具體的美化規則
| Setting | Description | Formatter | Default |
|---|---|---|---|
| eol | 行結尾字符 | All | "\n" |
| end_with_newline | 文件結尾是否空出一行 | All | false |
| indent_char | 縮進填充字符 | All | " " |
| indent_size | 縮進大小 | All | 4 |
| indent_with_tabs | 用tab縮進，會覆蓋縮進填充字符與縮進大小配置 | All | false |
| preserve_newlines | 保留空行 | All | true |
| max_preserve_newlines | 一次最多保留多少行的空行，默認是10 | JS, HTML | 10 |
| wrap_line_length | 一行最大的字符數 | JS, HTML | 0 |
| extra_liners | 標簽前面加空行 | HTML | ["head", "body", "/html"] |
| indent_body_inner_html | 縮進 <body> 標簽 |
HTML | true |
| indent_handlebars | 格式化雙括號里面的內容，如{{#foo}}或{{/foo}} | HTML | false |
| indent_head_inner_html | 縮進 <head> 標簽 |
HTML | true |
| indent_inner_html | 縮進 <html>標簽 |
HTML | false |
| indent_scripts | 縮進 <script> 標簽 |
HTML | "normal" |
| inline | 配置項是個數組，里面配置的html標簽,不格式化時換行 | HTML | [ "a", "abbr", "area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite", "code", "data", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "map", "mark", "math", "meter", "noscript", "object", "output", "progress", "q", "ruby", "s", "samp", "select", "small", "span", "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var", "video", "wbr", "text", "acronym", "address", "big", "dt", "ins", "strike", "tt" ] |
| wrap_attributes | 每個屬性是否單獨一行 | HTML | "auto" |
| wrap_attributes_indent_size | 每個屬性的縮進大小,默認縮進字符數是indent_size設置的大小 | HTML | false |
| unformatted | 不格式化的tag | HTML | [] |
| content_unformatted | 標簽里面的內容不格式化 | HTML | ["pre", "textarea"] |
| void_elements | 不格式化自閉合的標簽 如<input /> | HTML | ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr", "!doctype", "?xml", "?php", "?=", "basefont", "isindex"] |
| newline_between_rules | 在每個CSS規則之間增加一行 | CSS | false |
| selector_separator_newline | 多個選擇器之間增加一行 | CSS | true |
| space_around_combinator | 在后代選擇器 > 兄弟選擇器 + ~ | CSS | false |
| brace_style | 大括號的風格{} | JS | "collapse" |
| break_chained_methods | 鏈式方法是否換行 |
JS | false |
| comma_first | 是否將逗號放在新行的開頭而不是結尾 | JS | false |
| e4x | e4x-可以把 XML 文檔定義為 JavaScript 對象，保持原有定義格式，不做處理。 | JS | false |
| indent_level | 初始縮進級別 | JS | 0 |
| jslint_happy | 開啟啟用jslint-stricter模式，強制在匿名函數之前的括號中加一個空格 | JS | false |
| keep_array_indentation | 保留數組縮進 | JS | false |
| keep_function_indentation | 保留函數縮進 | JS | false |
| operator_position | 將運算符移到新行之前或之后，或者保持原樣 | JS | "before-newline" |
| space_after_anon_function | 在匿名函數的括號之前添加一個空格 | JS | false |
| space_after_named_function | 在命名函數的括號之前添加一個空格 | JS | false |
| space_before_conditional | 在條件語句前添加一個空格 | JS | true |
| space_in_empty_paren | 在空的圓括號中留空格 | JS | false |
| space_in_paren | 在有參數的括號內添加空格 | JS | false |
| unescape_strings | 不轉義 以\xNN 表示的可打印字符，示例 "\x65\x78\x61\x6d\x70\x6c\x65" | JS | false |
| unindent_chained_methods | 不縮進鏈式方法 | JS | false |
完整配置點擊這里
2.接着看TypeScript and JavaScript Language Features vscode.typescript-language-features
打包在VS Code中的typescript-language-features插件，它利用TypeScript Language Service提供了諸如下面羅列的編程式語言特性：
- 懸停信息（vscode.languages.registerHoverProvider）
- 自動補全（vscode.languages.registerCompletionItemProvider）
- 轉跳到定義（vscode.languages.registerDefinitionProvider）
- 錯誤檢查
- 格式化
- 重構
- 代碼折疊
關於格式化的規則有如下這些：
這是翻譯版
3.再看 JSON Language Features vscode.json-language-features
VSCode自帶的json工具包配置項很少，想想json的語法格式比較簡單，配置項很少，但是夠用了。
這是翻譯版
4.如果對微信自帶的某種格式化擴展不滿意，可以在VSCode應用市場，尋找其它的擴展。
比如你對微信開發者工具自帶的格式化wxml文件效果不滿意。那么你可以使用VSCode的wxConfig擴展格式wxml文件。在微信開發者工具中使用VSCode擴展的方法參見我的另外一篇文章 VSCode 微信小程序擴展開發 ）
這是使用微信開發者工具自帶的擴展vscode.html-language-features格式化wxml文件的效果
這是安裝了wxmlConfig擴展，選擇使用wxmlConfig格式化.wxml文件的效果
這是wxmlConfig默認的一些配置
"wxmlConfig.format": { "brace_style": "collapse", "end_with_newline": false, "indent_char": "", "indent_handlebars": false, "indent_inner_html": false, "indent_scripts": "keep", "indent_size": 2, "indent_with_tabs": true, "max_preserve_newlines": 1, "preserve_newlines": true, "wrap_attributes": "force-expand-multiline" }, "wxmlConfig.tagNoActiveArr": [ "view", "button", "text", "icon", "image", "navigator", "block", "input", "label", "template", "form", "camera", "textarea" ], "wxmlConfig.onSaveFormat": true,
5. 如果只使用微信開發者工具自帶的格式化擴展，要實現對.js,.json,.wxss,.wxs,文件格式化，建議的配置如下：
{ "editor.insertSpaces": true, "editor.wordWrap": "on", "editor.minimap.enabled": true, "editor.formatOnSave": true, // 打開代碼格式化功能 "editor.wordWrapColumn": 120, // 每行超過多少個字換行 "editor.rulers": [120], // 最大列寬標尺 "editor.foldingStrategy": "indentation", // 代碼折疊時有縮進效果 "editor.tabSize": 2, // tab使用2個空格 "files.eol": "\n", // 文件結尾使用\n而不是\r\n換行 "wxml.format.wrapAttributes": "aligned-multiple", // wxml超過一行最大字數屬性垂直對齊 "files.autoSave": "onFocusChange", // 文件失焦是自動保存 "files.associations": { // 定義文件與格式化擴展之間的關聯 "*.json": "jsonc", // 在json文件中可以寫注釋 "*.wxss": "css", "*.wxs": "javascript"
}, "[javascript]": { // 指定語言使用的格式化擴展,解決一類文件會觸發多個格式化擴展引起的沖突問題 "editor.defaultFormatter": "HookyQR.beautify" }, "[css]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[jsonc]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[json]": { "editor.defaultFormatter": "HookyQR.beautify" }
將這些配置寫入到項目根目錄下的.vscode/settings.json文件中。
6.配置完之后，發現2個問題。
6.1 第一是HookyQR.beautify不支持命令行，手動保存文件初始格式化整個項目，效率太低。
不使用命令行，一個一個保存文件進行格式化，效率太低。而prettier雖然支持命令行，但卻無法在微信開發者工具中使用。因此，最好的策略就是先用prettier把項目所有的文件格式化一遍，后續再用HookyQR.beautify在保存文件時格式化代碼。
package.json配置
{ "scripts": { "format": "prettier --write **/*.{wxml,js,wxss,wxs,json}" }, "devDependencies": { "prettier": "^2.2.1" } }
.prettierrc.js配置
module.exports = { // 換行的寬度，默認80 printWidth: 120, // Tab字符的空格數量，默認值2 tabWidth: 2, // 使用tab替代空格縮進，默認值false useTabs: false, // 語句結尾添加分號，默認值true semi: true, // 使用單引號替代雙引號，默認值false singleQuote: true, // 對象的屬性（鍵）是否需要引號包裹，默認值as-needed(按需添加) quoteProps: 'as-needed', // 多行時是否添加尾隨逗號，默認值從2.0版本開始使用es5 trailingComma: 'es5', // 對象字面量的括號之間是否需要空格，默認值true bracketSpacing: true, // 箭頭函數單獨的參數是否需要括號包裹，默認值從2.0版本開始使用always arrowParens: 'always', // HTML文件的空格敏感度，默認值css htmlWhitespaceSensitivity: 'css', // 換行符，默認值從2.0版本開始使用lf endOfLine: 'lf', // 微信小程序自定義的文件格式 Prettier 無法識別，因此需要在重寫配置里面 指定解析器處理。 overrides: [ { files: '*.wxml', options: { parser: 'html' }, }, { files: '*.wxss', options: { parser: 'css' }, }, { files: '*.wxs', options: { parser: 'babel' }, }, ], };
.prettierignore配置
.vscode
libs
node_modules
miniprogram_npm
yarn.lock
project.config.json
6.2 第二個問題是對.wxss文件格式化時，在.vscode/settings中配置的縮進2個空格不生效。
每個tab是2個空格，可是{}里面的屬性縮進卻是4個空格。在網上沒找到如何在.vscode/settings.json配置wxss格式化縮進2個空格的方法，但是搜到在.jsbeautifyrc中配置wxss縮進2個空格的方法，在.jsbeautifyrc做如下配置即可。
{ "brace_style": "none,preserve-inline", "indent_size": 2, "indent_char": " ", "jslint_happy": true, "wrap_attributes": "auto", "keep_array_indentation": false, "selector_separator_newline": false, "unformatted": [""] }
參考文章：
[1] VSCode擴展插件市場-HookyQR.beautify
[2] 代碼規范-從空格到代碼格式化
[3] VS Code 插件開發文檔
[4] vscode中beautifyrc插件配置文件翻譯和設置