深入了解VSCode JS格式化插件

一、插件介紹

VSCode是一款輕量級的，跨平台的，由微軟開發的免費IDE。其中，VSCode JS格式化插件是一款非常重要的插件。它可以幫助我們定義代碼樣式、格式和排版，從而使我們的代碼更加規範、易讀、易於維護。

二、使用教程

VSCode JS格式化插件是一個非常易用的插件，只需要進行如下幾個步驟：

1. 安裝插件

打開VScode，按下`ctrl + shift + x`，在Extensions搜索框中輸入`JS-CSS-HTML Formatter `，點擊安裝

2. 配置文件

打開VScode，按下`ctrl + ,`進入用戶設置。在搜索框中輸入`format`，在JavaScript插件的settings中添加如下代碼

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.formatOnPaste": true,
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

3. 使用方法

我們可以通過多種方式調用插件生成新的格式化代碼。

1. 手動執行(indent, format document)

選中全文或者部分文本，按下`Shift + Alt + F`或`F1`，然後輸入`format document`或`indent`。

2. 自動執行(formatOnType, formatOnSave, formatOnPaste)

可以設置在編輯時、保存時、粘貼時自動進行格式化。

三、使用技巧

1. 設置單行代碼最大寬度

有時候我們會寫非常長的代碼，超出了編輯器的顯示寬度，會造成代碼可讀性的影響，此時我們可以設置單行代碼最大寬度。

// 在setting中修改singlequote（單引號）的值，例如maxwidth為120
"editor.wordWrap": "on",
"editor.wordWrapColumn": 120

2. 自動格式化注釋

VSCode默認不會格式化注釋，但有時注釋也需要更好的排版和可讀性。我們可以簡單地通過開啟這個配置來實現自動格式化注釋。

"editor.formatOnSaveMode": "modifications",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "modifications",
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.organizeImports": true
    }
}

3. 調整縮進大小

我們可以調整縮進大小（比如從4個空格到2個空格），找到”editor.tabSize” 和”editor.insertSpaces”配置項進行設置。

"editor.tabSize": 2,
"editor.insertSpaces": true

4. 快捷鍵設置

我們可以為格式化代碼添加快捷鍵，從而方便快速使用。

// 在keybindings.json中添加如下代碼
{
    "key": "ctrl+alt+f",
    "command": "editor.action.formatDocument",
    "when": "editorTextFocus && !editorReadonly"
}

四、插件擴展

此外，我們也可以為插件添加擴展程序，如下所示：

// 在setting.json或settings.json中添加如下代碼，用於添加擴展程序
"prettier.configPath": "${workspaceFolder}/.prettierrc",
"prettier.ignorePath": "${workspaceFolder}/.prettierignore",
"prettier.packageManager": "npm",
"prettier.useEditorConfig": true

結語

在開發過程中，VSCode JS格式化插件不僅可以提高我們的開發效率和代碼質量，還可以使我們的代碼更加規範、易讀和易於維護。通過本篇文章的介紹，相信大家可以更深入地了解插件，並更加靈活高效地使用它。