本文目錄：
- 1.漢化
- 2.常用插件
- 3.設(shè)置默認瀏覽器
- 4.用戶代碼片段
- 5.調(diào)節(jié)左側(cè)導航欄字體大小
- 6.修改格式化代碼樣式
- 7.Eslint插件和settings sync插件
- 8.常用快捷鍵
VS-code是微軟推出的一款免費的代碼編輯器，下載和安裝都十分簡單责循。之前用過hbuilder逮走、webstorm裸准、sublime霜威，感覺webstorm很好用泛啸，但是破解太復(fù)雜铝量，用了一段時間之后又需要重新尋找破解碼贡这，sublime沒太了解茬末，感覺是和vscode一樣的輕量編輯器，但不是免費的盖矫，hbuilder是免費的丽惭，用起來還可以，但是UI太丑了辈双，用起來感覺不“順滑”责掏，所以自從下載vs-code之后，我就決定湃望，以后的編輯器换衬，就用他了！
1.漢化
對英文不熟練的小伙伴首先第一件事當然就是漢化它证芭！
- 首先打開VSCode軟件冗疮，可以看到剛剛安裝的VSCode軟件默認使用的是英文語言環(huán)境。
- 接下來小編開始設(shè)置為中文語言環(huán)境檩帐，這里需要使用快捷鍵【Ctrl+Shift+P】來實現(xiàn)。
- 在彈出的搜索框中輸入【configure language】另萤，然后選擇搜索出來的【Configure Display Language】湃密。
- 然后就打開了locale.json文件，可以看到locale的屬性值為en四敞。
- 刪除locale后面的屬性直到冒號泛源，然后重新輸入冒號會自動出現(xiàn)代碼提示。
- 選擇“zh-CN”忿危。
- 然后保存locale.json文件达箍，重新啟動VSCode軟件，可以看到铺厨，并沒有變?yōu)橹形恼Z言環(huán)境缎玫，那是應(yīng)為locale.json中的代碼配置的意思是說軟件啟動加載語言配置包為中文硬纤，但是實際上剛剛安裝的VSCode并沒有中文語言包，所以這里并沒有顯示為中文語言環(huán)境赃磨。
- 在安裝插件的位置輸入Chinese筝家，然后選擇【Chinese （Simplified）Language Pack for Visual Studio Code】，然后點擊右側(cè)的【Install】邻辉。
- 安裝好中文語言包之后軟件會提示重啟VSCode溪王，點擊【Yes】重啟VSCode軟件。
- 重啟VSCode軟件之后就會看到我們熟悉的中文語言環(huán)境界面了值骇。
2.常用插件
VS-code因為是一款輕量的編輯器莹菱，所以自身的功能并不齊全，但是依賴于強大的生態(tài)支持吱瘩，通過豐富的插件配置道伟，我們可以把VS-code配置成我們想要的模樣。
插件常見名稱的關(guān)鍵詞
Snippets 智能提示的意思
Syntax語法的意思
highlight 高亮
懶人專用：xxxx Extension Pack xxxx的擴展包搅裙，快速組建vscode的開發(fā)環(huán)境
插件推薦：
- 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關(guān)閉標簽
8.Auto Rename Tag 自動重命名配對的HTML / XML標簽
9.HTML Snippets 代碼自動填充
10.Live Server 瀏覽器實時刷新
11.Bracket Pair Colorizer 給括號加上不同的顏色部逮，便于區(qū)分不同的區(qū)塊
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 實時預(yù)覽markdown娜汁，markdown使用者必備
17.Material Icon Theme 一款很不錯的圖標主題，支持更換不同色系的圖標
18.ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/react-router語法智能提示
19.document this 這個插件的作用是能夠讓你快速的對類和函數(shù)添加注釋兄朋，通過按兩次ctrl+alt+D按鍵可以快速增加注釋掐禁。
20.language PL/SQL 支持sql語句
21.code runner 安裝之后鼠標右鍵就可以運行代碼
22.gitlens 可以看到每一行代碼的作者
23.Visual Studio Intellicode 這個插件能幫助開發(fā)人員生成智能代碼補全提示，并且它內(nèi)置支持很多種編程語言颅和。
24.Synthwave ‘84 銀翼殺手風格的酷炫主題風格
25.Highlight Matching Tag突出顯示匹配的開始或結(jié)束標簽傅事。
26.Image preview懸停時顯示圖像預(yù)覽。
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”按鈕，可以實現(xiàn)sass的實現(xiàn)編譯預(yù)覽
36.Easy less
37.Prettier
3.設(shè)置默認瀏覽器
導航欄（文件=>首選項=>設(shè)置）
在搜索框中輸入“open-in-browser.default”案训，然后設(shè)置自己想要的默認瀏覽器就可以了买置，一般情況下用“chrome”，火狐的話設(shè)置為“firefox”强霎，然后crtl+s進行保存就可以了忿项。
4.用戶代碼片段
文件=》首選項=》用戶代碼片段
新建全局代碼片段
事先定義一段代碼，然后通過關(guān)鍵字去觸發(fā)
prefix指的是片段觸發(fā)名稱，body里放的是代碼片段
description是代碼片段的描述
1指的是代碼片段生成后光標所在的位置轩触，用tab可以進行快速的切換
5.調(diào)節(jié)左側(cè)導航欄字體大小
在Visual Studio Code的安裝目錄下依此找到 Microsoft VS Code\resources\app\out\vs\workbench\ 目錄下的workbench.main.css文件寞酿，打開搜索 .monaco-workbench>.part>.content
其后面會找到(font-size:16px)，將其改成自己想要的字號怕膛，然后重啟vscode熟嫩，就修改完成了。
6.修改格式化代碼樣式
安裝上面的所有插件后褐捻，在使用中會發(fā)現(xiàn)一個問題就是使用shift+alt+F快捷鍵格式化代碼掸茅，字符串的引用會自動變成雙引號，語句結(jié)尾也會自動加上分號柠逞，這不符合使用習慣昧狮，解決方法：
文件=>首選項=>設(shè)置，搜索“vetur.format.defaultFormatterOptions”板壮，然后點擊”在settings.json中編輯“逗鸣，在"vetur.format.defaultFormatterOptions"中添加
{
"singleQuote": true,
"semi": false
}
7.Eslint插件和settings sync插件
vscode可以安裝 eslint 插件，用來自動的檢測不符合eslint規(guī)則的地方绰精，注意需要配合eslint庫使用撒璧。
在eslint的rules里面一條條的添加規(guī)則太麻煩，可以安裝相關(guān)插件笨使，引用這個插件之后卿樱，相關(guān)規(guī)則就會自動引入，eslint-plugin-vue
eslint.vuejs.org/user-guide/#installation
vscode配置插件保存代碼自動按照eslint規(guī)則格式化代碼
ctrl+shift+p調(diào)出來快捷搜索 首選項=>打開工作區(qū)設(shè)置硫椰，搜索auto單詞
擴展=>eslint 繁调，auto fix on save 打上勾
接下來ctrl+shift+p調(diào)出來快捷搜索 首選項=>打開工作區(qū)設(shè)置(JSON)，這時候打開的是settings.json的而文件靶草，可以安裝一個插件蹄胰，用來配置這個文件，settings sync奕翔，安裝后登陸github裕寨，可以自動上傳我們的配置
點擊edit configration
輸入相關(guān)gist 可以拉取已配置好的代碼
接下來，下載配置
拉取了別人的配置派继，想要更新一下帮坚，并且變成自己的配置
此時進入插件頁面，可以登陸github互艾，然后更新配置代碼后，
高級配置里面可以將自己的gist上傳并公開分享
8.常用快捷鍵
alt+shift+上箭頭或者下箭頭：快捷復(fù)制當前行
alt+shift+d：快速拉取出多個光標
alt+G：快速跳行
