如何用vscode美化你的代碼

如果你是一個熱愛寫代碼的開發者或者學生，那麼你一定有一個強烈的需要去尋找一個好看、好用的代碼編輯器，那麼，今天，我介紹一下vscode美化。

一、安裝主題

第一步，你需要先在vscode內安裝好自己喜歡的主題，例如Dracula主題，這需要你在左側側邊欄內選擇Extensions，然後搜索Dracula主題，點擊安裝即可。
下面是安裝Dracula主題的代碼示例：

在Extensions中搜索Dracula主題進行安裝

安裝好主題後，按下ctrl+P，在輸入框中輸入settings.json，這裡是編輯器的設置選項，進去後在文件中加入以下配置：

"workbench.colorTheme": "Dracula",

這樣就可以將編輯器的主題成功設置為Dracula了。當然，你也可以自己喜歡的其他主題。

二、安裝插件

第二步，你需要安裝一些插件，這裡我推薦的是Prettier、Code Spell Checker、Auto-Open Markdown Preview和Bracket Pair Colorizer插件，這些插件都可以讓你的代碼變得更好看。

1、Prettier插件可以自動美化你的代碼。

安裝Prettier插件：在Extensions裏面搜索Prettier，然後點擊Install即可。

2、Code Spell Checker插件能夠幫你檢查拼寫錯誤，使你的代碼更優秀。

安裝Code Spell Checker插件：在Extensions中搜索Code Spell Checker，然後點擊Install按鈕即可。

3、Auto-Open Markdown Preview插件可以讓你即時預覽你寫的markdown文檔。

安裝Auto-Open Markdown Preview插件：在Extensions裏面輸入Auto-Open Markdown Preview，然後點擊Install按鈕即可。

4、Bracket Pair Colorizer插件可以讓你的括號變色，是你更加容易理解代碼。

安裝Bracket Pair Colorizer插件：在Extensions裏面輸入Bracket Pair Colorizer，然後點擊Install按鈕即可。

三、使用插件

通過安裝插件，我們可以讓我們的開發效率變得更高。

1、使用Prettier插件，我們可以自動美化代碼。

首先，你需要在你的項目根目錄下創建一個.prettierrc的文件，然後在裏面加入以下代碼：

{
    "semi": false,
    "singleQuote": true
}

這樣可以讓自動美化代碼時，採用單引號，並關閉分號。

使用Prettier插件的步驟如下：

步驟一：打開vscode的命令面板，點擊ctrl+shift+p
步驟二：輸入prettier，選擇"Format Document with Prettier"選項
步驟三：等待自動美化完成即可

2、使用Code Spell Checker插件，我們可以檢查我們的代碼是否存在拼寫錯誤。

使用Code Spell Checker插件，我們可以快速地檢查代碼中的寫錯單詞，下面是使用方法：

步驟一：打開vscode的命令面板，點擊ctrl+shift+p
步驟二：輸入"Code Spell Checker"，選擇"Spell check all workspaces"選項
步驟三：等待快速檢查完成即可

3、使用Bracket Pair Colorizer插件，我們可以讓我們的括號變得更加明顯。

Bracket Pair Colorizer插件無需設置，安裝好後你就可以看到你的代碼會被着色

4、使用Auto-Open Markdown Preview插件，我們可以即時看到我們的markdown文檔。

使用Auto-Open Markdown Preview插件的步驟如下：

步驟一：打開命令面板，輸入"Auto-Open Markdown Preview: Toggle"，然後選擇即時預覽即可

四、總結

通過對以上的步驟和插件的介紹，相信你已經對如何美化你的代碼有了一定的了解。
在實際的工作中，可以根據自己的喜好和需要去安裝不同的插件，不斷地調整自己的開發環境，提高效率。