VsCode从零开始配置一个属于自己的Vue开发环境
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: hdu-Find the nondecr
- 下一篇: vue-ls vue 本地储存示例