VSCode編輯器極簡使用入門

安木夕發表於2022-12-17
VSCode

image.png

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）

1.gif

02、常用配置

使用者區與工作區

image.png

  • 使用者：設定內容全域性生效
  • 工作區：只針對當前工作目錄（專案）生效。工作區設定會優先生效，適用於團隊協作場景。設定檔案儲存在當前專案根目錄的.vscode/settings.json中，可以被提交到Git倉庫，方便共享給專案組的其他成員。

中文語言

在擴充套件中搜尋“Chinese”安裝中文語言包： Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code，重啟生效。

字型樣式

設定中搜尋“Font”：

  • 字型大小：15px，根據解析度設定合適大小。
  • 字型：程式設計字型推薦等寬字型，在加上一個顯示中文的，Consolas,"Microsoft YaHei"

image.png

"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"。

image.png

?Fira Code：免費的程式設計連字等寬字型，效果不錯！FiraCode-Regular.zip

Fira Code,Consolas,"Microsoft YaHei"

image.png

?JetBrains Mono ：JetBrains 公司專為開發者打造的免費開源程式設計字型。JetBrainsMono-Regular.zip

JetBrains Mono,Consolas,"Microsoft YaHei"

image.png

?Consolas ：Windows自帶字型，VS預設程式設計字型。Consolas是一套等寬字型的字型，屬無襯線字型，由Lucas de Groot設計。

image.png

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>，兩位數就兩個$$

1.gif

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 中輕鬆刷題。

©️版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請註明出處！原文編輯地址-語雀

相關文章