鋒利碼農武器之vscode

俗話說，工欲善其事必先利其器，咱們碼農的器是什麼尼？沒錯，就是咱們親愛的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經常使用的快捷鍵和插件了，但願能夠幫助全部搬磚的同胞們鋒利本身的武器。 最後，若是你們想和我一塊兒討論探索前端，能夠關注一下個人公衆號，不按期更新干貨，更可加入技術羣交流討論。

本文使用 mdnice 排版