VSCode 經常使用插件

時間 2019-11-12

標籤 vscode 經常使用插件简体版

原文原文鏈接

VSCode 經常使用插件

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎全部主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片斷、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發作了優化。軟件跨平臺支持 Win、Mac 以及 Linux。css

VSC中文網：http://www.vscode.org/html

vscode 做爲一款逐漸火熱的編輯器。它的特色免費、開源、多平臺，以及集成git，代碼調試，插件豐富等有點，被你們逐漸熟知和承認。前端

這裏主要說一下前端經常使用插件。vue

Auto Rename Tag

　　自動重命名配對的HTML / XML標籤react

bachground

　　修改背景，設置編輯器界面的背景圖片。可是好像如今會出錯，具體設置內容在vsc找到插件看詳細信息。jquery

Bootstrap 4 & Font awesome snippets

　　bootstrap4和font awesome 快速引用和代碼生成。linux

Color-Highlight

　　在編輯器中高亮顯示顏色。git

Color Picker

　　代碼的顏色選擇器。github

Css Peek

　　能在源代碼中的字符串中找到對應的css（類和ID）。顯示在那個css文件裏，還有在第幾行。npm

Csscomb

　　css 、less、sass 的代碼格式化。

Debugger for Chrome

　　js調試的插件，前端項目在Chrome中運行起來以後，能夠直接在VSCode中打斷點、查看輸出、查看控制檯，詳細配置見插件說明。

Document This

　　爲js文件生成文檔的代碼註釋。

ESLint

　　檢查Javascript編程時的語法錯誤。

Git Easy

　　增長了vscode中自帶的git操做，安裝後按F1調出控制檯，輸入git easy [options]完成git操做，代替git bash。

Git History

　　查看git日誌以及圖表和詳細信息。
　　查看文件的歷史記錄（Git日誌）或文件中的行歷史（Git Blame）

Guides

　　代碼的標籤對齊線。

HTML CSS Class Completion

　　爲基於工做空間上的CSS文件的HTML類屬性提供CSS類名稱提示。

HTML Boilerplate

　　提供生成標準HTML樣板代碼。

HTML CSS support

　　css 自動補齊

HTML Snippets

　　支持HTML5標籤提示

JavaScript (ES6) snippets

　　支持JavaScript ES6 語法

jQuery Code Snippets

　　jq代碼段提示。

JS-CSS-HTML Formatter

　　代碼格式化。

Lodash

　　lodash 函數提示。

Lorem ipsum

　　快速填充文本

Npm Intellisense

　　在import語句中自動完成npm模塊引入的代碼插件。

open in browser

　　在瀏覽器中打開，安裝後在左側目錄中右鍵點擊會出現 open in browser 選項。

Path Intellisense

　　文件路徑提示。

Settings Sync

　　編輯器設置同步，包括插件，配置等。

　　詳情點擊=》https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

VS Code CSS Comments

　　css代碼註釋。

vscode-browser-plugin

　　在編輯器內預覽HTML，

　　經過開啓端口(3000)監聽當前打開項目的根目錄，在編輯器內預覽網站，省去了頻繁切換瀏覽器、編輯器看頁面效果，修改代碼後自動刷新頁面。

vscode-icons

　　文件圖標。

Vue 2 Snippets

　　　vue 代碼提示，高亮。

　　（ps：使用其餘框架，直接搜就好，像是react，angular，就會出現相關的代碼提示和語法支持經常使用插件）

主題插件：

　　Material-theme；

　　monokai-light;

　　Monokai++;

　　One Dark Theme;

　　　每一個人審美觀不一樣

如下內容轉自：https://zhuanlan.zhihu.com/p/22880087

vsc經常使用快捷鍵：

同時打開多個窗口（查看多個項目）

打開一個新窗口： Ctrl+Shift+N
關閉窗口： Ctrl+Shift+W

同時打開多個編輯器（查看多個文件）

新建文件 Ctrl+N
歷史打開文件之間切換 Ctrl+Tab，Alt+Left，Alt+Right
切出一個新的編輯器（最多3個）Ctrl+\，也能夠按住Ctrl鼠標點擊Explorer裏的文件名
左中右3個編輯器的快捷鍵Ctrl+1 Ctrl+2 Ctrl+3
3個編輯器之間循環切換 Ctrl+`
編輯器換位置，Ctrl+k而後按Left或Right

格式調整

代碼行縮進Ctrl+[， Ctrl+]
摺疊打開代碼塊 Ctrl+Shift+[， Ctrl+Shift+]
Ctrl+C Ctrl+V若是不選中，默認複製或剪切一整行
代碼格式化：Shift+Alt+F，或Ctrl+Shift+P後輸入format code
修剪空格Ctrl+Shift+X
上下移動一行： Alt+Up 或 Alt+Down
向上向下複製一行： Shift+Alt+Up或Shift+Alt+Down
在當前行下邊插入一行Ctrl+Enter
在當前行上方插入一行Ctrl+Shift+Enter

光標相關

移動到行首：Home
移動到行尾：End
移動到文件結尾：Ctrl+End
移動到文件開頭：Ctrl+Home
移動到後半個括號 Ctrl+Shift+]
選中當前行Ctrl+i（雙擊）
選擇從光標到行尾Shift+End
選擇從行首到光標處Shift+Home
刪除光標右側的全部字Ctrl+Delete
Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right
Multi-Cursor：能夠連續選擇多處，而後一塊兒修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
同時選中全部匹配的Ctrl+Shift+L
Ctrl+D下一個匹配的也被選中(被我自定義成刪除當前行了，見下邊Ctrl+Shift+K)
回退上一個光標操做Ctrl+U

重構代碼

跳轉到定義處：F12
定義處縮略圖：只看一眼而不跳轉過去Alt+F12
列出全部的引用：Shift+F12
同時修改本文件中全部匹配的：Ctrl+F12
重命名：好比要修改一個方法名，能夠選中後按F2，輸入新的名字，回車，會發現全部的文件都修改過了。
跳轉到下一個Error或Warning：當有多個錯誤時能夠按F8逐個跳轉
查看diff 在explorer裏選擇文件右鍵 Set file to compare，而後須要對比的文件上右鍵選擇Compare with 'file_name_you_chose'.

查找替換