1. 程式人生 > >vscode的使用教程(外掛、快捷鍵使用)

vscode的使用教程(外掛、快捷鍵使用)

2.常用外掛:

View In Browser
- 預覽頁面(ctrl+F1)

vscode-icons
- 側欄的圖示,對於一個有視覺強迫症的人是必須要的

HTML Snippets
- 支援HTML5的標籤提示

HTML CSS support
- css自動補齊

JS-CSS-HTML Formatter
格式化

jQuery Code Snippets
jquery 自動提示

Path Autocomplete
- 路徑自動補齊

Npm Intellisense
- npm包程式碼提示

ESLint
- 檢測JS必備

Debugger for Chrome


- 方便除錯
Auto Rename Tag
- 自動同步修改標籤

Bootstrap 3 Snippets
- bootstrap必備

Vue 2 Snippets
- vue必備

background
- 一個萌萌的外掛,可以自己設定vsc的背景圖

3.常用快捷鍵

(在快捷鍵部分, ⌘ 指 Command 鍵,⇧ 指 Shift 鍵,⌃ 指 Control 鍵,⌥ 指 Option/Alt 鍵。)

這裡主要就是實驗F1上的快捷鍵,一些我認為沒用的我就不列出來了。

向上(下)複製行 shift + alt + top(down)

向上(下)移動行* alt + top(down)*

新建一個視窗 ctrl + shift + N

行增加縮排: ctrl + [

行減少縮排 * ctrl + ]**

裁剪尾隨空格(去掉一行的末尾那些沒用的空格): ctrl + shift + x

強烈建議把這個啟用,這樣儲存的時候就會自動刪掉那些沒用的空格,在很多公司的程式碼規範裡都是不允許存在這些空格的。

顯示隱藏側邊欄:ctrl + B

拆分編輯器(最多拆分成三塊):ctrl + /按ctrl + 1(2,3)就可以在拆分後的編輯器裡切換

方法縮小ctrl +(-)

關閉編輯器 ctrl + W(F4)

切換編輯器 ctrl + shift + left(right)

也可以用 ctrl+1(2,3)

顯示和隱藏側邊欄 ctrl + B

切換全屏 F11

切換自動換行 alt + Z

顯示Git ctrl + shift + G

前提是你的專案必須是一個git專案

這個還是很有用的,有時候我們的螢幕不夠大,可是程式碼沒有自動換行,所以被遮住的程式碼就會看不到,但是你用這個快捷鍵就可以換行看到了。這個我是在使用者設定裡面設定成自動換行的。

修改使用者設定
把預設的使用者設定成適合我們自己的還是很重要的。

也很簡單,檔案 – 首選項 – 使用者設定,然後出來左邊的預設設定是不能改的,需要在右邊settings.json中覆蓋。

修改快捷鍵
檔案 – 首選項 – 鍵盤快捷方式,和修改使用者設定的時候一樣,找到你要修改的快捷鍵名字,右邊覆蓋就可以了,一些還沒有繫結快捷鍵的功能可以在左邊的最下面看到,然後快捷鍵的名字就是這個。