本文目錄：

• 1.漢化
• 2.常用插件
• 3.設(shè)置默認(rèn)瀏覽器
• 4.用戶代碼片段
• 5.調(diào)節(jié)左側(cè)導(dǎo)航欄字體大小
• 6.修改格式化代碼樣式
• 7.Eslint插件和settings sync插件
• 8.常用快捷鍵

VS-code是微軟推出的一款免費(fèi)的代碼編輯器，下載和安裝都十分簡(jiǎn)單。之前用過(guò)hbuilder、webstorm、sublime，感覺(jué)webstorm很好用，但是破解太復(fù)雜，用了一段時(shí)間之后又需要重新尋找破解碼，sublime沒(méi)太了解，感覺(jué)是和vscode一樣的輕量編輯器，但不是免費(fèi)的，hbuilder是免費(fèi)的，用起來(lái)還可以，但是UI太丑了，用起來(lái)感覺(jué)不“順滑”，所以自從下載vs-code之后，我就決定，以后的編輯器，就用他了！

1.漢化

對(duì)英文不熟練的小伙伴首先第一件事當(dāng)然就是漢化它！

1. 首先打開(kāi)VSCode軟件，可以看到剛剛安裝的VSCode軟件默認(rèn)使用的是英文語(yǔ)言環(huán)境。
2. 接下來(lái)小編開(kāi)始設(shè)置為中文語(yǔ)言環(huán)境，這里需要使用快捷鍵【Ctrl+Shift+P】來(lái)實(shí)現(xiàn)。
3. 在彈出的搜索框中輸入【configure language】，然后選擇搜索出來(lái)的【Configure Display Language】。
4. 然后就打開(kāi)了locale.json文件，可以看到locale的屬性值為en。
5. 刪除locale后面的屬性直到冒號(hào)，然后重新輸入冒號(hào)會(huì)自動(dòng)出現(xiàn)代碼提示。
6. 選擇“zh-CN”。
7. 然后保存locale.json文件，重新啟動(dòng)VSCode軟件，可以看到，并沒(méi)有變?yōu)橹形恼Z(yǔ)言環(huán)境，那是應(yīng)為locale.json中的代碼配置的意思是說(shuō)軟件啟動(dòng)加載語(yǔ)言配置包為中文，但是實(shí)際上剛剛安裝的VSCode并沒(méi)有中文語(yǔ)言包，所以這里并沒(méi)有顯示為中文語(yǔ)言環(huán)境。
8. 在安裝插件的位置輸入Chinese，然后選擇【Chinese （Simplified）Language Pack for Visual Studio Code】，然后點(diǎn)擊右側(cè)的【Install】。
9. 安裝好中文語(yǔ)言包之后軟件會(huì)提示重啟VSCode，點(diǎn)擊【Yes】重啟VSCode軟件。
10. 重啟VSCode軟件之后就會(huì)看到我們熟悉的中文語(yǔ)言環(huán)境界面了。

2.常用插件

VS-code因?yàn)槭且豢钶p量的編輯器，所以自身的功能并不齊全，但是依賴于強(qiáng)大的生態(tài)支持，通過(guò)豐富的插件配置，我們可以把VS-code配置成我們想要的模樣。
插件常見(jiàn)名稱的關(guān)鍵詞
Snippets 智能提示的意思
Syntax語(yǔ)法的意思
highlight 高亮
懶人專用：xxxx Extension Pack xxxx的擴(kuò)展包，快速組建vscode的開(kāi)發(fā)環(huán)境
插件推薦：

1. Path Intellisense 自動(dòng)路徑補(bǔ)全
   2.Chinese (Simplified) Language Pack for Visual Studio Code 漢化包
   3.vetur 支持vue的語(yǔ)法高亮、智能感知、Emmet 等
   4.VueHelper snippet 代碼片段
   5.Vue VSCode Snippets 很全面的vue代碼片段
   6.vue Syntax Highlight for Vue.js
   7.Auto Close Tag 自動(dòng)添加HTML / XML關(guān)閉標(biāo)簽
   8.Auto Rename Tag 自動(dòng)重命名配對(duì)的HTML / XML標(biāo)簽
   9.HTML Snippets 代碼自動(dòng)填充
   10.Live Server 瀏覽器實(shí)時(shí)刷新
   11.Bracket Pair Colorizer 給括號(hào)加上不同的顏色，便于區(qū)分不同的區(qū)塊
   12.JavaScript(ES6) code snippets ES6語(yǔ)法智能提示
   13.open in browser 支持快捷鍵與鼠標(biāo)右鍵快速在瀏覽器中打開(kāi)html文件
   14.HTML CSS Support　智能提示CSS類名以及id
   15.jQuery Code Snippets　jQuery代碼智能提示
   16.Markdown Preview Enhanced　實(shí)時(shí)預(yù)覽markdown，markdown使用者必備
   17.Material Icon Theme 一款很不錯(cuò)的圖標(biāo)主題，支持更換不同色系的圖標(biāo)
   18.ES7 React/Redux/GraphQL/React-Native snippets
   React/Redux/react-router語(yǔ)法智能提示
   19.document this 這個(gè)插件的作用是能夠讓你快速的對(duì)類和函數(shù)添加注釋，通過(guò)按兩次ctrl+alt+D按鍵可以快速增加注釋。
   20.language PL/SQL 支持sql語(yǔ)句
   21.code runner 安裝之后鼠標(biāo)右鍵就可以運(yùn)行代碼
   22.gitlens 可以看到每一行代碼的作者
   23.Visual Studio Intellicode 這個(gè)插件能幫助開(kāi)發(fā)人員生成智能代碼補(bǔ)全提示，并且它內(nèi)置支持很多種編程語(yǔ)言。
   24.Synthwave ‘84 銀翼殺手風(fēng)格的酷炫主題風(fēng)格
   25.Highlight Matching Tag突出顯示匹配的開(kāi)始或結(jié)束標(biāo)簽。
   26.Image preview懸停時(shí)顯示圖像預(yù)覽。
   27.Indent Rainbow 此擴(kuò)展使文本前面的縮進(jìn)著色，在每個(gè)步驟上交替使用四種不同的顏色。
   28.gitignore 添加文件或者文件夾到gitignore，安裝了之后在導(dǎo)航欄右鍵就可以直接add to gitignore
   29.minapp 微信小程序標(biāo)簽、屬性的智能補(bǔ)全
   30.Project Manager 項(xiàng)目管理，可以快速的切換項(xiàng)目
   32.Docker
   33.Eslint
   34.Turbo Console Log ctrl+alt+L 可以快速生成console語(yǔ)句
   35.Live Sass Compiler 安裝插件之后VSCode的下方會(huì)有個(gè)“Watch Sass”按鈕，可以實(shí)現(xiàn)sass的實(shí)現(xiàn)編譯預(yù)覽
   36.Easy less
   37.Prettier

