總結了一些平時經常使用且好用的 VS Code 的插件和編輯技巧分享出來。html
文章詳情可查閱個人博客：lishaoy.net ，歡迎你們訪問。vue
外觀
主題
這裏我分享兩款主題：react
效果如圖：git
Material Theme
效果如圖：github
An Old Hope Theme
圖標
- Material Icon Theme 固然，這兩款主題的文件管理器（左側）的 icon 小圖標使用的是 Material Icon Theme
字體及其餘
其餘和外觀相關的設置以下：web
{
"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" 。typescript
"editor.lineHeight": 24, ： 設置代碼的行間距，這裏比默認的稍大些，就這一點小小的改變，讓代碼看起來清爽整潔。npm
"editor.fontFamily": "FiraCode-Medium" ： 設置字體，這種字體會讓代碼看起來更形象生動，以下json
FiraCode-Medium字體
紅色豎線左邊是使用了 FiraCode-Medium 字體的效果，紅色豎線右邊是沒有使用 FiraCode-Medium 字體的效果服務器
關於 FiraCode-Medium 字體更多效果可查閱 github.com/tonsky/Fira… 地址。
代碼管理
格式化
- 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 搜索對應快捷鍵綁定
搜索快捷鍵