VsCode算是比較熱門的一個代碼編輯器了，全名Visual Studio Code，微軟出品

?

插件眾多，功能齊全，平常開發(fā)過程中都是用的它，整理了下日常使用的插件及配置供大家參考，廢話就不多說了，直接進(jìn)入正題。

相關(guān)插件

Vetur

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur

Vetur不用說了吧，開發(fā)Vue必裝的一個插件

未安裝之前vue文件顯示這樣的

?

安裝完成后顯示這樣的，看著舒服多了

?

Vue 2 Snippets

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

主要加強(qiáng)vue的便捷寫法

?

?

language-stylus

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus

寫stylus用的，如果項目用的stylus寫樣式推薦安裝，其他Sass、LESS等同理安裝相應(yīng)的插件即可。

?

?

Auto Close Tag

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

自動閉合標(biāo)簽所用

?

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

?

Auto Rename Tag

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

自動修改重命名配對的標(biāo)簽

?

Bookmarks

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

可以對成片的代碼做一些書簽標(biāo)記，方便后續(xù)查看。

?

Bracket Pair Colorizer

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

對括號進(jìn)行著色，方便區(qū)分，下面的圖分別是安裝前后的比較

?

?

Copy Relative Path

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=alexdima.copy-relative-path

用于復(fù)制文件的完整路徑和相對路徑，有時候我們可能需要復(fù)制一些文件的路徑，該插件就很方便了。

?

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,即可快速生成標(biāo)準(zhǔn)的注釋

?

psioniq File Header

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header

按兩次Ctrl+Alt+H可快速在文件的頭部生成注釋信息，如果對默認(rèn)的注釋模板不滿意的話，可以在配置文件中自定義注釋模板

"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快速查看組件定義以及組件跳轉(zhuǎn)，具體使用見插件文檔地址中的使用方法。

?

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風(fēng)格的icon文件圖標(biāo)，可以看下安裝前后的區(qū)別。

?

?

ESLint

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

這個不用多說了，規(guī)范代碼格式的。

StandardJS – JavaScript Standard Style

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs

作為一個合格的前端開發(fā)，得遵循一定得代碼規(guī)范，這里推薦StandardJS，配合該插件可以自動將你的代碼格式化成規(guī)范的代碼。

vue-cli-3腳手架創(chuàng)建項目的時候，可以選擇這個規(guī)范。

?

Beautify

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

主要拿它來格式話html的，也可以格式話vue template中的html

配合vetur插件，需要做些設(shè)置,格式化html支持以下四種模式auto|force|force-aligned|force-expand-multiline

"vetur.format.defaultFormatterOptions": {//beautify設(shè)置"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的，應(yīng)該都知道這個插件，功能看圖就知道了。

?

?

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

一款熱門的主題，安裝前后比較。

?

?

相關(guān)配置

{// 編輯器默認(rèn)設(shè)置"editor.tabSize": 2, // 設(shè)置2個空格統(tǒng)一tabSize"javascript.validate.enable": false, // 關(guān)閉默認(rèn)的校驗"workbench.editor.enablePreview": false, // 關(guān)閉文件預(yù)覽// 引用路徑設(shè)置"path-intellisense.mappings": {"@": "${workspaceRoot}/src","~": "${workspaceRoot}/src","src": "${workspaceRoot}/src"},// standard自動保存"standard.autoFixOnSave": true,// psioniq File Header設(shè)置"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設(shè)置"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "none","vetur.format.defaultFormatterOptions": {//beautify設(shè)置"js-beautify-html": {"wrap_attributes_indent_size": 2,"wrap_attributes": "force-expand-multiline" // auto|force|force-aligned|force-expand-multiline}},// eslint設(shè)置"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],// 保存后自動格式化"eslint.autoFixOnSave": true,"editor.formatOnSave": true,"workbench.iconTheme": "material-icon-theme", // icon圖標(biāo)"workbench.colorTheme": "One Dark Pro" // 編輯器主題 }

備份及同步

忙活半天把上面的插件都裝上及配置好，下次換新電腦的時候總不能重新再來一遍吧，所以壓軸插件登場

Settings Sync

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

安裝完成后需要做些其他事情：

創(chuàng)建GitHub Gist ID

點我去創(chuàng)建

?

創(chuàng)建完成后有個提示，一定要將紅色框所示的token記錄下來，不然下次就看不到了。

?

上傳設(shè)置

按Shift + Alt + U，會出現(xiàn)一個出入token的框，將上面我們創(chuàng)建的token輸入后回車。

?

完成后會給你生成一個GIST ID，將這個GIST ID記錄下來，下次需要在其他電腦上恢復(fù)數(shù)據(jù)的時候需要用到。

?

完整步驟Gif

?

下載設(shè)置

按Shift + Alt + D，它將詢問您的GitHub Gist ID（我們在步驟創(chuàng)建GitHub Gist ID中生成的一個ID）

在窗口中輸入該GitHub Gist ID，然后回車。

?

提示需要輸入您的Gist ID（上面上傳設(shè)置后生成的一個ID）

?

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

?

插件配置

最后可以按照自己的需求配置自動上傳與自動下載

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

結(jié)語

至此教程就結(jié)束了，后面有其他問題或者有用的插件會補(bǔ)充進(jìn)去。

總結(jié)

以上是生活随笔為你收集整理的VsCode从零开始配置一个属于自己的Vue开发环境的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。