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"
],
複製代碼

最終效果演示

其餘類型的項目和語言配置請期待下一篇！