vscode常用快捷鍵操作及常用插件

一、vscode常用快捷鍵操作：

對於 ‘行’ 的操作：

重開一行：光標在行尾的話，回車即可；不在行尾，ctrl + enter 向下重開一行；ctrl+shift + enter 則是在上一行重開一行
刪除一行：光標沒有選擇內容時，ctrl + x 剪切一行；ctrl +shift + k 直接刪除一行
移動一行：alt + ↑ 向上移動一行；alt + ↓ 向下移動一行
復制一行：shift + alt + ↓ 向下復制一行；shift + alt + ↑ 向上復制一行
ctrl + z 回退
對於 詞 的操作：

選中一個詞：ctrl + d
搜索或者替換：

ctrl + f ：搜索
ctrl + alt + f： 替換
ctrl + shift + f：在項目內搜索
通過Ctrl + ` 可以打開或關閉終端

Ctrl+P 快速打開最近打開的文件

Ctrl+Shift+N 打開新的編輯器窗口

Ctrl+Shift+W 關閉編輯器

Home 光標跳轉到行頭

End 光標跳轉到行尾

Ctrl + Home 跳轉到頁頭

Ctrl + End 跳轉到頁尾

Ctrl + Shift + [ 折疊區域代碼

Ctrl + Shift + ] 展開區域代碼

Ctrl + / 添加關閉行注釋

Shift + Alt +A 塊區域注釋

二、常用插件

必備插件

1、View In Browser

在瀏覽器里預覽網頁必備。運行html文件

2、vscode-icons

改變編輯器里面的文件圖標

3、Bracket Pair Colorizer

給嵌套的各種括號加上不同的顏色。

4、Auto Rename Tag

自動修改匹配的 HTML 標簽。

5、Path Intellisense

智能路徑提示，可以在你輸入文件路徑時智能提示。

6、Markdown Preview

實時預覽 markdown。

7、stylelint

CSS / SCSS / Less 語法檢查

8、Import Cost

引入包大小計算,對於項目打包后體積掌握很有幫助

9、Prettier

比Beautify更好用的代碼格式化插件

Vue插件

vetur

語法高亮、智能感知、Emmet等

VueHelper

snippet代碼片段

其它插件

1、CSScomb

CSS 書寫順序規則，這里我推薦騰訊 AollyTeam 團隊的規范：

http://alloyteam.github.io/CodeGuide/#css-declaration-order​alloyteam.github.io

簡單說下這個插件怎么用：

在項目的根目錄下創建一個名為csscomb.json的文件，然后添加一些配置項。也可以將配置項寫入項目的 package.json 文件中的 csscombConfig 字段。

至於添加的配置項，CSScomb 提供了示例配置文件：

https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json​github.com

其中的 sort-order 就是 CSS 屬性書寫順序，可以按照自己遵循的規范設置，所以我直接替換成了騰訊的。

這個配置文件里面各個字段的作用可以戳這里查看：

csscomb/csscomb.js​github.com

2、Turbo Console Log

快捷添加 console.log，一鍵 注釋 / 啟用 / 刪除 所有 console.log。這也是我最常用的一個插件

簡單說下這個插件要用到的快捷鍵:

ctrl + alt + l 選中變量之后，使用這個快捷鍵生成 console.log
alt + shift + c 注釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 刪除所有 console.log

3、GitLens

詳細的 Git 提交日志。

Git 重度使用者必備，尤其是多人協作時：哪一行代碼，何時、何人提交都有記錄。

媽媽再也不用擔心我背鍋了！

4、css-auto-prefix

自動添加 CSS 私有前綴。

5、change-case

轉換命名風格。

6、CSS Peek

定位 CSS 類名。

7、vscode-json

處理 JSON 文件，用法看圖：

8、Regex Previewer

實時預覽正則表達式的效果。

 

轉自： https://zhuanlan.zhihu.com/p/113222681