HTML&CSS 開發環境搭建-VSCode 常用外掛安裝及配置

Matrixchan發表於2021-11-26
HTMLCSS開發環境VSCode

編輯器 VSCode

HTML&CSS 開發環境搭建-VSCode 常用外掛安裝及配置

VSCode 下載地址： code.visualstudio.com/download

外掛

外掛可以在 VSCode 的側邊欄 外掛模組裡面搜尋、安裝；或者在 Visual Studio Maketplace 搜尋和安裝，前提需要登入 Visual Studio 站點的帳號。

1. Live Server

HTML&CSS 開發環境搭建
Live Server 是 VSCode 編輯器的內建服務外掛，能快速開啟網頁實時預覽編輯效果。
使用以及配置方法見 Live Server外掛頁面

2. Auto Rename Tag

HTML&CSS 開發環境搭建
Auto Rename Tag 能讓你方便編輯 HTML/XML 標籤對。
詳細介紹和配置，見 Auto Rename Tag 外掛頁面

3. Bracket Pair Colorizer

HTML&CSS 開發環境搭建
這個擴充套件允許用顏色來識別匹配的括號，使用者可以自定義匹配的字元以及使用哪些顏色進行匹配顯示。

4. Prettier - Code formatter

HTML&CSS 開發環境搭建
Prettier 是一個程式碼格式化外掛，它通過解析你的程式碼，用它自己的規則重新輸出程式碼。

配置

根據個人的喜好進行設定。

Prettier 配置

  1. Setting ->在配置檢索欄 檢索 prettier。
    HTML&CSS 開發環境搭建

  2. Prettier:Semi 取消每行結尾新增分號 。
    HTML&CSS 開發環境搭建

  3. Prettier:Single Quote 勾選 “用單引號替代雙引號”。
    HTML&CSS 開發環境搭建

Format on Save 配置

  1. Setting -> 在配置檢索欄 檢索 format on save。
  2. Editor: Format On Save 勾選“在儲存檔案時候格式化”。
    HTML&CSS 開發環境搭建
本作品採用《CC 協議》，轉載必須註明作者和本文連結
Write the code.Change the world.

相關文章