安裝Prettier

首先找到擴(kuò)展商店的入口
入口1：設(shè)置 → 擴(kuò)展設(shè)置 → 編輯器擴(kuò)展 → prettier
入口2：打開編輯器面板 → 找到小方塊（擴(kuò)展商店）→ 搜索prettier

配置基礎(chǔ)的規(guī)則

安裝好后，就可以在設(shè)置中找到該插件了，然后進(jìn)行設(shè)置，直接點擊右上角的格式化配置文件setting.json

里面一般會有默認(rèn)的編輯器配置，你可以不用改在后面添加上prittier的相關(guān)規(guī)則配置即可，你也可以用我這套的配置，里面包含著 prettier 的格式化配置（從 editor.formatOnSave: true 后面的都是）

{
  "editor.fontFamily": "Menlo",
  "editor.fontSize": 12,
  "editor.lineHeight": 24,
  "files.autoSave": "off",
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "workbench.editor.enablePreview": true,
  "workbench.editor.enablePreviewFromQuickOpen": true,
  "git.autofetch": true,
  "editor.formatOnSave": true,
  "prettier.printWidth": 120,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.trailingComma": "none",
  "prettier.arrowParens": "avoid",
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

規(guī)則的配置可以寫在 setting.json 里，也可以在項目的根目錄下創(chuàng)建 .prettierrc 文件定制項目專屬的規(guī)則

如果兩個文件都寫了有關(guān) prettier 的配置規(guī)則時，.prettierrc 文件是優(yōu)先級高于setting.json 里的噢

.prettierrc文件

{
  "jsxBracketSameLine": true,
  "jsxSingleQuote": true,
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "ignorePath": ".gitignore",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Prettier 附帶了一些可定制的格式選項，可在 CLI 和 API 中使用。

• printWidth 每一行代碼允許的字符數(shù)，默認(rèn) 80,超過設(shè)定的字符數(shù)，會換行
• tabWidth 指定每行縮進(jìn)的空格數(shù)
• tabs true 使用制表符(tab鍵)縮進(jìn)行, false 使用空格縮進(jìn)行
• semi true 在語句末尾添加分號, false 語句末尾不添加分號
• quotes true 使用單引號, false 使用雙引號
• quoteProps as-needed 只有在對象屬性需要引號時，為其添加雙引號， consistent 當(dāng)對象的所有屬性中存在一個屬性必須添加引號，則將其所有屬性添加引號，preserve 對象屬性聲明時加了引號，格式化后就有引號
• jsxQuotes true 在 JSX 文件里使用單引號，false 在 JSX 文件里使用雙引號
• trailingCommas es5 遵循 es5 語法中定義的尾逗號， none 無尾逗號, all 盡可能在結(jié)尾處加上尾逗號
• bracketSpacing true 對象字面量兩邊有空格，false 對象字面量兩邊沒有空格
• jsxBrackets true JSX 文件里組件里 > 換行, false JSX 文件里組件里 > 不換行,
• arrowParens always 始終保留括號，avoid 不保留括號
• rangeStart 表示從那一行開始格式化
• rangeEnd 表示從那一行結(jié)束格式化
• filepath 詳見 Parser
• requirePragma 是否啟用注解格式化，即配置注解的格式化，不配置的不格式化，默認(rèn)值：false
• insertPragma true 當(dāng)格式化時，會在文件頭添加 /** @format */, false 不會添加 /** @format */
• proseWrap 與 markdown 有關(guān)系 默認(rèn)值 preserve
• htmlWhitespaceSensitivity 指定 HTML 文件的全局空白區(qū)域敏感度,默認(rèn)值 css
• endOfLine 結(jié)尾類型，默認(rèn)值為 auto
• ignorePath 寫入不適用prettier進(jìn)行格式化的文件名
• tslintIntegration 默認(rèn)為false，不讓prettier使用tslint的代碼格式進(jìn)行校驗

這里列舉了一些可能會用到的（至少上面的格式化規(guī)則配置在開發(fā)規(guī)范已經(jīng)可以滿足），其他的具體 options 可以去逛網(wǎng)查 Prettier

適配微信小程序的wxml、wxss、wxs

配置到這里你會發(fā)現(xiàn): 微信小程序中的 → wxml，wxss 的文件 Prettier還是不能格式化，我們只需要配置一個 overrides 就可以解決；

這里貼出最終版本，這里是 .prettierrc 文件，setting.json 也是同理的，只需加個 prettier.overrides前綴就行了

最終版.prettierrc文件

{
  "jsxBracketSameLine": true,
  "jsxSingleQuote": true,
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "ignorePath": ".gitignore",
  "overrides": [
    {
      "files": "*.wxml",
      "options": { "parser": "html" }
    },
    {
      "files": "*.wxss",
      "options": { "parser": "css" }
    },
    {
      "files": "*.wxs",
      "options": { "parser": "babel" }
    }
  ],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

大功告成啦，此時對相應(yīng)文件進(jìn)行格式化就行啦，如果沒效果可以重啟客戶端文章來源地址http://www.zghlxwxcb.cn/news/detail-489875.html

到了這里，關(guān)于驚~只需要這樣配置就可以讓小程序使用Prettier格式化，還支持wxml等文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！