常用的vscode插件

為了方便查找和使用我簡單分了一下類，但可能不標准，因為有些插件的功能對應分類很模糊。

一、外觀

1.1 vscode-icons

更改vscode的文件圖標，更直觀的了解是什么類型的文件

1.2 Dracula Official

編譯器主題。

主題可以在擴展應用里直接搜索theme，選擇自己喜歡的主題~

這個插件是在小破站的一個up視頻里看到的，親身使用后覺得不錯，文末有鳴謝。

1.3 Material Icon Theme

也是圖標主題

使用：

這個插件是在小破站的一個up視頻里看到的，親身使用后覺得不錯，文末有鳴謝。

二、編程

2.1 Code Runner

可在編譯器下直接運行JS代碼

使用：在JS代碼下，右鍵菜單選擇code Run

2.2 Beautify

格式化代碼

使用：首次使用鼠標右鍵，選擇使用其他方式格式化代碼，將Beautify設置為默認值后，以后使用快捷鍵shift+alt+f即可

2.3 翻譯(translate to chinese)

翻譯，話不多說，英語不好的小伙伴安就對了！！！

使用，選中詞組，按下shift+ctrl+t，在右下角就會出現該單詞相應的漢語意思。（目前感覺不好的地方就是，翻譯結果需要手動關閉）

2.4 翻譯（英漢詞典）

使用：安裝插件之后，選中在單詞上方后，vscode下面的狀態欄就會顯示相應的漢語意思。也可以點擊查看詳細翻譯。

2.5 Vetur

vue開發插件，可高亮vue語法及ascss語法和ts語法。

2.6 Auto Rename Tag

自動更名標簽，如果你先寫了一個div,又想改為span,只要改開始標簽，結束標簽的名就會自動修改，不用在茫茫嵌套標簽中尋找了

2.7 koroFileHeader

快捷添加文件頭（ctrl+alt+i）、函數注釋(ctrl+alt+t)

使用：

打開設置-打開settings.json,將下面部分json復制進去（根據自己的需求修改項目）詳細配置也可以看插件的官網配置。

配置字段

{  
//快速添加文件頭部注釋和函數注釋
    "fileheader.configObj": {
        "createFileTime": true, //設置為true則為文件新建時候作為date，否則注釋生成時間為date
        "autoAdd": true, //自動生成注釋
        "annotationStr": {
            "head": "/*",
            "middle": " * @",
            "end": " */",
            "use": true //設置自定義注釋可用
        },
        // 自動添加頭部注釋的黑名單
        "prohibitAutoAdd": [
            "json"
        ],
    },
    // 函數注釋
    "fileheader.cursorMode": {
        // 默認字段
        "description": "",
        "param": "",
        "return": ""
    },
    
    "fileheader.customMade": {
        "Description": "", //文件內容描述
        "Author": "zhiguo.hong", //編輯人
        "Date": "Do not edit", //時間
        "LastEditTime": "Do not edit",
        "LastEditors": "zhiguo.hong",
        "Reference": ""
    },
    "liveServer.settings.root": "",
}