vscode如何格式化代碼

一、vscode如何格式化代碼快捷鍵

Ctrl + Shift + I

在需要格式化的代碼上按下快捷鍵，即可自動格式化代碼。

二、vscode如何格式化js代碼

vscode默認支持JavaScript的格式化，但是在使用過程中，可能會因為一些非常規的代碼寫法而無法格式化。

此時可以安裝Prettier插件（下文會提到），它可以修復大多數的格式化問題，同時也支持多種語言的格式化。

三、vscode格式化代碼風格設置

vscode默認的代碼格式化風格不一定符合我們的個人習慣，可以通過以下步驟進行設置：

1. 打開設置（可以使用快捷鍵 `Ctrl + ,`）
2. 在搜索框中輸入「format」，找到「Editor: Default Formatter」選項
3. 選擇喜好的格式化工具，比如選擇Prettier作為默認的格式化工具
4. 在工作區設置中，也可以選擇單獨對某一項目使用不同的格式化工具

四、vscode格式化代碼插件

在vscode擴展市場中有很多格式化代碼的插件，比如Prettier、Beautify等等，以下是其中兩個常用的插件：

1. Prettier

Prettier 能為幾乎所有的流行語言提供代碼格式化，還支持代碼移除（刪除空行、尾隨逗號、括弧等），單個文件格式化和格式化整個項目，以及保存文件時自動格式化等功能。

安裝方法：在 vscode 中搜索「prettier」，安裝即可。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
  "editor.formatOnSave": true
}

2. Beautify

Beautify 是一個可定製代碼美化工具，支持 CoffeeScript, CSS, JavaScript, JSON, Less, Sass, TypeScript, and HTML 文件。

安裝方法：在 vscode 中搜索「Beautify」，安裝即可。

{
  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json",
        "jsonc"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautifyrc"
      ]
    }
  },
  "beautify.tabSize": 2
}

五、vscode如何自動格式化代碼

如果希望在保存代碼時自動格式化代碼，可以在設置中進行相應的配置：

{
  "editor.formatOnSave": true
}

在保存代碼時，vscode會自動進行代碼格式化，以符合設置的要求。

六、vscode調整代碼格式

1. 調整縮進

在編輯器中選中需要調整的代碼塊，右鍵選擇「Shift Right（左）」進行縮進調整。

也可以使用「Tab」和「Shift + Tab」進行代碼的縮進和減少縮進。

2. 調整行間距

在設置中可以進行行間距的調整：

{
  "editor.lineHeight": 20
}

七、vscode一鍵格式化代碼

在vscode中，可以通過以下步驟一鍵格式化代碼：

1. 滑鼠懸停於編輯器的右上角，出現「意向操作」和「轉到定義」的快捷按鈕
2. 點擊「格式化文件」按鈕，進行一鍵格式化

八、vscode代碼格式化快捷鍵修改選取

如果希望重設vscode的默認格式化快捷鍵，可以進行如下設置：

{
  "formatOnPaste": true,
  "format.onSave": true,
  "keyboard.dispatch": "keyCode",
  "vim.handleKeys": {
    "": false
  },
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "workbench.startupEditor": "newUntitledFile",
  "editor.wordWrap": "on",
  "editor.wrappingIndent": "same"
}