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