一個vue前端的VSCODE外掛分享（2018）

Edwardwu發表於2018-11-09
Vue前端VSCode

VSCODE的外掛系列

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

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

美化外掛

  • background 給編輯器視窗加個背景！唯一的缺點是vscode會顯示已損壞，當然啦，並不影響使用
    一個vue前端的VSCODE外掛分享（2018）
    可以參考以下配置
  "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 一個非常好看的程式碼截圖工具 整合之後 選中然後快捷鍵就能截圖啦
    一個vue前端的VSCODE外掛分享（2018）

開發輔助

Debugger

  • Debugger for Chrome 看名字就知道了
  • open in browser 懶得開瀏覽器用的
  • Quokka.js 實時計算，檢視結果
    一個vue前端的VSCODE外掛分享（2018）

路徑補全以及包大小

  • 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 地址

相關文章