vscode如何格式化代码

小蓝 • 2024-12-02 14:38 • 编程

一、vscode如何格式化代码快捷键

Ctrl + Shift + I

在需要格式化的代码上按下快捷键，即可自动格式化代码。

二、vscode如何格式化js代码

vscode默认支持JavaScript的格式化，但是在使用过程中，可能会因为一些非常规的代码写法而无法格式化。

此时可以安装Prettier插件（下文会提到），它可以修复大多数的格式化问题，同时也支持多种语言的格式化。

三、vscode格式化代码风格设置

vscode默认的代码格式化风格不一定符合我们的个人习惯，可以通过以下步骤进行设置：

打开设置（可以使用快捷键 `Ctrl + ,`）
在搜索框中输入“format”，找到“Editor: Default Formatter”选项
选择喜好的格式化工具，比如选择Prettier作为默认的格式化工具
在工作区设置中，也可以选择单独对某一项目使用不同的格式化工具

四、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中，可以通过以下步骤一键格式化代码：

鼠标悬停于编辑器的右上角，出现“意向操作”和“转到定义”的快捷按钮
点击“格式化文件”按钮，进行一键格式化

八、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"
}

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/194411.html