如何在 VS Code使用 Prettier自动格式化代码

419 阅读2分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情


配置前先安装prettier插件,如下图所示

image.png

第一步,先打开vscode软件,方便快捷的方式就直接使用快捷键ctrl+,(是ctrl加逗号)唤出快速搜索条界面。

image.png

第二步,接下来先设定自动保存文件,搜索框贴入files.autoSave筛出设置项,并把设置项属性选择为onFocuschange。

image.png

1)默认设置 off ,不自动保存:

2)afterDelay —— 将在配置的 "#files.autoSaveDelay#" 后自动保存为保存的编辑器:

3)onFocusChange —— 当编辑器失去焦点时,将自动保存为保存的编辑器(可理解为鼠标不在 VSCode 里时)

4)onWindowChange —— 当窗口失去焦点时,将自动保存为保存的编辑器(窗口可理解为每个代码脚本,当鼠标从 A 脚本转到 B 脚本时,自动保存脚本 A 的修改内容)

第三步,设定编辑器默认代码格式化(美化)的插件为Prettier,同理在搜索设置框贴入editor.defaultFormatter,将配置项选择为Prettier。

image.png

第四步,设定Prettier插件保存时自动格式化代码,搜索设置项贴入editor.formatOnSave,将如下图所示的选项框打钩即可。

image.png

第五步,基本教程就完结了,效果就自行编写代码查看效果了

后续内容补充

  1. 想用自定义配置文件来进行格式化。 如果下图所示

image.png

在文件主目录中添加自己自定义的配置文件即可

  1. 如果你在文件目录增加了配置文件 同时修改配置规则不生效 你可以用过打开prettier输出栏 查看报错

image.png

  1. 有时候你临时接手别人的项目的需求,不想在该项目中使用prettier 想快捷关闭prettier插件 你可以安装一个插件来达到快捷开关闭的操作

image.png