1. 程式人生 > >VS Code:讓你工作效率翻倍的23個外掛和23個編輯技巧

VS Code:讓你工作效率翻倍的23個外掛和23個編輯技巧

總結了一些平時常用且好用的 VS Code 的外掛和編輯技巧分享出來。

文章詳情可查閱我的部落格:lishaoy.net ,歡迎大家訪問。

外觀

主題

這裡我分享兩款主題:

  1. Material Theme

效果如圖:

Material Theme
Material Theme

  1. An Old Hope Theme

效果如圖:

An Old Hope Theme
An Old Hope Theme

圖示

  1. 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 字型的效果

關於 FiraCode-Medium 字型更多效果可查閱 github.com/tonsky/Fira… 地址。

程式碼管理

格式化

  1. Beautify :格式化的時候,給出格式化文字選項,如下

Beautify
Beautify

  1. Prettier :個人比較喜歡這個,看起來程式碼更清晰,如下

Prettier
Prettier

當然,大家可以自定義快捷鍵,也可以按 - - P 來搜尋相關命令

程式碼檢查

  1. ESLint :檢查 js 語法規範,你可以使用不同的規範,如 airbnbstandardgoogle
  2. TSLint :檢查 typescript 語法規範。
  3. Stylelint :檢查 CSS/SCSS/Less 語法規範。
  4. Markdownlint :檢查 markdown 語法規範。

自動補全

以下外掛點選連結可以檢視gif動圖,詳細瞭解具體功能。

  1. Emmet :大家應該很熟悉這個外掛了(很好用),VS Code 已經內建了,很到位。
  2. Auto Close Tag :自動閉合 html 等標籤 (</...>)。
  3. Auto Rename Tag :修改 html 標籤時,自動修改閉合標籤。
  4. Path Intellisense :自動提示補全路徑。

程式碼片段

  1. snippets :搭建可以自己安裝各種程式碼片段(vue、react、angular等),這裡就不列舉。

功能擴充套件

以下的功能擴充套件外掛大部分都有gif動圖,可點選連結瞭解詳細功能

  1. Bracket Pair Colorizer :讓程式碼的各種括號呈現不同的顏色。
  2. Code Runner :可以在編輯器裡直接執行程式碼,檢視結果。
  3. Color Picker :可以直接在編輯器裡開啟色板,選擇各種模式的顏色。
  4. Document This :可以給函式、類等自動的加上詳細的註釋。
  5. Git History :方便的檢視git版本管理的詳細資訊。
  6. Live Server :可以一鍵在本地啟動伺服器。
  7. Settings Sync :重點介紹下這個外掛,如果你有兩臺電腦(比如,家裡和公司)都使用 VS Code ,可是在公司或家裡對 VS Code 安裝了外掛或者修改了配置,回到家或公司又要重新弄一次,這個外掛就能解決問題,同步多臺電腦設定。

只需要把配置上傳到GitHub,在另一個地方下載配置即可,如下

Settings Sync
Settings Sync

  1. gi :可以給 .gitignore 檔案新增各種語言忽略檔案配置。
  2. Polacode :可以把程式碼生成圖片(有些地方發程式碼結構會亂也沒有程式碼高亮,這時候就可以生成圖片再發)。

編輯技巧

游標

  1. 把游標移到檔案的首部活尾部

⌘ - ↑ 或 ⌘ - ↓
⌘ - ↑ 或 ⌘ - ↓

  1. 把游標移動到行的首部或者尾部

⌘ - ← 或 ⌘ - →
⌘ - ← 或 ⌘ - →

  1. 按單詞移動

⌥ - ← 或 ⌥ - →
⌥ - ← 或 ⌥ - →

  1. 按單詞大小寫分解移動游標

⌥ - ⌃ - ← 或 ⌥ - ⌃ - →
⌥ - ⌃ - ← 或 ⌥ - ⌃ - →

選擇

  1. 選擇行以上或以下全部內容

⇧ - ⌘ - ↑ 或 ⇧ - ⌘ - ↓
⇧ - ⌘ - ↑ 或 ⇧ - ⌘ - ↓

  1. 選擇到行首或行尾的內容

⇧ - ⌘ - ← 或 ⇧ - ⌘ - →
⇧ - ⌘ - ← 或 ⇧ - ⌘ - →

  1. 按字母或單詞選擇
  • - - 按字母選擇
  • - - - - 按單詞選擇

⇧ - ← 、 ⇧ - → 或 ⇧ - ⌥ - ← 、 ⇧ - ⌥ - →
⇧ - ← 、 ⇧ - → 或 ⇧ - ⌥ - ← 、 ⇧ - ⌥ - →

  1. 伸縮選擇

⇧ - ⌃ - ⌘ - ← 或 ⇧ - ⌃ - ⌘ - →
⇧ - ⌃ - ⌘ - ← 或 ⇧ - ⌃ - ⌘ - →

  1. 選擇匹配單詞

⌘ - D 或 ⌘ - U
⌘ - D 或 ⌘ - U

  1. 向上或向下移動行

⌥ - ↑ 或 ⌥ - ↓
⌥ - ↑ 或 ⌥ - ↓

  1. 複製或刪除行

⌥ - ⇧ - ↓ 或 ⌘ - ⇧ - K
⌥ - ⇧ - ↓ 或 ⌘ - ⇧ - K

  1. 多行合併成一行

⌘ - J
⌘ - J

  1. 縮排或伸縮行

⌘ - [ 或 ⌘ - ]
⌘ - [ 或 ⌘ - ]

  1. 在當前行之上或下插入行

⌘ - ↩ 或 ⌘ - ⇧ - ↩
⌘ - ↩ 或 ⌘ - ⇧ - ↩

多行

  1. 滑鼠點選,多行編輯

選擇編輯點,按 退出多行編輯

⌘

  1. 使用快捷鍵多行編輯

⌘ - ⌥ - ↓ 或 ⌘ - ⌥ - ↑
⌘ - ⌥ - ↓ 或 ⌘ - ⌥ - ↑

  1. 在所選擇的行的結尾插入編輯點

⇧ - ⌥ - I
⇧ - ⌥ - I

  1. 選擇欄位

- 再選擇欄位

⇧ - ⌘
⇧ - ⌘

高階

  1. 檢視類或方法的定義
  • 點選,可以在新頁面檢視
  • - - 點選,可以在新組檢視
  • - F12 點選,可以在當前頁面檢視

檢視定義
檢視定義

  1. 摺疊程式碼

⌥ - ⌘ - \] 或 ⌥ - ⌘ - \[
⌥ - ⌘ - ] 或 ⌥ - ⌘ - [

  1. 去掉選擇行的尾部空格

⌘ - K 、 ⌘ - X
⌘ - K 、 ⌘ - X

  1. 定位到指定行號

⌃ - G
⌃ - G

  1. 在檔案裡查詢類或方法

@
@

最後,如果記不住這些快捷鍵,可以按 - K - S 搜尋對應快捷鍵繫結

搜尋快捷鍵
搜尋快捷鍵