VsCode從零開始配置一個屬於本身的Vue開發環境

原文地址： https://liubing.me/vscode-vue...

VsCode算是比較熱門的一個代碼編輯器了，全名Visual Studio Code，微軟出品，下載地址：點我去下載
插件衆多，功能齊全，日常開發過程當中都是用的它，整理了下平常使用的插件及配置供你們參考，廢話就很少說了，直接進入正題。

相關插件

Vetur

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur
Vetur不用說了吧，開發Vue必裝的一個插件
未安裝以前vue文件顯示這樣的

安裝完成後顯示這樣的，看着舒服多了

Vue 2 Snippets

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
主要增強vue的便捷寫法

language-stylus

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus
寫stylus用的，若是項目用的stylus寫樣式推薦安裝，其餘Sass、LESS等同理安裝相應的插件便可。

Auto Close Tag

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
自動閉合標籤所用

配合快捷鍵Alt+. (Command+Alt+. for Mac)特別好使。

Auto Rename Tag

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
自動修改重命名配對的標籤

Bookmarks

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
能夠對成片的代碼作一些書籤標記，方便後續查看。

Bracket Pair Colorizer

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
對括號進行着色，方便區分，下面的圖分別是安裝先後的比較

Copy Relative Path

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=alexdima.copy-relative-path
用於複製文件的完整路徑和相對路徑，有時候咱們可能須要複製一些文件的路徑，該插件就很方便了。

Path Intellisense

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
路徑自動感知，在配置文件中配置@後咱們就能夠很方便快捷的引用各類文件了

"path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
}

Document This

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis
主要用於方法的註釋，選中方法名，按住Ctrl+Alt後按兩次D,便可快速生成標準的註釋

psioniq File Header

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header
按住Ctrl+Alt後按兩次H既可快速在文件的頭部生成註釋信息，若是對默認的註釋模板不滿意的話，能夠在配置文件中自定義註釋模板

"psi-header.templates": [
  {
    "language": "*",
    "template": [
      "FileName: <<filename>>",
      "Remark: <<filename>>",
      "Project: <<projectname>>",
      "Author: <<author>>",
      "File Created: <<filecreated('dddd, Do MMMM YYYY h:mm:ss a')>>",
      "Last Modified: <<dateformat('dddd, Do MMMM YYYY h:mm:ss a')>>",
      "Modified By: <<author>>"
    ]
  }
]

Vue Peek

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
用於Vue快速查看組件定義以及組件跳轉，具體使用見插件文檔地址中的使用方法。

JavaScript (ES6) code snippets

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
用於快速生成ES6代碼片斷

Material Icon Theme

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Material風格的icon文件圖標，能夠看下安裝先後的區別。

ESLint

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
這個不用多說了，規範代碼格式的。

StandardJS - JavaScript Standard Style

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs
做爲一個合格的前端開發，得遵循必定得代碼規範，這裏推薦StandardJS，配合該插件能夠自動將你的代碼格式化成規範的代碼。

vue-cli-3腳手架建立項目的時候，能夠選擇這個規範。

Beautify

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
主要拿它來格式話html的，也能夠格式話vue`template中的html<br />配合vetur插件，須要作些設置,格式化html支持如下四種模式auto|force|force-aligned|force-expand-multiline`

"vetur.format.defaultFormatterOptions": {
  //beautify設置
  "js-beautify-html": {
    "wrap_attributes_indent_size": 2,
      "wrap_attributes": "force-expand-multiline" // auto|force|force-aligned|force-expand-multiline
  }
}

auto模式

force模式

force-aligned模式

force-expand-multiline模式

vscode-element-helper

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper
用element-ui的，應該都知道這個插件，功能看圖就知道了。

Version Lens

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens
顯示npm，jspm，bower，dub和dotnet核心的軟件包版本信息

One Dark Pro

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
一款熱門的主題，安裝先後比較。

相關配置

{
    // 編輯器默認設置
    "editor.tabSize": 2, // 設置2個空格統一tabSize
    "javascript.validate.enable": false, // 關閉默認的校驗
    "workbench.editor.enablePreview": false, // 關閉文件預覽
    // 引用路徑設置
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src",
        "~": "${workspaceRoot}/src",
        "src": "${workspaceRoot}/src"
    },
    // standard自動保存
    "standard.autoFixOnSave": true,
    // psioniq File Header設置
    "psi-header.templates": [{
        "language": "*",
        "template": [
            "FileName: <<filename>>",
            "Remark: <<filename>>",
            "Project: <<projectname>>",
            "Author: <<author>>",
            "File Created: <<filecreated('dddd, Do MMMM YYYY h:mm:ss a')>>",
            "Last Modified: <<dateformat('dddd, Do MMMM YYYY h:mm:ss a')>>",
            "Modified By: <<author>>"
        ]
    }],
    // vetur設置
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatterOptions": {
        //beautify設置
        "js-beautify-html": {
            "wrap_attributes_indent_size": 2,
            "wrap_attributes": "force-expand-multiline" // auto|force|force-aligned|force-expand-multiline
        }
    },
    // eslint設置
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // 保存後自動格式化
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": true,

    "workbench.iconTheme": "material-icon-theme", // icon圖標
    "workbench.colorTheme": "One Dark Pro" // 編輯器主題
}

備份及同步

忙活半天把上面的插件都裝上及配置好，下次換新電腦的時候總不能從新再來一遍吧，因此壓軸插件登場
Settings Sync
插件文檔地址：https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
安裝完成後須要作些其餘事情：

建立GitHub Gist ID

點我去建立

建立完成後有個提示，必定要將紅色框所示的token記錄下來，否則下次就看不到了。

上傳設置

按Shift + Alt + U，會出現一個出入token的框，將上面咱們建立的token輸入後回車。

完成後會給你生成一個GIST ID，將這個GIST ID記錄下來，下次須要在其餘電腦上恢復數據的時候須要用到。

完整步驟Gif

下載設置

按Shift + Alt + D，它將詢問您的GitHub Gist ID（咱們在步驟建立GitHub Gist ID中生成的一個ID）
在窗口中輸入該GitHub Gist ID，而後回車。

提示須要輸入您的Gist ID（上面上傳設置後生成的一個ID）

下載可能會須要點時間，完整過程Gif

插件配置

最後能夠按照本身的需求配置自動上傳與自動下載

"sync.autoDownload": false,// 是否自動下載
"sync.autoUpload": false// 是否自動上傳

結語

至此教程就結束了，後面有其餘問題或者有用的插件會補充進去。