3.設(shè)置默認(rèn)瀏覽器

導(dǎo)航欄（文件=>首選項(xiàng)=>設(shè)置）
在搜索框中輸入“open-in-browser.default”，然后設(shè)置自己想要的默認(rèn)瀏覽器就可以了，一般情況下用“chrome”，火狐的話設(shè)置為“firefox”，然后crtl+s進(jìn)行保存就可以了。

4.用戶代碼片段

文件=》首選項(xiàng)=》用戶代碼片段
新建全局代碼片段
事先定義一段代碼，然后通過(guò)關(guān)鍵字去觸發(fā)
prefix指的是片段觸發(fā)名稱，body里放的是代碼片段
description是代碼片段的描述
1指的是代碼片段生成后光標(biāo)所在的位置，用tab可以進(jìn)行快速的切換

5.調(diào)節(jié)左側(cè)導(dǎo)航欄字體大小

在Visual Studio Code的安裝目錄下依此找到 Microsoft VS Code\resources\app\out\vs\workbench\ 目錄下的workbench.main.css文件，打開(kāi)搜索 .monaco-workbench>.part>.content
其后面會(huì)找到(font-size:16px)，將其改成自己想要的字號(hào)，然后重啟vscode，就修改完成了。

6.修改格式化代碼樣式

安裝上面的所有插件后，在使用中會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題就是使用shift+alt+F快捷鍵格式化代碼，字符串的引用會(huì)自動(dòng)變成雙引號(hào)，語(yǔ)句結(jié)尾也會(huì)自動(dòng)加上分號(hào)，這不符合使用習(xí)慣，解決方法：
文件=>首選項(xiàng)=>設(shè)置，搜索“vetur.format.defaultFormatterOptions”，然后點(diǎn)擊”在settings.json中編輯“，在"vetur.format.defaultFormatterOptions"中添加

{
  "singleQuote": true,
  "semi": false
}

7.Eslint插件和settings sync插件

vscode可以安裝 eslint 插件，用來(lái)自動(dòng)的檢測(cè)不符合eslint規(guī)則的地方，注意需要配合eslint庫(kù)使用。

在eslint的rules里面一條條的添加規(guī)則太麻煩，可以安裝相關(guān)插件，引用這個(gè)插件之后，相關(guān)規(guī)則就會(huì)自動(dòng)引入，eslint-plugin-vue
eslint.vuejs.org/user-guide/#installation

vscode配置插件保存代碼自動(dòng)按照eslint規(guī)則格式化代碼
ctrl+shift+p調(diào)出來(lái)快捷搜索 首選項(xiàng)=>打開(kāi)工作區(qū)設(shè)置，搜索auto單詞
擴(kuò)展=>eslint ，auto fix on save 打上勾
接下來(lái)ctrl+shift+p調(diào)出來(lái)快捷搜索 首選項(xiàng)=>打開(kāi)工作區(qū)設(shè)置(JSON)，這時(shí)候打開(kāi)的是settings.json的而文件，可以安裝一個(gè)插件，用來(lái)配置這個(gè)文件，settings sync，安裝后登陸github，可以自動(dòng)上傳我們的配置
點(diǎn)擊edit configration

image.png

輸入相關(guān)gist 可以拉取已配置好的代碼

image.png

接下來(lái)，下載配置

image.png

拉取了別人的配置，想要更新一下，并且變成自己的配置

image.png

此時(shí)進(jìn)入插件頁(yè)面，可以登陸github，然后更新配置代碼后，

image.png

image.png

高級(jí)配置里面可以將自己的gist上傳并公開(kāi)分享

8.常用快捷鍵

alt+shift+上箭頭或者下箭頭：快捷復(fù)制當(dāng)前行
alt+shift+d：快速拉取出多個(gè)光標(biāo)
alt+G：快速跳行