『壹』 vscode插件快捷鍵點擊是另一個軟體
，希望可以幫助各位碼農鋒利自己的武器。
快捷鍵器篇
窗口文件相關快捷鍵
新建文件
Ctrl+N
文件之間切換貼
Ctrl+Tab
打開一個新的VS Code編輯器
Ctrl+Shift+N
關閉當前窗口
Ctrl+W
關閉當前的VS Code編輯器
Ctrl+Shift+W
切出一個新的編輯器窗口（最多3個)
Ctrl+
切換左中右3個編輯器窗口的快捷鍵
Ctrl+1 Ctrl+2 Ctrl+3
全屏顯示
F11
放大或縮小(以編輯器左上角為基準)
Ctrl +/-
側邊欄顯示或隱藏
Ctrl+B
顯示 Debug
Ctrl+Shift+D
顯示 Output
Ctrl+Shift+U
搬磚相關快捷鍵
復制
Ctrl+C
剪切
Ctrl+X
粘貼
Ctrl+V
代碼行向左或向右縮進
Ctrl+[ 、 Ctrl+]
代碼格式化
Shift+Alt+F
向上或向下移動一行
Alt+Up 或 Alt+Down
向上或向下復制一行
Shift+Alt+Up 或 Shift+Alt+Down
在當前行下方插入一行
Ctrl+Enter
在當前行上方插入一行
Ctrl+Shift+Enter
移動到行首
Home
移動到行尾
End
移動到文件雹臘結尾
Ctrl+End
移動到文件開頭
Ctrl+Home
選擇從游標到行尾的內容
Shift+End
選擇從游標到行首的內容
Shift+Home
刪除游標右側的所有內容(當前行)
Ctrl+Delete
刪除當前行
ctrl+shift+k
下一個匹配的也被選中
Ctrl+D
回退上一個游標操作
Ctrl+U
可能有的小夥伴會說，這快捷鍵也太多了吧，但是這僅僅是冰山一角。不過各位小夥伴也不要慌張，vscode同樣也提供了非常人性化的自定義快捷鍵功能。那到底怎麼自定義尼？下面奉上一張寶圖，大家就一目瞭然了。源源滑
看到這里，可能很多小夥伴會有疑惑，為什麼我的編輯器是中文的，而你的是英文尼？這就和我們接下來要說的常用插件有關了。帶我慢慢道來。
插件篇
編輯器常用插件
Chinese (Simplified) Language Pack for Visual Studio Code
安裝這個插件就可以把編譯器原始的英文界面更改為中文界面了。
background
編碼搬磚的過程，無疑是相當枯燥乏味的，但是如果加上這樣的小姐姐尼？是不是一下就不枯燥了？
答案是肯定的。也很幸運的有background這個插件，安裝之後會有一個默認的背景圖片，如圖所示：
這個時候，我們可以在修改設置中搜索background修改設置json文件，如下所示：
修改代碼奉上裂慧：
{
「background.useDefault」: false,
「background.style」: {
「content」:"』』",
「pointer-events」:「none」,
「position」:「absolute」,//圖片位置
「width」:「100%」,
「height」:「100%」,
「z-index」:「99999」,
「background.repeat」:「no-repeat」,
「background-size」:「100%,100%」,//圖片大小
「opacity」:0.2 //透明度
},
「background.customImages」: [//此處配置自己對應的背景圖
「file:///F:/IDE_bg/qingxin.jpg」
],
}
Rainbow Fart
背景圖片有了，那麼能不能也有聲音尼？我可以肯定的告訴你，可以。只需要安裝Rainbow Fart這個插件，然後啟動這個插件就可以在編碼的過程中，出現小姐姐的聲音了。啟動方法如下：
在vscode軟體中使用ctrl+shift+p 打開命令面板，復制Enable Rainbow Fart 後回車，右下方彈出的提示後點擊open按鈕，或直接訪問（http://127.0.0.1:7777/ ）,在彈出的頁面點擊授權，如下圖所示：
授權成功之後，就可以愉快的編碼了。
1
2
3
open in browser
在瀏覽器中打開頁面
Live Server
以伺服器的方式打開頁面
搬磚常用插件
Auto Close Tag
標簽自動閉合
Auto Rename Tag
開始標簽和結束標簽自動進行同步
Bracket Pair Colorizer
會已不同顏色和橫線顯示括弧的范圍
HTML Snippets
快速的生成html標簽
JS-CSS-HTML Formatter
代碼格式化
Color Info
顏色提示插件，只需要將滑鼠放在顏色值上懸停，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息啦。
jQuery Code Snippets
jQuery自動提示
Path Autocomplete
路徑自動補齊
ESLint
檢測JS必備
Html Css Support
在標簽新增class的時候會提示之前寫過的class
Beautify / Beautify css/sass/scss/less
樣式格式化（兩個的區別還沒感受出來）
Vetur
更多內容請見原文，原文轉載自：https://blog.csdn.net/weixin_44519496/article/details/118280239
分類: 前端
標簽: vscode常用插件快捷鍵, 前端
好文要頂 關注我 收藏該文
忘川信使
粉絲 - 0 關注 - 0
+加關注
00
» 下一篇： 面試寶典帶你走向人生巔峰
posted @ 2022-03-28 16:33 忘川信使 閱讀(324) 評論(0) 編輯 收藏 舉報
『貳』 VScode使用筆記
1. 設置
方法一：在UI界面設置，方法是：設置鍵->Settings
方法二：也可以打開setting.json文件進行設置，方法是：設置鍵->Command Palette，在選擇框的下拉列表中選擇「Preferences: Open Settings (JSON)」
2. 控制台
按Ctrl+Shift+P打開VSCode控制台，在控制台中輸入命令可以實現很多功能。
3. 打開工程
在VSCode界面點擊File->Open Folder，然後選擇文件夾
在終端中運行code [project path]
4. 配置文件
用VSCode打開一個工程後，它會在工程中建一個.vscode文件夾，裡面有三個文件
tasks.json (compiler build settings)
launch.json (debugger settings)
c_cpp_properties.json (compiler path and IntelliSense settings)
5. 環境配置
c_cpp_properties.json文件主要是設置系統級的大環境，基本上不用改，除非有第三方庫
{
"configurations": [
{
"name": "Linux",
"browse": {
"path": [
"${workspaceFolder}"
],
"limitSymbolsToIncludedHeaders": true
},
"includePath": [
"${workspaceFolder}"
],
"defines": [],
"compilerPath": "/usr/bin/gcc",
"cStandard": "c11",
"cppStandard": "c++17",
"intelliSenseMode": "clang-x64"
}
],
"version": 4
}
6. 編譯
6.1. 自定義編譯
主要通過 設置任務（動作）來實現。
tasks.json文件相當於vscode的.sh或.bat文件，用來記錄一系列操作的宏。
一系列動作，那就可以用來設置 如何編譯文件，如何 運行文件，幾乎.sh能乾的都可以干。
打開控制台，輸入Tasks: Configure Tasks，再選擇Create tasks.json file from templates，選擇Others模板，就自動生成了一個tasks.json文件，編寫參數來調整設置。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "build1111", //你的設置文件名，可隨便起
"type": "shell", //運行task的平台，一般是shell
"command": "bash ./build.sh", //普通的shell命令，運行你的.sh文件
"group": {
『叄』 vscode的同步代碼回推到暫存區
vscode的同步代碼回推到暫存區方法：
1、在vscode中雀岩提交代碼到倉庫賀滾。
2、點擊+號，把所有文件提交到暫存區。
3、打開菜單選擇，提交已暫存。
4、按提示隨便在消息框里輸入一個消息，再按頃拍御ctrl+enter提交。
5、把所有暫存的代碼push雲端即可。
『肆』 VSCode後退、前進(返回上一處游標，下一處游標)快捷鍵
Mac
後退(返回上一處游標咐銷)：ctrl+-
前進(返衡汪游回下一處游標)：陵御ctrl+shift+-