您的位置:

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