VS code 外掛推薦

Lawiet發表於2019-03-03

經歷:

最近sublime和webstorm的序列號頻頻失效,經常在關鍵時候掉鏈子,深有體會,剛好身邊有朋友也有使用VS code,對比atom,sublime,webstorm這些編輯器,個人覺得VS code是一款不錯編輯器,比sublime外掛多,比Atom的介面好看,比webstorm更輕量級。可謂聚齊各家優點於一身,關鍵還 免費 免費 免費,再也不用為編輯器付費而困擾,還有向右大大看齊

image.png

Settings Sync

同步配置,再不同主機上,一勞永逸

  1. 在GitHub上建立gist
  2. 在設定裡面配置gist命牌即可

好訊息,一鍵下載怎麼多外掛想不想學(搞得像推銷一樣,哈哈)

下載Settings Sync外掛後重啟 ctrl + shift + p 然後輸入sync 然後選擇高階選項 → 從公共配置裡下載gist 然後在按ctrl + shift + p 輸入sync 選擇下載配置複製這串程式碼進去 d3bc45d8096f6bc3d9d46c69ed7052cd OK,完事 (可能還有一些人看不懂,過後傳GIF操作圖,我先溜了)

HTML Snippets

超級實用且初級的 H5程式碼片段以及提示

Atom Keymap

Sublime Text Keymap and Settings Importer

IntelliJ IDEA Keybindings

快捷鍵習慣替換(選一,多個會衝突)

Color-Highlight

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

Guides

程式碼的標籤對齊線。

HTML CSS support

css 自動補齊

Npm Intellisense

在import語句中自動完成npm模組引入的程式碼外掛

Debugger for Chrome

讓 vscode 對映 chrome 的 debug功能,靜態頁面都可以用 vscode 來打斷點除錯

background

設定背景

beautify

在Visual Studio程式碼中美化JavaScript,JSON,CSS,Sass和HTML。

Auto Close Tag

自動閉合HTML標籤

###Auto Rename Tag  修改HTML標籤時,自動修改匹配的標籤

Bracket Pair Colorizer

讓括號擁有獨立的顏色,易於區分

Open-In-Browser

由於 VSCode 沒有提供直接在瀏覽器中開啟檔案的內建介面,所以此外掛可以開啟命令皮膚選項。

Live Server

用於伺服器端頁面的Live Server,如PHP

Indenticator

縮排高亮

IntelliSense for CSS class names

CSS類名智慧命名提示

JavaScript (ES6) code snippets

ES6語法提示

Path Intellisense

編輯器中輸入路徑時,自動補全

Git History

檢視和搜尋git日誌以及圖表和細節。檢視檔案的前一個副本。檢視和搜尋歷史

CSS Peek

能在原始碼中的字串中找到對應的css(類和ID)。顯示在那個css檔案裡,還有在第幾行。

Easy WXLESS

微信小程式WXSS檔案專用,儲存可自動生成並同步編譯成同名css檔案

px2rem

px值轉rem

Vue外掛

vetur

語法高亮、智慧感知、Emmet 注意vue檔案程式碼格式化,需要在首選項-設定-使用者設定新增這行程式碼

    "vetur.format.defaultFormatter.html": "js-beautify-html", //vue中HTML部分格式化
複製程式碼

Vue 2 Snippets

基於最新的 Vue 官方語法高亮檔案新增了語法高亮,並且依據 Vue 2 的 API 新增了程式碼補全

vscode-element-helper

Element-UI 庫程式碼提醒 主題推薦:淺色調

Brackets Light Pro

Brackets Light Pro.png

Quiet Light

image.png
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'. 查詢替換

查詢 Ctrl+F 查詢替換 Ctrl+H 整個資料夾中查詢 Ctrl+Shift+F

參考文件: VS Code 使用小技巧

相關文章