天啦，微信開發者工具預設竟然沒有開啟檔案儲存格式化功能，正確的開啟姿勢請看這裡

孤舟蓑翁發表於2021-03-13

前言

程式碼格式化對於程式設計師來說，是個高頻使用的功能。直接影響程式設計體驗，如果每次寫完程式碼後，還要手動排版，那寫程式碼得多費力，程式設計效率得多低。然而我驚訝的發現，微信開發者工具預設沒有開啟檔案儲存自動化格式開關，需要開發者自己去開啟，開啟之後，儲存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)

下面是具體的美化規則 

SettingDescriptionFormatterDefault
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提供了諸如下面羅列的程式設計式語言特性：

關於格式化的規則有如下這些：

 

這是翻譯版

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.formatOnSave": true,  // 開啟程式碼格式化功能
  "editor.wordWrapColumn": 120, // 每行超過多少個字換行
  "editor.rulers": [            // 最大列寬標尺
      120
  ],
  "editor.foldingStrategy": "indentation", // 程式碼摺疊時有縮排效果
  "editor.tabSize": 2,                     // tab使用2個空格
  "emmet.includeLanguages": {              // wxml標籤補全提示
      "wxml": "html"
  }, 
  "files.eol": "\n",                   // 檔案結尾使用\n而不是\r\n換行
  "files.autoSave": "onFocusChange",   // 檔案失焦是自動儲存
  "files.associations": {              // 定義檔案與格式化擴充套件之間的關聯
      "*.json": "jsonc",               // 在json檔案中可以寫註釋
      "*.wxml": "html",                // 格式化wxml採用格式化html的擴充套件
      "*.wxss": "css",
      "*.wxs": "js"
  },
  "[javascript]": {   // 指定語言使用的格式化擴充套件,解決一類檔案會觸發多個格式化擴充套件引起的衝突問題
      "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[css]": {
      "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[json]": {
      "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[html]": {
      "editor.defaultFormatter": "vscode.html-language-features"
  }
}

配置入口:

隨便找一個擴充套件，進入settings.json檔案

參考文章：

[1] VSCode擴充套件外掛市場-HookyQR.beautify    

[2] 程式碼規範-從空格到程式碼格式化

[3] VS Code 外掛開發文件

[4] vscode中beautifyrc外掛配置檔案翻譯和設定

 

相關文章