VS Code
總結了一些平時常用且好用的 VS Code 的插件和編輯技巧分享出來。
文章詳情可查閱我的博客:https://lishaoy.net
外觀
主題
這里我分享兩款主題:
效果如圖:
Material Theme
效果如圖:
An Old Hope Theme
圖標
- Material Icon Theme 當然,這兩款主題的文件管理器(左側)的 icon 小圖標使用的是 Material Icon Theme
字體及其他
其他和外觀相關的設置如下:
{
"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,
: 設置代碼的行間距,這里比默認的稍大些,就這一點小小的改變,讓代碼看起來清爽整潔。
"editor.fontFamily": "FiraCode-Medium"
: 設置字體,這種字體會讓代碼看起來更形象生動,如下
no-shadow
紅色豎線左邊是使用了 FiraCode-Medium 字體的效果,紅色豎線右邊是沒有使用 FiraCode-Medium 字體的效果
關于 FiraCode-Medium 字體更多效果可查閱 https://github.com/tonsky/FiraCode 地址。
代碼管理
格式化
- Beautify :格式化的時候,給出格式化文本選項,如下
Beautify
- Prettier :個人比較喜歡這個,看起來代碼更清晰,如下
Prettier
當然,大家可以自定義快捷鍵,也可以按 ? - ? - P 來搜索相關命令
代碼檢查
-
ESLint :檢查
js
語法規范,你可以使用不同的規范,如 airbnb 、standard 、google。 -
TSLint :檢查
typescript
語法規范。 -
Stylelint :檢查
CSS/SCSS/Less
語法規范。 -
Markdownlint :檢查
markdown
語法規范。
自動補全
以下插件點擊鏈接可以查看gif動圖,詳細了解具體功能。
- Emmet :大家應該很熟悉這個插件了(很好用),VS Code 已經內置了,很到位。
-
Auto Close Tag :自動閉合
html
等標簽 (</...>)。 -
Auto Rename Tag :修改
html
標簽時,自動修改閉合標簽。 - Path Intellisense :自動提示補全路徑。
代碼片段
- snippets :搭建可以自己安裝各種代碼片段(vue、react、angular等),這里就不列舉。
功能擴展
以下的功能擴展插件大部分都有gif動圖,可點擊鏈接了解詳細功能
- Bracket Pair Colorizer :讓代碼的各種括號呈現不同的顏色。
- Code Runner :可以在編輯器里直接運行代碼,查看結果。
- Color Picker :可以直接在編輯器里打開色板,選擇各種模式的顏色。
- Document This :可以給函數、類等自動的加上詳細的注釋。
- Git History :方便的查看git版本管理的詳細信息。
- Live Server :可以一鍵在本地啟動服務器。
- Settings Sync :重點介紹下這個插件,如果你有兩臺電腦(比如,家里和公司)都使用 VS Code ,可是在公司或家里對 VS Code 安裝了插件或者修改了配置,回到家或公司又要重新弄一次,這個插件就能解決問題,同步多臺電腦設置。
只需要把配置上傳到GitHub,在另一個地方下載配置即可,如下
Settings Sync
編輯技巧
光標
- 把光標移到文件的首部活尾部
? - ↑ 或 ? - ↓
- 把光標移動到行的首部或者尾部
? - ← 或 ? - →
- 按單詞移動
? - ← 或 ? - →
- 按單詞大小寫分解移動光標
? - ? - ← 或 ? - ? - →
選擇
- 選擇行以上或以下全部內容
? - ? - ↑ 或 ? - ? - ↓
- 選擇到行首或行尾的內容
? - ? - ← 或 ? - ? - →
- 按字母或單詞選擇
- ? - ← 、 ? - → 按字母選擇
- ? - ? - ← 、 ? - ? - → 按單詞選擇
? - ← 、 ? - → 或 ? - ? - ← 、 ? - ? - →
- 伸縮選擇
? - ? - ? - ← 或 ? - ? - ? - →
- 選擇匹配單詞
? - D 或 ? - U
行
- 向上或向下移動行
? - ↑ 或 ? - ↓
- 復制或刪除行
? - ? - ↓ 或 ? - ? - K
- 多行合并成一行
? - J
- 縮進或伸縮行
![? - 或 ? - ]
- 在當前行之上或下插入行
? - ? 或 ? - ? - ?
多行
- 鼠標點擊,多行編輯
按 ? 選擇編輯點,按 ? 退出多行編輯
?
- 使用快捷鍵多行編輯
? - ? - ↓ 或 ? - ? - ↑
- 在所選擇的行的結尾插入編輯點
? - ? - I
- 選擇欄位
按 ? - ? 再選擇欄位
? - ?
高級
- 查看類或方法的定義
- 按 ? 點擊,可以在新頁面查看
- 按 ? - ? - ? 點擊,可以在新組查看
- 按 ? - F12 點擊,可以在當前頁面查看
查看定義
- 折疊代碼
? - ? - ] 或 ? - ? - [
- 去掉選擇行的尾部空格
? - K 、 ? - X
- 定位到指定行號
? - G
- 在文件里查找類或方法
@
最后,如果記不住這些快捷鍵,可以按 ? - K 、 ? - S 搜索對應快捷鍵綁定
搜索快捷鍵