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代码格式化工具的深入学习和掌握,我们可以更加高效地对代码进行开发和维护,使得代码更方便自己和其他开发人员阅读和修改。