编程开发

关注公众号 jb51net

关闭
软件教程 > 编程开发 >

vscode中prettier插件怎么使用? vscode中prettier的用法

脚本之家

prettier是一款优秀的代码格式化工具,并不关心你的语法是否正确,只关心你的代码格式,比如是否使用单引号,语句结尾是否使用分号等等,它可以把格式错乱的代码转化为符合标准的漂亮代码,prettier支持格式化的语言有:JavaScript,TypeScript,Flow,JSX,JSON,CSS,SCSS,Less,HTML,Vue,Angular,GraphQL,Markdown,YAML。

prettier也开发了一款vscode的插件,本文介绍如何在vscode中使用prettier

打开vscode,如果没有安装prettier插件,请先安装,安装方法是点击“Extension”图标,然后搜索 “prettier”,找到官方插件并安装

准备一段示例代码,如下图是一段格式比较混乱的html代码

在打开示例代码的vscode窗口中,使用快捷键“CTRL + Shift + P”打开vscode命令框,在框中输入“format”关键字,可以看到有2个选项

1. Format Document (快捷键 Shift+Alt+F)对整个文档做格式化

2. Format Selection (快捷键Ctrl+K, Ctrl+F)对选择代码做格式化

可以根据需要选择其中一个选项

我们选择“Format Document”后,可以看到代码发生了变化,示例代码变得美观整洁,如下图所示

另外,我们还可以选中部分代码,然后点击右键,在右键菜单中也会有2个选项,同样可以对现有代码做格式化,用起来很方便

1. Format Document (Shift+Alt+F)

2. Format Selection (Ctrl+K, Ctrl+F)

以上就是vscode中prettier插件的使用方法,希望大家喜欢,请继续关注脚本之家。

相关推荐:

vscode如何删除项目? vscode关闭项目的技巧

vscode怎么打包vue项目? vscode中vue项目打包流程

VSCode快速移动光标的双快捷键? VSCode设置alt单击可移动光标的技巧