如何在Visual Studio代码（VSCode）中格式化代码

作者: 不易青年。
发布时间: 2024-08-11 05:52:10 (17天前)
转自：

19 条回复

0#
回复此人
NetworkAttachedStorage | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于那些想要自定义要格式化的JavaScript文件的人，可以使用任何扩展名 <code> JSfiles </code> 属性同样适用于HTML。 </p> <pre> <code> { "beautify.onSave": true, "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"], "beautify.HTMLfiles": ["htm", "html"] } </code> </pre> <P> 这样可以在保存TypeScript时实现美化，您可以将XML添加到HTML选项中。 </p> </DIV>

编辑
1#
回复此人
蜡笔小辛 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 文件 - ＆GT;偏好 - ＆gt;设置 </p> <pre> <code> "editor.formatOnType": true </code> </pre> <P> 当你输入分号时，它将被格式化 </p> </DIV>

编辑
2#
回复此人
林老爷的日常 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 必须先安装相应的插件（即XML，C＃等）。在安装相关插件并使用适当的扩展名保存文件之前，格式化将不可用。 </p> </DIV>

编辑
3#
回复此人
布偶的表弟派大星丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 代码格式快捷方式： </强> </p> <P> Windows上的VSCode - <KBD> 转移 </KBD> + <KBD> Alt键 </KBD> + <KBD> F </KBD> </p> <P> MacOS上的VSCode - <KBD> 转移 </KBD> + <KBD> 选项 </KBD> + <KBD> F </KBD> </p> <P> Ubuntu上的VSCode - <KBD> 按Ctrl </KBD> + <KBD> 转移 </KBD> + <KBD> 一世 </KBD> </p> <P> 如果需要，您还可以使用首选项设置自定义此快捷方式 </p> <P> 的<strong> 保存文件时的代码格式： </强> </p> <P> Visual Studio代码允许用户自定义默认设置。 </p> <P> 如果您想在保存的同时自动格式化您的内容，请在Visual Studio代码的工作空间设置中将此下面的代码段添加。 </p> <P> 的<strong> 文件 - ＆gt;偏好 - ＆gt;工作区设置 </强> </p> <pre> <code> { // Controls if the editor should automatically format the line after typing "beautify.onSave": true, "editor.formatOnSave": true, // You can auto formate any files based on extensions type. "beautify.JSfiles": [ "js", "json", "jsbeautifyrc", "jshintrc", "ts" ] } </code> </pre> <P> 注意：现在您可以自动格式化typescript文件检查我的更新 </p> </DIV>

编辑
4#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <OL> <LI> 右键单击该文件 </LI> <LI> 选择格式文档（ <KBD> Alt键 </KBD> + <KBD> 转移 </KBD> + <KBD> F </KBD> ）从菜单框。 </LI> </醇> <P> <a href="https://i.stack.imgur.com/kTc8U.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/kTc8U.png”alt =“在此输入图像说明”/> </A> </p> </DIV>

编辑
5#
回复此人
早岁那知世事艰 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 选择文本，右键单击选择并选择“命令调色板”选项 </p> <P> <a href="https://i.stack.imgur.com/sdXwt.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/sdXwt.png”alt =“在此处输入图片说明”/> </A> </p> <P> 打开一个新窗口，搜索“格式”并根据需要选择具有格式的选项。 </p> </DIV>

编辑
6#
回复此人
薄情 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 虽然更改Visual Studio代码的默认行为需要扩展，但您可以覆盖工作区或用户级别的默认行为，并适用于大多数支持的语言（我可以保证html，javascript，c＃） </p> <H2> 工作区级别 </H2> <P> 的<strong> 优点 </强> </p> <UL> <LI> 不需要延期 </LI> <LI> 可以在团队之间共享 </LI> </UL> <P> 的<strong> 成果 </强> </p> <UL> <LI> <code> .vscode/settings.json </code> 在项目根文件夹中创建 </LI> </UL> <P> 的<strong> 如何？ </强> </p> <OL> <LI> <P> 去：的<strong> 文件 - ＆gt;偏好 - ＆gt;工作区设置 </强> </p> </LI> <LI> <P> 添加并保存 <code> "editor.formatOnType": true </code> 到settings.json（它通过创建.vscode / settings.json文件覆盖你工作的项目的默认行为）。 <a href="https://i.stack.imgur.com/q9rnS.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/q9rnS.png”alt =“看起来如何”/> </A> </p> </LI> </醇> <H2> 用户环境级别 </H2> <P> 的<strong> 优点 </强> </p> <UL> <LI> 不需要延期 </LI> <LI> 个人发展环境tweeking统治他们所有（设置:)） </LI> </UL> <P> 的<strong> 成果 </强> </p> <UL> <LI> 用户 <code> settings.json </code> 已修改（请参阅下面的操作系统位置） </LI> </UL> <P> 的<strong> 如何？ </强> </p> <OL> <LI> <P> 去：的<strong> 文件 - ＆gt;偏好 - ＆gt;用户设置 </强> </p> </LI> <LI> <P> 添加或更改值 <code> "editor.formatOnType": false </code> 至 <code> "editor.formatOnType": true </code> 在用户settings.json中 </p> </LI> </醇> <P> 您的Visual Studio代码用户 <code> settings.json </code> 位置是： </p> <BLOCKQUOTE> <P> 设置文件位置根据您的平台，用户设置文件位于： </p> <P> Windows％APPDATA％\ Code \ User \ settings.json Mac $ HOME / Library / Application Support / Code / User / settings.json Linux $ HOME / .config / Code / User / settings.json工作空间设置文件是位于项目的.vscode文件夹下。 </p> </BLOCKQUOTE> <P> 可以找到更多细节 <a href="https://code.visualstudio.com/docs/customization/userandworkspace#_creating-user-and-workspace-settings" rel="noreferrer"> 这里 </A> </p> </DIV>

编辑
7#
回复此人
大黑骡子王 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需安装 <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.vs-keybindings" rel="noreferrer"> Visual Studio键映射 </A> 由微软。问题解决了。：p </p> </DIV>

编辑
8#
回复此人
满目山河 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <code> Shift </code> + <code> Alt </code> + <code> f </code> 在1.17.2及以上的工作做得很好。 </p> </DIV>

编辑
9#
回复此人
一只特立独行的猪 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用扩展.. </p> <P> 保存文件时启用代码的自动格式化。 </p> <P> 启动VS Code Quick Open（ <KBD> 按Ctrl </KBD> + <KBD> P </KBD> ），粘贴以下命令，然后按Enter键。 </p> <BLOCKQUOTE> <P> ext install format-on-save </p> </BLOCKQUOTE> <P> <a href="https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save" rel="nofollow noreferrer"> https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save </A> </p> </DIV>

编辑
10#
回复此人
哈哈哈哈 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果要自定义格式文档的样式，则应使用的<strong> 美化 </强> 推广。 </p> <P> 请参阅此屏幕截图： </p> <P> <img src =“https://www.evernote.com/l/Aaz3YH0uW7RGzI9lpfKbeihQqJ9Gazr7GDoB/image.png"alt =”img“/> </p> </DIV>

编辑
11#
回复此人
Moso31 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在Visual Studio代码上， <KBD> 转移 </KBD> + <KBD> Alt键 </KBD> + <KBD> F </KBD> 正在做什么 <KBD> 按Ctrl </KBD> + <KBD> ķ </KBD> + <KBD> d </KBD> 正在Visual Studio上做。 </p> </DIV>

编辑
12#
回复此人
我头上有犄角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在Mac上 <code> Shift+Alt+F </code> 适合我。 </p> <P> 您始终可以在菜单中检查键绑定： <BR/> <code> Code -> Preferences -> Keyboard Shortcuts </code> 并按关键字'format'过滤。 </p> </DIV>

编辑
13#
回复此人
筱梨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 不是这个，用这个：的<strong> 文件 - ＆gt;偏好 - ＆gt;工作区设置 </强> “editor.formatOnType”：true </p> </DIV>

编辑
14#
回复此人
听风～ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在Visual Studio中格式化代码。 </p> <P> 我尝试在Windows 8中进行格式化。 </p> <P> 只需按照截图即可。 </p> <P> 步骤1。单击顶部菜单栏上的视图，然后单击Command Pallete。 <a href="https://i.stack.imgur.com/9LZ3z.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/9LZ3z.png”alt =“在此处输入图片说明”/> </A> </p> <ol start =“2”> <LI> 然后Textbox将出现在我们需要类型Format的地方 </LI> </醇> <BLOCKQUOTE> <P> 移位+ Alt + F </p> </BLOCKQUOTE> <P> <a href="https://i.stack.imgur.com/qBdT1.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/qBdT1.png”alt =“在此处输入图片说明”/> </A> </p> </DIV>

编辑
15#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在安装之前，C＃中的格式快捷方式对我不起作用 <a href="http://en.wikipedia.org/wiki/Mono_%28software%29" rel="nofollow noreferrer"> 单 </A> 对于Mac OS X， <a href="https://stackoverflow.com/questions/30131118/what-is-the-dnvm/30143342#30143342"> DNVM </A> 和 <a href="https://stackoverflow.com/questions/30131118/what-is-the-dnvm/30143342#30143342"> DNX </A> 。 </p> <P> 在我安装Mono之前，自动格式快捷方式（ <KBD> 转移 </KBD> + <KBD> Alt键 </KBD> + <KBD> F </KBD> ）只为工作 <code> .json </code> 文件。 </p> </DIV>

编辑
16#
回复此人
敢嫁就敢娶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <BLOCKQUOTE> <P> 我在vscode（ubuntu）中使用的最简单方法是： </p> </BLOCKQUOTE> <P> 选择要用鼠标格式化的文本。 </p> <P> <code> Right click </code> 并选择 <code> "format selection" </code> </p> </DIV>

编辑
17#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Visual Studio代码 LINUX： </p> <P> <KBD> 按Ctrl </KBD> + <KBD> [ </KBD> 到unindent代码块和 </p> <P> <KBD> 按Ctrl </KBD> + <KBD> ] </KBD> 做一个大规模的缩进 </p> </DIV>

编辑

登录后才能参与评论