浅谈vscode代码格式化的方法

1. 什么是vscode代码格式化?

vscode代码格式化是指通过对代码进行排版,使得代码结构更加清晰,易于阅读,便于开发者进行代码维护和修改的过程。相较于手动编写代码排版,使用vscode代码格式化工具可以不用花费大量时间去维护代码风格,提高开发效率。同时,也能够让代码在不同 IDE 和平台上保持统一的风格。

1.1 vscode代码格式化的优势

提高代码可读性: 代码格式化能够统一代码风格,让代码具备更好的可读性,降低阅读代码时的初始认知成本。

提高开发效率: 使用代码格式化可以大大减低手动排版代码的时间,同时也可以对代码语法进行校验。

提高维护效率: 维护代码风格,让代码在改变和扩展时都能够保持风格的统一性,减少代码出现 bug 的风险,同时也可以节约开发人员的维护时间。

2. 如何在vscode中进行代码格式化?

如果想在vscode中对代码进行格式化,有两种方式:

2.1 使用快捷键Ctrl(Command)+ Shift + I

在vscode中打开需要格式化的文件,然后使用快捷键 Ctrl(Command)+ Shift + I。此时,将会自动对文件中代码进行排版和格式化。

Ctrl(Command)+ Shift + I

2.2 使用编辑器菜单

在vscode中打开需要格式化的文件,然后按下 Shift + Alt + F 快捷键,此时会弹出编辑器菜单,从中选择 "Format Document"

Shift + Alt + F

3. 修改vscode代码格式化配置

vscode代码格式化默认规则往往不能满足每个人的需求,基于此,vscode允许实现自定义的代码格式化配置。这一功能的实现需要对文件 User Settings 进行编辑调整。

3.1 打开“首选项->设置”菜单并搜索“format”

进入vscode中的“首选项->设置”菜单中,运用“format”关键词进行搜索,然后按下“Enter”键,会将所有与“format”有关的设置罗列出来。

"[markdown]": {

"editor.defaultFormatter": "DavidAnson.vscode-markdownlint",

"editor.formatOnSave": true

},

"editor.formatOnPaste": true,

"editor.formatOnSaveTimeout": 750,

"editor.formatOnType": true,

3.2 修改默认格式化器

该属性用于设置默认的代码格式化器。可以将其调整为个人所需的格式化器。

"editor.defaultFormatter": "esbenp.prettier-vscode",

3.3 设置格式化器在保存时自动运行

该属性用于设置在保存代码时是否自动运行格式化器。

"editor.formatOnSave": true

3.4 设置保存时运行命令的延迟时间

该属性用于设置当设置"editor.formatOnSave"属性时格式化器运行的秒数。对于运行速度较慢的机器,可以将时间设置为更高的数字。

"editor.formatOnSaveTimeout": 750

3.5 设置格式化器自动运行的触发事件

该属性用于设置是否需要在输入文字时运行格式化器。

"editor.formatOnType": true

4. 安装和使用Prettier插件

vscode中有大量第三方插件供选择,Prettier是其中的一款优秀的代码格式化插件。Prettier支持的语言范围广泛,并且具有丰富的配置选项。

4.1 安装Prettier

在左侧的“扩展”(Extensions)菜单中查找“Prettier - Code formatter”插件并进行安装。

4.2 使用Prettier并自定义配置

在使用Prettier之前,需要确认1. 扩展中已经成功安装了 Prettier。2. 将 Prettier 设置为默认的格式化器。

4.3 Prettier自定义规则

如果默认的设置不适合该项目,请查找自定义 Prettier 选项。

"prettier.eslintIntegration": true,

"prettier.printWidth": 100,

"prettier.singleQuote": true,

"prettier.trailingComma": "all"

5. 总结

vscode代码格式化让开发人员不用花费大量时间去维护代码风格,提高开发效率。通过对vscode代码格式化工具的深入学习和掌握,我们可以更加高效地对代码进行开发和维护,使得代码更方便自己和其他开发人员阅读和修改。