VSCode(Visual Studio Code)是一款開源、跨平臺、輕量級的代碼編輯器,具有非常豐富的插件生態。他本身就是JavaScript
+ Electron
( /ɪˈlektrɒn/電子)代碼開發的。官方下載地址:https://code.visualstudio.com/,支持綠色無安裝。
01、常用快捷鍵
工具快捷鍵 | 描述 |
---|---|
Ctrl + Shift + P |
顯示命令面板 |
Ctrl + B |
顯示/隱藏左側邊欄 |
Ctrl + J |
顯示/隱藏下方控制檯/終端 |
Ctrl + \\ |
拆分爲多個編輯器 |
ctrl + + 、ctrl + - |
將工作區放大/縮小(包括代碼字體、左側導航欄) |
Ctrl + Tab Ctrl + Shift + Tab |
切換打開的多個文檔 |
編碼快捷鍵 | 描述 |
---|---|
Ctrl + 左右方向鍵 | 按照單詞移動光標 |
Alt + Shift + 左右方向鍵 | 按照單詞增加、減少 選中內容 |
Ctrl + Home 、Ctrl + End |
移動到第一行、最後一行 |
Cmd + C/V/X | 複製、粘貼、剪切,如無選中則操作整行,鼠標三擊也可以選中整行 |
Alt + ↑ 、Alt + ↓ |
移動代碼向上、向下 |
Alt + Shift + ↑、Alt + Shift + ↓ | 複製 代碼向上、向下一行 |
Alt + 鼠標連續點擊任意位置 | 所選位置出現多個光標,可以同時輸入 |
Ctrl + D(一次或多次) | 光標所在單詞+和他相同的都會被選中並出現多個光標,可以同時修改 |
Ctrl + / | 註釋單行代碼,自定義改成了Alt + shift + C ,默認的兩個鍵太遠了 |
Alt + shift + F | 格式化代碼 |
Ctrl+L+L(自定義添加的,默認無快捷鍵) | 合併選中行爲一行,可以搜索指令“合併行”,然後給他添加一個快捷鍵 |
多個光標同時編輯還是挺方便的:(Alt + 鼠標連續點擊任意位置、Ctrl + D)
02、常用配置
用戶區與工作區
- 用戶:設置內容全局生效
- 工作區:只針對當前工作目錄(項目)生效。工作區設置會優先生效,適用於團隊協作場景。設置文件保存在當前項目根目錄的
.vscode/settings.json
中,可以被提交到Git倉庫,方便共享給項目組的其他成員。
中文語言
在擴展中搜索“Chinese”安裝中文語言包: Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code
,重啓生效。
字體樣式
設置中搜索“Font
”:
- 字體大小:
15px
,根據分辨率設置合適大小。 - 字體:編程字體推薦等寬字體,在加上一個顯示中文的,
Consolas,"Microsoft YaHei"
"editor.fontFamily": "Fira Code,Consolas,\"Microsoft YaHei\"",
皮膚
- 文件圖標美化插件:vscode-icons
- 比較不錯深色主題皮膚插件(代碼着色+VSCode皮膚):One Dark Pro
支持自定義配置:settings.json文件
"workbench.colorTheme": "One Dark Pro",
"workbench.colorCustomizations":{
"tab.activeBackground": "#2f3e5e",
"activityBar.background": "#282c34",
"sideBar.background": "#383c44"
}
03、編程字體
等寬編程字體,個人現在用的字體設置:JetBrains Mono,Consolas,"Microsoft YaHei"
。
🔸Fira Code:免費的編程連字等寬字體,效果不錯!FiraCode-Regular.zip
Fira Code,Consolas,"Microsoft YaHei"
🔸JetBrains Mono :JetBrains 公司專爲開發者打造的免費開源編程字體。JetBrainsMono-Regular.zip
JetBrains Mono,Consolas,"Microsoft YaHei"
🔸Consolas :Windows自帶字體,VS默認編程字體。Consolas是一套等寬字體的字型,屬無襯線字體,由Lucas de Groot設計。
04、Emmet快速輸入
Emmet是一個用於快速輸入HTML、CSS代碼的語法,可以用簡單的語法快速生成HTML、CSS代碼,語法形式類似CSS。VSCode中已經內置了Emmet的語法了,在html、css中使用,Tab鍵或回車即可。(Emmet /ˈɛmɪt/ 埃米特,沒啥特別含義)
HTML 的Emmet | 說明/示例 |
---|---|
! 或 html:5 |
快速生成HTML文檔的基本結構,包括html、head、meta、body標籤 |
標籤名 div |
p: <p></p> ,div:<div></div> |
標籤.類名p.className |
div.head:<div class="head"></div> |
標籤#id | div#head:<div id="head"></div> |
標籤 { 標籤內容 } | h1{標題}:<h1>標題</h1> |
標籤 [屬性=value] | a[href='#']{標籤} :<a href="#">標籤</a> ,可以只有屬性 |
標籤>嵌套子元素標籤 | li>span{item}:<li><span>item</span></li> |
標籤+兄弟元素標籤 | h1+p+p:<h1></h1> <p></p> <p></p> |
括號分組( emmet ) | (p[class='sel'])>h4:<p class="sel"></p> <h4></h4> |
標籤*數量 | 重複生成n個,li{item}*3:<li>item</li> <li>item</li> <li>item</li> |
$遞增計數 | li{item$}*2:<li>item1</li> <li>item2</li> ,兩位數就兩個$$ |
CSS 的Emmet | 都是屬性簡寫+值+單位(默認px),記住常用的幾個就可以了 |
---|---|
m10 | m10:margin: 10px; , mt10:margin-top: 10px; |
p10、p10%、p10e | p10:padding: 10px ,p10%:padding: 10%; ,p10e:padding: 10em; |
w100、h100 | w100:width: 100px; ,h100:height: 100px; |
bd | bd:border: 1px solid #000; |
c#001 | c#001:color: #001; |
+連接多個屬性 | m5+p10+lh32:margin: 5px; padding: 10px; line-height: 32; |
其他的各種模糊匹配 | bg:background: #000; ,bgi:background-image: url(); |
bx:box-sizing: border-box; ,db:display: block; |
上面的Emmet可以組合使用,就能快速輸入HTML、CSS代碼。
05、VSCode插件
- IntelliCode:代碼智能提示插件,支持多種語言。
- Live Preview:啓動一個本地服務器,頁面運行預覽。
- Auto Rename Tag:自動閉合、重命名配對的標籤。
- Vetur : Vue開發的必備插件,核心功能:代碼高亮、代碼片段、代碼格式化檢查。Vue3升級爲
Volar
插件。 - Draw.io Integration:來自很受歡迎的開源畫圖組件 Draw.io,可以繪製各種流程圖、UML圖、原型圖,功能非常豐富,可以本地畫圖體驗非常酷。
- 代碼格式化:Prettier,便於統一代碼風格,tab寬度、換行規則等。
- 代碼檢測:ESLint,代碼合法性檢測。
- Markdown All in One : 多合一的 Markdown 插件:自動補全,格式化,數學公式支持等功能以及豐富的快捷鍵。
- MySQL : MySQL 管理工具。
- REST Client :REST API 的測試開發利器。
- LeetCode :Offer 收割利器,在 VS Code 中輕鬆刷題。
©️版權申明:版權所有@安木夕,本文內容僅供學習,歡迎指正、交流,轉載請註明出處!原文編輯地址-語雀