HBuilderX程式碼格式化設定，配置prettier

Stitchhhhh發表於2024-12-09
UI
  • 安裝formatAndSave外掛,安裝好了外掛後， 給專案裡的任一檔案執行Ctrl+S,發現專案根目錄多了.prettierrc.js和.prettierignore檔案
  • 外掛用法配置執行ctrl+s格式化
    1. HBuilderX取消勾選儲存時自動格式化
    2. 外掛提供一個ctrl+s命令，名為prettier格式化程式碼，與 HBuilderX 預設儲存命令重複，在任意檔案中按下ctrl+s會出現選擇選單，設定以後只選一個為prettier格式化程式碼 (這一步我新安裝沒出現，第一次到是出現了，所以沒截到圖）
    3. 執行ctrl+s格式化
  • 自定義格式化快捷鍵，因為我是Mac OS,所以希望儲存的時候command+s自動格式化

安裝formatAndSave外掛

安裝好了外掛後，發現專案根目錄多了.prettierrc.js和.prettierignore檔案

在 HBuilderX 左側目錄的任意專案的任意檔案中ctrl+s，外掛會獲取該檔案所在專案目錄，判斷所在專案根目錄下是否存在 prettier 配置檔案、是否存在 prettier 忽略檔案.prettierignore，如果不存在，則會在專案根目錄建立預設的.prettierrc.js和.prettierignore，外掛會基於這兩個檔案進行格式化

外掛自帶的prettier配置

module.exports = {
  // 指定換行的行長<int>，預設80
  printWidth: 80,

  // 指定每個縮排級別的空格數<int>，預設2
  tabWidth: 2,

  // 用製表符而不是空格縮排<bool>，預設false
  useTabs: false,

  // 在語句末尾新增分號<bool>，預設true
  semi: true,

  // 使用單引號而不是雙引號<bool>，預設false
  singleQuote: false,

  // object物件中key值是否加引號<as-needed|consistent|preserve>，預設as-needed
  // as-needed-僅在需要時在物件屬性周圍新增引號
  // consistent-如果一個物件中至少有一個屬性需要引號，所有屬性新增引號
  // preserve-保留物件屬性中使用者輸入使用的引號
  quoteProps: "as-needed",

  // 在 JSX 中使用單引號而不是雙引號<bool>，預設false
  jsxSingleQuote: false,

  // 在多行逗號分隔的句法結構中儘可能列印尾隨逗號<es5|none|all>，預設es5
  // es5-在 ES5 中有效的尾隨逗號（物件、陣列等），TypeScript 的型別引數中沒有尾隨逗號
  // none-沒有尾隨逗號
  // all-儘可能以逗號結尾（包括函式引數和呼叫）。要執行以這種方式格式化的 JavaScript 程式碼需要一個支援 ES2017（Node.js 8+ 或現代瀏覽器）或下層編譯的引擎。這還會在 TypeScript 的型別引數中啟用尾隨逗號（自 2018 年 1 月釋出的 TypeScript 2.7 起支援）
  trailingComma: "es5",

  // 物件字面量中括號之間的空格<bool>，預設true
  bracketSpacing: true,

  // 將>放在多行 HTML（HTML、JSX、Vue、Angular）元素最後一行的末尾，而不是單獨放在下一行（不適用於自關閉元素）<bool>，預設false
  // true：
  // <button
  //   className="prettier-class"
  //   id="prettier-id"
  //   onClick={this.handleClick}>
  //   Click Here
  // </button>
  // false：
  // <button
  //   className="prettier-class"
  //   id="prettier-id"
  //   onClick={this.handleClick}
  // >
  //   Click Here
  // </button>
  bracketSameLine: true,

  // 在唯一的箭頭函式引數周圍包含括號<always|avoid>，預設always
  // always-始終包含括號
  // avoid-儘可能省略括號
  arrowParens: "always",

  // Prettier 可以限制自己只格式化在檔案頂部包含特殊註釋（稱為 pragma）的檔案。這在逐漸將大型、未格式化的程式碼庫過渡到 Prettier 時非常有用<bool>，預設false
  requirePragma: false,

  // Prettier可以在檔案的頂部插入一個 @format 的特殊註釋，以表明該檔案已經被Prettier格式化過了。在使用 --require-pragma 引數處理一連串的檔案時這個功能將十分有用。如果檔案頂部已經有一個doclock，這個選項將新建一行註釋，並打上 @format 標記<bool>，預設false
  insertPragma: false,

  // 超過最大寬度是否換行<always|never|preserve>，預設preserve
  // always-如果超過最大寬度換行
  // never-不要換行
  // preserve-按原樣顯示
  proseWrap: "preserve",

  // 指定 HTML、Vue、Angular 和 Handlebars 的全域性空格敏感度<css|strict|ignore>，預設css
  // css-遵循CSS屬性的預設值
  // strict-所有標籤周圍的空格（或缺少空格）被認為是重要的
  // ignore-所有標籤周圍的空格（或缺少空格）被認為是無關緊要的
  htmlWhitespaceSensitivity: "ignore",

  // vue檔案script和style標籤中是否縮排<bool>，預設false
  vueIndentScriptAndStyle: false,

  // 行尾換行符<lf|crlf|cr|auto>，預設lf
  endOfLine: "lf",

  // 控制 Prettier 是否格式化嵌入在檔案中的引用程式碼<off|auto>，預設auto
  // auto–如果 Prettier 可以自動識別，則格式化嵌入程式碼
  // off-從不自動格式化嵌入程式碼
  embeddedLanguageFormatting: "auto",

  // 在 HTML、Vue 和 JSX 中強制執行每行單個屬性<bool>，預設false
  singleAttributePerLine: false,
};

HBuilderX取消勾選儲存時自動格式化
取消勾選儲存時自動格式化，主要是為了儲存時，不要它的自動格式化程式碼風格設定。

自定義prettier格式化快捷鍵
參考外掛文件，在keybindings.json檔案裡新增

[
 { "key": "Command+S", "command": "extension.prettier", "override": true }
]

就可以儲存專案Command+s自動格式化了

作者：gongzemin
連結：https://juejin.cn/post/7393740927170871359
來源：稀土掘金

相關文章