總結(jié)了一些平時(shí)常用且好用的 VS Code 的插件和編輯技巧分享出來录淡。
文章詳情可查閱我的博客：https://lishaoy.net
外觀
主題
這里我分享兩款主題：
效果如圖：
效果如圖：
圖標(biāo)
- Material Icon Theme 當(dāng)然殖侵，這兩款主題的文件管理器（左側(cè)）的 icon 小圖標(biāo)使用的是 Material Icon Theme
字體及其他
其他和外觀相關(guān)的設(shè)置如下：
{
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": false,
"workbench.activityBar.visible": false,
"workbench.iconTheme": "eq-material-theme-icons-darker",
"workbench.colorCustomizations": {},
"materialTheme.cache.workbench.settings": {
"themeColours": "Darker",
"accentPrevious": "Acid Lime"
},
"workbench.colorTheme": "Material Theme Darker",
"material-icon-theme.angular.iconsEnabled": true,
"material-icon-theme.folders.icons": "specific",
"editor.lineHeight": 24,
"editor.fontLigatures": true,
"editor.fontFamily": "FiraCode-Medium"
}
特別注意的是 "editor.lineHeight": 24, 和 "editor.fontFamily": "FiraCode-Medium" 采郎。
"editor.lineHeight": 24, ： 設(shè)置代碼的行間距，這里比默認(rèn)的稍大些倍靡，就這一點(diǎn)小小的改變堕澄，讓代碼看起來清爽整潔膜蛔。
"editor.fontFamily": "FiraCode-Medium" ： 設(shè)置字體瀑志，這種字體會(huì)讓代碼看起來更形象生動(dòng)涩搓，如下
紅色豎線左邊是使用了 FiraCode-Medium 字體的效果，紅色豎線右邊是沒有使用 FiraCode-Medium 字體的效果
關(guān)于 FiraCode-Medium 字體更多效果可查閱 https://github.com/tonsky/FiraCode 地址劈猪。
代碼管理
格式化
- Beautify ：格式化的時(shí)候昧甘，給出格式化文本選項(xiàng)，如下
- Prettier ：個(gè)人比較喜歡這個(gè)岸霹，看起來代碼更清晰疾层，如下
當(dāng)然将饺，大家可以自定義快捷鍵贡避，也可以按 ? - ? - P 來搜索相關(guān)命令
代碼檢查
-
ESLint ：檢查
js語法規(guī)范，你可以使用不同的規(guī)范予弧，如 airbnb 刮吧、standard 、google掖蛤。 -
TSLint ：檢查
typescript語法規(guī)范杀捻。 -
Stylelint ：檢查
CSS/SCSS/Less語法規(guī)范。 -
Markdownlint ：檢查
markdown語法規(guī)范蚓庭。
自動(dòng)補(bǔ)全
以下插件點(diǎn)擊鏈接可以查看gif動(dòng)圖致讥，詳細(xì)了解具體功能。
- Emmet ：大家應(yīng)該很熟悉這個(gè)插件了（很好用）器赞，VS Code 已經(jīng)內(nèi)置了垢袱，很到位。
-
Auto Close Tag ：自動(dòng)閉合
html等標(biāo)簽 （</...>）港柜。 -
Auto Rename Tag ：修改
html標(biāo)簽時(shí)请契，自動(dòng)修改閉合標(biāo)簽。 - Path Intellisense ：自動(dòng)提示補(bǔ)全路徑夏醉。
代碼片段
- snippets ：搭建可以自己安裝各種代碼片段（vue爽锥、react、angular等）畔柔，這里就不列舉氯夷。
功能擴(kuò)展
以下的功能擴(kuò)展插件大部分都有g(shù)if動(dòng)圖，可點(diǎn)擊鏈接了解詳細(xì)功能
- Bracket Pair Colorizer ：讓代碼的各種括號(hào)呈現(xiàn)不同的顏色靶擦。
- Code Runner ：可以在編輯器里直接運(yùn)行代碼腮考，查看結(jié)果擎淤。
- Color Picker ：可以直接在編輯器里打開色板，選擇各種模式的顏色秸仙。
- Document This ：可以給函數(shù)嘴拢、類等自動(dòng)的加上詳細(xì)的注釋。
- Git History ：方便的查看git版本管理的詳細(xì)信息寂纪。
- Live Server ：可以一鍵在本地啟動(dòng)服務(wù)器席吴。
- Settings Sync ：重點(diǎn)介紹下這個(gè)插件，如果你有兩臺(tái)電腦（比如捞蛋，家里和公司）都使用 VS Code 孝冒，可是在公司或家里對(duì) VS Code 安裝了插件或者修改了配置，回到家或公司又要重新弄一次拟杉，這個(gè)插件就能解決問題庄涡，同步多臺(tái)電腦設(shè)置。
只需要把配置上傳到GitHub搬设，在另一個(gè)地方下載配置即可穴店，如下
-
gi ：可以給
.gitignore文件添加各種語言忽略文件配置。 - Polacode ：可以把代碼生成圖片（有些地方發(fā)代碼結(jié)構(gòu)會(huì)亂也沒有代碼高亮拿穴，這時(shí)候就可以生成圖片再發(fā)）泣洞。
編輯技巧
光標(biāo)
- 把光標(biāo)移到文件的首部活尾部
- 把光標(biāo)移動(dòng)到行的首部或者尾部
- 按單詞移動(dòng)
- 按單詞大小寫分解移動(dòng)光標(biāo)
選擇
- 選擇行以上或以下全部?jī)?nèi)容
- 選擇到行首或行尾的內(nèi)容
- 按字母或單詞選擇
- ? - ← 、 ? - → 按字母選擇
- ? - ? - ← 默色、 ? - ? - → 按單詞選擇
- 伸縮選擇
- 選擇匹配單詞
行
- 向上或向下移動(dòng)行
- 復(fù)制或刪除行
- 多行合并成一行
- 縮進(jìn)或伸縮行
![? - 或 ? - ]
- 在當(dāng)前行之上或下插入行
多行
- 鼠標(biāo)點(diǎn)擊腿宰，多行編輯
按 ? 選擇編輯點(diǎn)呕诉，按 ? 退出多行編輯
- 使用快捷鍵多行編輯
- 在所選擇的行的結(jié)尾插入編輯點(diǎn)
- 選擇欄位
按 ? - ? 再選擇欄位
高級(jí)
- 查看類或方法的定義
- 按 ? 點(diǎn)擊，可以在新頁面查看
- 按 ? - ? - ? 點(diǎn)擊吃度，可以在新組查看
- 按 ? - F12 點(diǎn)擊甩挫，可以在當(dāng)前頁面查看
- 折疊代碼
- 去掉選擇行的尾部空格
- 定位到指定行號(hào)
- 在文件里查找類或方法
最后规肴，如果記不住這些快捷鍵捶闸，可以按 ? - K 、 ? - S 搜索對(duì)應(yīng)快捷鍵綁定
