vscode + prettier 專治程式碼潔癖（一）

前言

相信很多小夥伴都糾結過自己程式碼的格式化問題，特別是團隊協作的時候，加上前端語言種類繁雜，各種語法糖+團隊個人的敲碼習慣，會讓你感覺到一團糟。

在過往，我們嘗試過很多方式，從EditorConfig到各種***Lint, 還要研究各種配置，還是沒辦法滿足我們的需求。 現在，prettier幫到你。

介紹

prettier是一個比較武斷的格式化工具（官方介紹的逗比級翻譯）。 我開始也是不能理解這個東西，因為已經習慣了搗鼓各種lint配置，總想著能弄一套真的適合自己團隊風格習慣的配置出來， 結果就是一直在路上。

為什麼說prettier是武斷的？ 它個各種lint工具不一樣，prettier只關注格式化，並不具有lint檢查語法等能力，所以開始大家可能會經常碰到lint搭配prettier會出現衝突。而且prettier獨斷自行一套格式化風格，雖然提供配置，也只是配置少量的關鍵屬性，能在一定程度上保證的程式碼的風格統一，而且使用門檻極低， 關鍵的他的風格並不醜，更容易讓大家接受。

同時，prettier支援我們大前端目前大部分語言處理，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown，這代表著， 你幾乎可以用一個工具都能搞定所有的程式碼格式化問題。

怎麼玩

其實prettier官網有提供各種使用的姿勢，這裡首先跟大家介紹我們常用的vscode編輯器整合

• 外掛

  首先安裝vscode的外掛prettier-vscode

  安裝成功後，編輯器預設的格式化處理就會被prettier代替， 預設快捷鍵是alt + shift + f

• 配置

  外掛安裝成功後，編輯器的配置setting.json會出現prettier外掛的相關配置節點，同時也能看到一些預設的配置資訊。

  

  這裡你可以針對個人或團隊喜好修改一些編輯器的全域性配置，實際專案使用當中比較推薦用配置檔案.prettierrc的方式進行鍼對性的配置，方便團隊協作使用。 配置檔案的選項可以參考官網：prettier.io/docs/en/con…

例項介紹

這裡第一篇首先給大家演示一下vue + typescript + scss專案的相關配置

vue的vscode神級外掛vetur這裡就不多做介紹了，vetur的預設格式化工具也是使用的prettier，非常親近。

• typescirpt, 這裡仍然需要用到tslint 和 tslint-config-prettier配置

  $ yarn add -D tslint tslint tslint-config-prettier
  複製程式碼

  在專案根目錄新增tslint.json, 這裡使用官方推薦配置: tslint:recommended

  {
    "extend": ["tslint:recommended", "tslint-config-prettier"],
  }
  複製程式碼

  這樣tslin-config-prettier就會想你原先lint配置裡涉及到格式化話的配置覆蓋重寫，其他lint同理。

• scss, 這裡需要用到stylelint和prettier-stylelint

  $ yanr add -D stylelint prettier-stylelint stylelint-config-ydj
  複製程式碼

  專案根目錄新增stylint配置檔案.stylelintrc.js

  module.exports = {
      extends: [
          'stylelint-config-ydj/scss', // your stylint config
          './node_modules/prettier-stylelint/config.js'
      ],
      rules: {
          'string-quotes': 'double'
      }
  };
  複製程式碼

• prettier配置

  專案級的配置，在專案根目錄新增配置檔案.prettierrc

  {
      "eslintIntegration": true,
      "stylelintIntegration": true,
      "tabWidth": 4,
      "singleQuote": true,
      "semi": false
  }
  複製程式碼

PS: 這裡需要注意的點，目前vetur的template還沒有格式化還沒有很好的支援prettier，應該說目前官方只推薦使用js-beautify-html, 雖說即將棄用，但是reshape整合還沒有釋出正式版，使用js-beautify-html+prettier外掛的時候可能會導致template塊無法格式化，我們要在編輯器配置裡面加入這段

// vetur configuration
"vetur.format.defaultFormatter.html": "js-beautify-html",

// prettier configuration
"prettier.disableLanguages": [
    "vue"
],
複製程式碼

最終效果演示

其他型別的專案和語言配置請期待下一篇！