VScode軟件入門
VScode用戶自定義代碼塊
用戶自定義代碼塊
{
/*
prefix :代碼片段名字，即輸入此名字就可以調用代碼片段。
body :這個是代碼段的主體.需要編寫的代碼放在這裏,
$1 :生成代碼後光標的初始位置.
$2 :生成代碼後光標的第二個位置,按tab鍵可進行快速切換,還可以有$3,$4,$5.....
${1,字符} :生成代碼後光標的初始位置(其中1表示光標開始的序號，字符表示生成代碼後光標會直接選中字符。)
description :代碼段描述,輸入名字後編輯器顯示的提示信息。
*/
// 換行：\r或者\n tab鍵製表符： \t
// 前綴部分沒有什麼好介紹的，唯一值得注意的是，前綴支持 N:1，也即允許多條前綴對應同一條代碼片。在使用時，只需將前綴定義爲數組即可，數組中的每一個前綴都能對應本代碼片。 "prefix": [ "header", "stub", "copyright"],
// 用「Tabstops」可以讓編輯器的指針在 snippet 內跳轉。使用 $1，$2 等指定光標位置。這些數字指定了光標跳轉的順序。特別地，$0表示最終光標位置。
"Vue": {
"prefix": "vue1", // 對應的是使用這個模板的快捷鍵
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">\n",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t$BLOCK_COMMENT_START IMPORT CSS $BLOCK_COMMENT_END\n",
"</head>\n",
"<body>",
"\t<div id=\"app\">\n\n\t</div>\n",
"\t$BLOCK_COMMENT_START IMPORT JS $BLOCK_COMMENT_END",
"\t<script src=\"../node_modules/vue/dist/vue.js\"></script>",
"\t<script>",
"\t\tlet vm = new Vue({",
"\t\t\tel: '#app',",
"\t\t\tdata: {\n\t\t\t\t$1\n\t\t\t},",
"\t\t\tcreated() {\n\t\t\t\t$2\n\t\t\t},",
"\t\t\tmethods: {\n\t\t\t\t$3\n\t\t\t},",
"\t\t\tfilters: {\n\t\t\t\t$4\n\t\t\t},",
"\t\t\tcomputed: {\n\t\t\t\t$5\n\t\t\t},",
"\t\t\twatch: {\n\t\t\t\t$6\n\t\t\t},",
"\t\t\tcomponents: {\n\t\t\t\t$7\n\t\t\t},",
"\t\t});",
"\t</script>",
"</body>\n",
"<html>"
],
"description": "vue模板1" // 模板的描述
}
}
VScode快捷鍵
全局
Ctrl + Shift + P, F1 顯示命令面板
Ctrl + P 快速打開
Ctrl + Shift + N 打開新窗口
Ctrl + Shift + W 關閉窗口
基本
Ctrl + X 剪切（未選中文本的情況下，剪切光標所在行）
Ctrl + C 複製（未選中文本的情況下，複製光標所在行）
Alt + Up 向上移動行
Alt + Down 向下移動行
Shift + Alt + Up 向上複製行
Shift + Alt + Down 向下複製行
Ctrl + Shift + K 刪除行
Ctrl + Enter 下一行插入
Ctrl + Shift + Enter 上一行插入
Ctrl + Shift + \ 跳轉到匹配的括號
Ctrl + ] 增加縮進
Ctrl + [ 減少縮進
Home 跳轉至行首
End 跳轉到行尾
Ctrl + Home 跳轉至文件開頭
Ctrl + End 跳轉至文件結尾
Ctrl + Up 按行向上滾動
Ctrl + Down 按行向下滾動
Alt + PgUp 按屏向上滾動
Alt + PgDown 按屏向下滾動
Ctrl + Shift + [ 摺疊代碼塊
Ctrl + Shift + ] 展開代碼塊
Ctrl + K Ctrl + [ 摺疊全部子代碼塊
Ctrl + K Ctrl + ] 展開全部子代碼塊
Ctrl + K Ctrl + 0 摺疊全部代碼塊
Ctrl + K Ctrl + J 展開全部代碼塊
Ctrl + K Ctrl + C 添加行註釋
Ctrl + K Ctrl + U 移除行註釋
Ctrl + / 添加、移除行註釋
Shift + Alt + A 添加、移除塊註釋
Alt + Z 自動換行、取消自動換行
多光標與選擇
Alt + 點擊 插入多個光標
Ctrl + Alt + Up 向上插入光標
Ctrl + Alt + Down 向下插入光標
Ctrl + U 撤銷上一個光標操作
Shift + Alt + I 在所選行的行尾插入光標
Ctrl + I 選中當前行
Ctrl + Shift + L 選中所有與當前選中內容相同部分
Ctrl + F2 選中所有與當前選中單詞相同的單詞
Shift + Alt + Left 摺疊選中
Shift + Alt + Right 展開選中
Shift + Alt + 拖動鼠標 選中代碼塊
Ctrl + Shift + Alt + Up 列選擇 向上
Ctrl + Shift + Alt + Down 列選擇 向下
Ctrl + Shift + Alt + Left 列選擇 向左
Ctrl + Shift + Alt + Right 列選擇 向右
Ctrl + Shift + Alt + PgUp 列選擇 向上翻頁
Ctrl + Shift + Alt + PgDown 列選擇 向下翻頁
查找替換
Ctrl + F 查找
Ctrl + H 替換
F3 查找下一個
Shift + F3 查找上一個
Alt + Enter 選中所有匹配項
Ctrl + D 向下選中相同內容
Ctrl + K Ctrl + D 移除前一個向下選中相同內容
Alt + C 區分大小寫
Alt + R 正則
Alt + W 完整匹配
進階
Ctrl + Space 打開建議
Ctrl + Shift + Space 參數提示
Tab Emmet插件縮寫補全
Shift + Alt + F 格式化
Ctrl + K Ctrl + F 格式化選中內容
F12 跳轉到聲明位置
Alt + F12 查看具體聲明內容
Ctrl + K F12 分屏查看具體聲明內容
Ctrl + . 快速修復
Shift + F12 顯示引用
F2 重命名符號
Ctrl + Shift + . 替換爲上一個值
Ctrl + Shift + , 替換爲下一個值
Ctrl + K Ctrl + X 刪除行尾多餘空格
Ctrl + K M 更改文件語言
導航
Ctrl + T 顯示所有符號
Ctrl + G 跳轉至某行
Ctrl + P 跳轉到某個文件
Ctrl + Shift + O 跳轉到某個符號
Ctrl + Shift + M 打開問題面板
F8 下一個錯誤或警告位置
Shift + F8 上一個錯誤或警告位置
Ctrl + Shift + Tab 編輯器歷史記錄
Alt + Left 後退
Alt + Right 前進
Ctrl + M 切換焦點
編輯器管理
Ctrl + F4, Ctrl + W 關閉編輯器
Ctrl + K F 關閉文件夾
Ctrl + \ 編輯器分屏
Ctrl + 1 切換到第一分組
Ctrl + 2 切換到第二分組
Ctrl + 3 切換到第三分組
Ctrl + K Ctrl + Left 切換到上一分組
Ctrl + K Ctrl + Right 切換到下一分組
Ctrl + Shift + PgUp 左移編輯器
Ctrl + Shift + PgDown 右移編輯器
Ctrl + K Left 激活左側編輯組
Ctrl + K Right 激活右側編輯組
文件管理
Ctrl + N 新建文件
Ctrl + O 打開文件
Ctrl + S 保存
Ctrl + Shift + S 另存爲
Ctrl + K S 全部保存
Ctrl + F4 關閉
Ctrl + K Ctrl + W 全部關閉
Ctrl + Shift + T 重新打開被關閉的編輯器
Ctrl + K Enter 保持打開
Ctrl + Tab 打開下一個
Ctrl + Shift + Tab 打開上一個
Ctrl + K P 複製當前文件路徑
Ctrl + K R 在資源管理器中查看當前文件
Ctrl + K O 新窗口打開當前文件
顯示
F11 全屏、退出全屏
Shift + Alt + 1 切換編輯器分屏方式（橫、豎）
Ctrl + + 放大
Ctrl + - 縮小
Ctrl + B 顯示、隱藏側邊欄
Ctrl + Shift + E 顯示資源管理器 或 切換焦點
Ctrl + Shift + F 顯示搜索框
Ctrl + Shift + G 顯示Git面板
Ctrl + Shift + D 顯示調試面板
Ctrl + Shift + X 顯示插件面板
Ctrl + Shift + H 全局搜索替換
Ctrl + Shift + J 顯示、隱藏高級搜索
Ctrl + Shift + C 打開新命令提示符窗口
Ctrl + Shift + U 顯示輸出面板
Ctrl + Shift + V 顯示、隱藏 Markdown預覽窗口
Ctrl + K V 分屏顯示 Markdown預覽窗口
調試
F9 設置 或 取消斷點
F5 開始 或 繼續
F11 進入
Shift + F11 跳出
F10 跳過
Ctrl + K Ctrl + I 顯示懸停信息
集成終端
Ctrl + 顯示命令提示符窗口 Ctrl + Shift + 新建命令提示符窗口
Ctrl + Shift + C 複製所選內容
Ctrl + Shift + V 粘貼所選內容
Ctrl + Up 向上滾動
Ctrl + Down 向下滾動
Shift + PgUp 向上翻頁
Shift + PgDown 向下翻頁
Ctrl + Home 滾動到頂部
Ctrl + End 滾動到底部
常用快捷鍵
依次找出文中所有的當前選中的單詞: Ctrl + D
反向縮進：shift+tab
重命名變量: 選中變量名後按F2
轉到變量名的定義處: 選中變量名後按F12
同時選擇多個單詞: Alt + Click
同時選擇上一行 (Ctrl + Alt + Up) 或者下一行 (Ctrl + Alt + Down) 的相同位置：
依次找出文中所有的當前選中的單詞: Ctrl + D
一次性找出文所有的當前選中的單詞: Ctrl + Shift + L
拓展性 (Shift + Alt + Right) 或者收縮性 (Shift + Alt + Left) 的選中文本
矩形框的鼠標選擇: 同時按住Shit和Alt並使用鼠標進行拖拽選擇
切換編程語言語法: Ctrl + K M
在上方複製一行Shift + Alt + Up，在下方複製一行Shift + Alt + Down
Ctrl + G 跳轉至某行
- Ctrl + P ：轉到文件，您可以在 Visual Studio Code 中移動到打開的文件/文件夾的任何文件。
- Ctrl + ` ：在 VS Code 中打開 terminal
- Alt + Down：下移一行
- Alt + Up：上移一行
- Ctrl + D：將選定的字符移動到下一個匹配字符串上
- Ctrl + Space：觸發建議
- Shift + Alt + Down：向下複製行
- Shift + Alt + Up：向上複製行
- Ctrl + Shift + T：重新打開最新關閉的窗口
- Shift + Alt + 配合鼠標一起使用： 選中一大串代碼多行進行編輯
html文件快速創建html結構
- div*4>img[src="./img/banner$.jpg"]
<div><img src="./img/banner1.jpg" alt=""></div>
<div><img src="./img/banner2.jpg" alt=""></div>
<div><img src="./img/banner3.jpg" alt=""></div>
<div><img src="./img/banner4.jpg" alt=""></div>
谷歌快捷鍵
F11 全屏
ctrl+ -/+ 縮小 放大
ctrl+f 查找
vscode擴展插件
Auto Close Tag：
Auto Rename Tag
Beautify
格式化javascript，JSON，CSS，Sass，和HTML
Bracket Pair Colorizer
Chinese
Code Runner
非常強大的一款插件，能夠運行多種語言的代碼片段或代碼文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安裝完成後，右上角出現：>
點擊這個按鈕就可以運行你的文件了（必備）
Code Spell Checker
一個基本的拼寫檢查器，可以很好地與camelCase代碼一起使用。
此拼寫檢查器的目的是幫助捕獲常見的拼寫錯誤，同時保持較低的誤報率。
css peek
能夠查看CSS ID和類的字符串作爲HTML文件中相應的CSS定義（必備）
使用方法：將光標放在class裏面的屬性，右擊
Easy LESS
在Visual Studio Code中輕鬆處理LESS文件。
LESS樣式表的 “保存時編譯”，而無需使用構建任務。
- 創建一個
.less文件。 - 點擊Ctrl / Cmd + S保存文件。
- 甲
.css文件自動生成。 - 您應該在狀態欄中看到一個臨時的“在_X_毫秒內編譯較少”消息。
注意：也可以從命令選項板中將其作爲“將LESS編譯爲CSS”。
Document This
添加註釋塊
設置：
"docthis.includeAuthorTag": true,//出現@Author
"docthis.includeDescriptionTag": true,//出現@Description
"docthis.authorName": "shenzekun",//作者名字
快捷鍵： 按兩次Ctrl+alt+d
ESLint
EsLint可以幫助我們檢查Javascript編程時的語法錯誤。比如：在Javascript應用中，你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼，找到bug並確保一定程度的JS語法書寫的正確性。> ESLint最初是由Nicholas C. Zakas於2013年6月創建的開源項目。它的目標是提供一個插件化的javascript代碼檢測工具。
因此，ESLint就是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。
HTML CSS Support
在 html 標籤上寫class 智能提示當前項目所支持的樣式（必備）
Live Server
啓動具有實時重新加載功能的本地開發服務器，以處理靜態和動態頁面。
啓動/停止服務器的快捷方式
[注意：如果工作空間中沒有文件.html或.htm文件，則必須按照方法4和5來啓動服務器。
- 打開一個項目，然後
Go Live從狀態欄中單擊以打開/關閉服務器。 - 右鍵單擊
HTML資源管理器窗口中的文件，然後單擊Open with Live Server。 。 - 打開一個HTML文件，右鍵單擊編輯器，然後單擊
Open with Live Server。 - 單擊“
(alt+L, alt+O)打開服務器”並(alt+L, alt+C)停止服務器（您可以更改快捷方式窗體的鍵盤綁定）。[在MAC上，cmd+L, cmd+O和cmd+L, cmd+C] - 通過按
F1或打開命令面板，ctrl+shift+P然後鍵入Live Server: Open With Live Server以啓動服務器或鍵入Live Server: Stop Live Server以停止服務器。
open in browser
當前的 html 文件用瀏覽器打開，類似 webstorm 的那四個小瀏覽器圖標功能，前提條件html 文件必須保存
快捷鍵alt+b
Power Mode
打字鼠標效果
Terminal
在命令面板（Ctrl+Shift+P）搜索用戶配置，在用戶配置文件中，找到Run Code configuration下的code-runner.runInTerminal的值改爲true，就好了。
vscode-icons
react
React-Native/React/Redux snippets for es6/es7
react-beautify
格式化 javascript, JSX, typescript, TSX 文件
vue
vetur
VueHelper
Vue TypeScript Snippets
Vue 2 Snippets
主題
One Dark Pro
Horla Light Theme
vscode的七彩燈光主題
常用的擴展插件
- vetur,Vue 2 Snippets,vue peek 適合vue開發者使用，其他擴展插件前端開發都可
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
