本文目錄：
- 1.漢化
- 2.常用插件
- 3.設置默認瀏覽器
- 4.用戶代碼片段
- 5.調節左側導航欄字體大小
- 6.修改格式化代碼樣式
- 7.Eslint插件和settings sync插件
- 8.常用快捷鍵
VS-code是微軟推出的一款免費的代碼編輯器，下載和安裝都十分簡單。之前用過hbuilder、webstorm、sublime，感覺webstorm很好用，但是破解太復雜，用了一段時間之后又需要重新尋找破解碼，sublime沒太了解，感覺是和vscode一樣的輕量編輯器，但不是免費的，hbuilder是免費的，用起來還可以，但是UI太丑了，用起來感覺不“順滑”，所以自從下載vs-code之后，我就決定，以后的編輯器，就用他了！
1.漢化
對英文不熟練的小伙伴首先第一件事當然就是漢化它！
- 首先打開VSCode軟件，可以看到剛剛安裝的VSCode軟件默認使用的是英文語言環境。
- 接下來小編開始設置為中文語言環境，這里需要使用快捷鍵【Ctrl+Shift+P】來實現。
- 在彈出的搜索框中輸入【configure language】，然后選擇搜索出來的【Configure Display Language】。
- 然后就打開了locale.json文件，可以看到locale的屬性值為en。
- 刪除locale后面的屬性直到冒號，然后重新輸入冒號會自動出現代碼提示。
- 選擇“zh-CN”。
- 然后保存locale.json文件，重新啟動VSCode軟件，可以看到，并沒有變為中文語言環境，那是應為locale.json中的代碼配置的意思是說軟件啟動加載語言配置包為中文，但是實際上剛剛安裝的VSCode并沒有中文語言包，所以這里并沒有顯示為中文語言環境。
- 在安裝插件的位置輸入Chinese，然后選擇【Chinese （Simplified）Language Pack for Visual Studio Code】，然后點擊右側的【Install】。
- 安裝好中文語言包之后軟件會提示重啟VSCode，點擊【Yes】重啟VSCode軟件。
- 重啟VSCode軟件之后就會看到我們熟悉的中文語言環境界面了。
2.常用插件
VS-code因為是一款輕量的編輯器，所以自身的功能并不齊全，但是依賴于強大的生態支持，通過豐富的插件配置，我們可以把VS-code配置成我們想要的模樣。
插件常見名稱的關鍵詞
Snippets 智能提示的意思
Syntax語法的意思
highlight 高亮
懶人專用：xxxx Extension Pack xxxx的擴展包，快速組建vscode的開發環境
插件推薦：
- Path Intellisense 自動路徑補全
2.Chinese (Simplified) Language Pack for Visual Studio Code 漢化包
3.vetur 支持vue的語法高亮、智能感知、Emmet 等
4.VueHelper snippet 代碼片段
5.Vue VSCode Snippets 很全面的vue代碼片段
6.vue Syntax Highlight for Vue.js
7.Auto Close Tag 自動添加HTML / XML關閉標簽
8.Auto Rename Tag 自動重命名配對的HTML / XML標簽
9.HTML Snippets 代碼自動填充
10.Live Server 瀏覽器實時刷新
11.Bracket Pair Colorizer 給括號加上不同的顏色，便于區分不同的區塊
12.JavaScript(ES6) code snippets ES6語法智能提示
13.open in browser 支持快捷鍵與鼠標右鍵快速在瀏覽器中打開html文件
14.HTML CSS Support 智能提示CSS類名以及id
15.jQuery Code Snippets jQuery代碼智能提示
16.Markdown Preview Enhanced 實時預覽markdown，markdown使用者必備
17.Material Icon Theme 一款很不錯的圖標主題，支持更換不同色系的圖標
18.ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/react-router語法智能提示
19.document this 這個插件的作用是能夠讓你快速的對類和函數添加注釋，通過按兩次ctrl+alt+D按鍵可以快速增加注釋。
20.language PL/SQL 支持sql語句
21.code runner 安裝之后鼠標右鍵就可以運行代碼
22.gitlens 可以看到每一行代碼的作者
23.Visual Studio Intellicode 這個插件能幫助開發人員生成智能代碼補全提示，并且它內置支持很多種編程語言。
24.Synthwave ‘84 銀翼殺手風格的酷炫主題風格
25.Highlight Matching Tag突出顯示匹配的開始或結束標簽。
26.Image preview懸停時顯示圖像預覽。
27.Indent Rainbow 此擴展使文本前面的縮進著色，在每個步驟上交替使用四種不同的顏色。
28.gitignore 添加文件或者文件夾到gitignore，安裝了之后在導航欄右鍵就可以直接add to gitignore
29.minapp 微信小程序標簽、屬性的智能補全
30.Project Manager 項目管理，可以快速的切換項目
32.Docker
33.Eslint
34.Turbo Console Log ctrl+alt+L 可以快速生成console語句
35.Live Sass Compiler 安裝插件之后VSCode的下方會有個“Watch Sass”按鈕，可以實現sass的實現編譯預覽
36.Easy less
37.Prettier
3.設置默認瀏覽器
導航欄（文件=>首選項=>設置）
在搜索框中輸入“open-in-browser.default”，然后設置自己想要的默認瀏覽器就可以了，一般情況下用“chrome”，火狐的話設置為“firefox”，然后crtl+s進行保存就可以了。
4.用戶代碼片段
文件=》首選項=》用戶代碼片段
新建全局代碼片段
事先定義一段代碼，然后通過關鍵字去觸發
prefix指的是片段觸發名稱，body里放的是代碼片段
description是代碼片段的描述
1指的是代碼片段生成后光標所在的位置，用tab可以進行快速的切換
5.調節左側導航欄字體大小
在Visual Studio Code的安裝目錄下依此找到 Microsoft VS Code\resources\app\out\vs\workbench\ 目錄下的workbench.main.css文件，打開搜索 .monaco-workbench>.part>.content
其后面會找到(font-size:16px)，將其改成自己想要的字號，然后重啟vscode，就修改完成了。
6.修改格式化代碼樣式
安裝上面的所有插件后，在使用中會發現一個問題就是使用shift+alt+F快捷鍵格式化代碼，字符串的引用會自動變成雙引號，語句結尾也會自動加上分號，這不符合使用習慣，解決方法：
文件=>首選項=>設置，搜索“vetur.format.defaultFormatterOptions”，然后點擊”在settings.json中編輯“，在"vetur.format.defaultFormatterOptions"中添加
{
"singleQuote": true,
"semi": false
}
7.Eslint插件和settings sync插件
vscode可以安裝 eslint 插件，用來自動的檢測不符合eslint規則的地方，注意需要配合eslint庫使用。
在eslint的rules里面一條條的添加規則太麻煩，可以安裝相關插件，引用這個插件之后，相關規則就會自動引入，eslint-plugin-vue
eslint.vuejs.org/user-guide/#installation
vscode配置插件保存代碼自動按照eslint規則格式化代碼
ctrl+shift+p調出來快捷搜索 首選項=>打開工作區設置，搜索auto單詞
擴展=>eslint ，auto fix on save 打上勾
接下來ctrl+shift+p調出來快捷搜索 首選項=>打開工作區設置(JSON)，這時候打開的是settings.json的而文件，可以安裝一個插件，用來配置這個文件，settings sync，安裝后登陸github，可以自動上傳我們的配置
點擊edit configration
輸入相關gist 可以拉取已配置好的代碼
接下來，下載配置
拉取了別人的配置，想要更新一下，并且變成自己的配置
此時進入插件頁面，可以登陸github，然后更新配置代碼后，
高級配置里面可以將自己的gist上傳并公開分享
8.常用快捷鍵
alt+shift+上箭頭或者下箭頭：快捷復制當前行
alt+shift+d：快速拉取出多個光標
alt+G：快速跳行
