俗話說，工欲善其事必先利其器，我們碼農的器是什麼尼？沒錯，就是我們親愛的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/ ）,在彈出的頁面點擊授權，如下圖所示：
授權成功之後，就可以愉快的編碼了。
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
Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue插件，Vue開發者必備。
vscode-icons
給不同的文件類型添加圖標
CSS Pee
CSSPeak通過識別和枚舉已應用的不同樣式以幫助開發者處理標記語言的類字符串和ID。這很方便，因爲開發者不再需要在HTML和CSS文件之間頻繁跳轉。
NPM
所有開發者應該都認識NPM，其全稱是Node Package Manager（node包管理器）。該擴展插件有助於管理Package.json，當生產環境依賴包未安裝時會發出警告，並確保安裝的版本正確。
Live Sass Compiler
LiveSass Compiler雖然很小，但功能極其強大，它可以將SASS /SCSS文件實時編譯爲CSS文件，並在瀏覽器中展示已編譯樣式的實時預覽。
Debugger for Chrome
對許多開發者而言，Chrome是開發、測試和調試代碼的首選瀏覽器。通過這個VS Code的官方擴展插件，開發者可以直接在VS Code中進行以上操作——沒什麼能比這更棒了！
JavaScript Code Snippets
用於編寫JavaScript，Typescript，React，Vue，HHTML等的代碼片段，以及ES6語法支持
以上就是我整理的一些vscode常用的快捷鍵和插件了，希望可以幫助所有搬磚的同胞們鋒利自己的武器。
最後，如果大家想和我一起討論探索前端，可以關注一下我的公衆號，不定期更新幹貨，更可加入技術羣交流討論。
