俗話說，工欲善其事必先利其器，我們碼農的器是什麼尼？沒錯，就是我們親愛的IDE，前端開發者最愛的編輯器應該是vscode了吧。但是我們要怎麼去鋒利它尼？不外乎就是熟悉它的使用方法、快捷鍵以及第三方的外掛。接下來，我整理了一些vscode常用的快捷鍵以及常用外掛，希望可以幫助各位碼農鋒利自己的武器。
快捷鍵器篇
視窗檔案相關快捷鍵
新建檔案

Ctrl+N
檔案之間切換貼

Ctrl+Tab
開啟一個新的VS Code編輯器

Ctrl+Shift+N
關閉當前視窗

Ctrl+W
關閉當前的VS Code編輯器

Ctrl+Shift+W
切出一個新的編輯器視窗（最多3個)

Ctrl+
切換左中右3個編輯器視窗的快捷鍵

Ctrl+1 Ctrl+2 Ctrl+3
全屏顯示

F11
放大或縮小(以編輯器左上角為基準)

Ctrl +/-
側邊欄顯示或隱藏

Ctrl+B
顯示 Debug

Ctrl+Shift+D
顯示 Output

Ctrl+Shift+U
搬磚相關快捷鍵
複製

Ctrl+C
剪下

Ctrl+X
貼上

Ctrl+V
程式碼行向左或向右縮排

Ctrl+[ 、 Ctrl+]
程式碼格式化

Shift+Alt+F
向上或向下移動一行

Alt+Up 或 Alt+Down
向上或向下複製一行

Shift+Alt+Up 或 Shift+Alt+Down
在當前行下方插入一行

Ctrl+Enter
在當前行上方插入一行

Ctrl+Shift+Enter
移動到行首

Home
移動到行尾

End
移動到檔案結尾

Ctrl+End
移動到檔案開頭

Ctrl+Home
選擇從游標到行尾的內容

Shift+End
選擇從游標到行首的內容

Shift+Home
刪除游標右側的所有內容(當前行)

Ctrl+Delete
刪除當前行

ctrl+shift+k
下一個匹配的也被選中

Ctrl+D
回退上一個游標操作

Ctrl+U

可能有的小夥伴會說，這快捷鍵也太多了吧，但是這僅僅是冰山一角。不過各位小夥伴也不要慌張，vscode同樣也提供了非常人性化的自定義快捷鍵功能。那到底怎麼自定義尼？下面奉上一張寶圖，大家就一目瞭然了。
看到這裡，可能很多小夥伴會有疑惑，為什麼我的編輯器是中文的，而你的是英文尼？這就和我們接下來要說的常用外掛有關了。帶我慢慢道來。
外掛篇
編輯器常用外掛
Chinese (Simplified) Language Pack for Visual Studio Code

安裝這個外掛就可以把編譯器原始的英文介面更改為中文介面了。
background

編碼搬磚的過程，無疑是相當枯燥乏味的，但是如果加上這樣的小姐姐尼？是不是一下就不枯燥了？

答案是肯定的。也很幸運的有background這個外掛，安裝之後會有一個預設的背景圖片，如圖所示：
這個時候，我們可以在修改設定中搜索background修改設定json檔案，如下所示：

修改程式碼奉上：

{
“background.useDefault”: false,
“background.style”: {
“content”:"’’",
“pointer-events”:“none”,
“position”:“absolute”,//圖片位置
“width”:“100%”,
“height”:“100%”,
“z-index”:“99999”,
“background.repeat”:“no-repeat”,
“background-size”:“100%,100%”,//圖片大小
“opacity”:0.2 //透明度
},
“background.customImages”: [//此處配置自己對應的背景圖
“file:///F:/IDE_bg/qingxin.jpg”
],

}

Rainbow Fart

背景圖片有了，那麼能不能也有聲音尼？我可以肯定的告訴你，可以。只需要安裝Rainbow Fart這個外掛，然後啟動這個外掛就可以在編碼的過程中，出現小姐姐的聲音了。啟動方法如下：

在vscode軟體中使用ctrl+shift+p 開啟命令面板，複製Enable Rainbow Fart 後回車，右下方彈出的提示後點擊open按鈕，或直接訪問（http://127.0.0.1:7777/ ）,在彈出的頁面點選授權，如下圖所示：

授權成功之後，就可以愉快的編碼了。

• 1
• 2
• 3

open in browser

在瀏覽器中開啟頁面
Live Server

以伺服器的方式開啟頁面
搬磚常用外掛
Auto Close Tag

標籤自動閉合
Auto Rename Tag

開始標籤和結束標籤自動進行同步
Bracket Pair Colorizer

會已不同顏色和橫線顯示括號的範圍
HTML Snippets

快速的生成html標籤
JS-CSS-HTML Formatter

程式碼格式化
Color Info

顏色提示外掛，只需要將滑鼠放在顏色值上懸停，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關資訊啦。
jQuery Code Snippets

jQuery自動提示
Path Autocomplete

路徑自動補齊
ESLint

檢測JS必備
Html Css Support

在標籤新增class的時候會提示之前寫過的class
Beautify / Beautify css/sass/scss/less

樣式格式化（兩個的區別還沒感受出來）
Vetur

更多內容請見原文，原文轉載自：https://blog.csdn.net/weixin_44519496/article/details/118280239