1. 程式人生 > >vue開發工具vscode插件安裝及調試

vue開發工具vscode插件安裝及調試

them 協議 sha theme RoCE img 需要 插件安裝 Language

1.vue的開發工具Visual Studio Code下載鏈接:進入vscode官網(https://code.visualstudio.com/Download)
2.選擇下一步安裝,我接受協議,選擇安裝位置,將打開方式添加到鼠標右鍵菜單上(勾選“其他”中的第一選項),繼續點擊下一步,完成安裝。
3.vscode開發前需要安裝幾個插件。可直接在工具中打開安裝。也可進入vscode官網插件商店(https://marketplace.visualstudio.com/VSCode) 進行下載安裝。
![](https://s1.51cto.com/images/blog/201903/02/17f75cc60fa480fcfc5031f8dd720c9c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk

4.vue常用插件介紹
// 插件1:vetur
// 插件2:vscode-icons
// 插件3:stylelint
// 插件4:Output Colorizer
// 插件5:HTML Snippets
// 插件6:HTML Boilerplate
// 插件7:GitLens — Git supercharged
// 插件8:Git History
// 插件9:CSS Peek
// 插件10:Beautify css/sass/scss/less
// 插件11:Beautify
// 插件12:Auto Rename Tag
// 插件13:Atom One Dark Theme
5.所有快捷鍵設置:文件→首選項→鍵盤快捷方式
技術分享圖片
6.下面額外介紹一下怎麽把vscode編輯器裝換成中文版,方便英文不好的朋友

第一步:使用快捷鍵【Ctrl+Shift+P】打開搜索框,在彈出的搜索框中輸入【configure language】,然後選擇搜索出來的【Configure Display Language】就會打開了locale.json文件,可以看到locale的屬性值為en
技術分享圖片
第二步:註釋掉原來的en,換成中文簡體:"locale":"zh-CN",重啟vs
第三步:安裝的VSCode中的中文語言包,install一下。安裝好之後會提示重啟VSCode,點擊【Yes】重啟VSCode軟件。接下來就是中文環境了,可以友好的開發了。
技術分享圖片
7.將創建好的項目,打開就可以使用了

vue開發工具vscode插件安裝及調試