VSCODE的外掛系列

使用vscode進行開發怎麼能少的了外掛呢

豐富的外掛讓vscode更加好用 順便推薦圖床（圖床地址）

美化外掛

• background 給編輯器視窗加個背景！唯一的缺點是vscode會顯示已損壞，當然啦，並不影響使用
  可以參考以下配置

  "background.useDefault": false,
  "background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index"
 
: "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "100% 90%",
    "background-size": "auto 60%",
    "background-repeat": "no-repeat",
    "opacity": 0.1
  },
  "background.customImages": [
    "背景圖片地址1",
    "背景圖片地址2",
    "背景圖片地址3"
  ],
複製程式碼

• carbon-now-sh 一個非常好看的程式碼截圖工具 整合之後 選中然後快捷鍵就能截圖啦

開發輔助

Debugger

• Debugger for Chrome 看名字就知道了
• open in browser 懶得開瀏覽器用的
• Quokka.js 實時計算，檢視結果

路徑補全以及包大小

• File Peek
• Import Cost 計算引入需要佔用多大的地方
• Path Intellisense

npm

• npm
• NPM-Scripts 方便執行指令碼

格式化

• ESLint
• Prettier 格式化
• Vetur vue格式化以及相關配置
• Vue 2 Snippets

eslint 和 prettier配合使用，vue自動儲存格式化的配置

  "vetur.format.defaultFormatter.html": "none", // 預設html的方法
  "eslint.autoFixOnSave": true, // 自動儲存
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "prettier.singleQuote": true, // ' or ""
  "prettier.semi": false, // 分號
  "prettier.eslintIntegration": true, // 走eslint
複製程式碼

其他

• GitLens 比自帶的git好用多了的git 還能顯示xx行是誰什麼時候提交的
• Settings Sync 同步設定到git上 強烈推薦 具體安裝步驟可以參考其他人的部落格 這裡就寫一下mac下的快捷鍵

downloadSettings	    ⇧⌥D
extension.updateSettings    ⇧⌥U
複製程式碼

最後送上我當前配置的gist，有需要的可以安裝上setting sync後將建立的gist改成這個來自動獲取外掛哦 gist 地址