一個vue前端的VSCODE插件分享（2018）

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