[英]How do you format code in Visual Studio Code (VSCode)?
What is the equivalent of Ctrl + K + F and Ctrl + K + D on Windows in Visual Studio for formatting, or "beautifying" code in the Visual Studio Code editor?在 Visual Studio 中用于格式化或在 Visual Studio Code 编辑器中“美化”代码的Ctrl + K + F和Ctrl + K + D在 Windows 上的等价物是什么?
The code formatting is available in Visual Studio Code through the following shortcuts:代码格式可通过以下快捷方式在 Visual Studio Code 中使用:
Alternatively, you can find the shortcut, as well as other shortcuts, through the 'Command Palette' provided in the editor with Ctrl + Shift + P (or Command + Shift + P on Mac), and then searching for format document .或者,您可以使用Ctrl + Shift + P (或 Mac 上的Command + Shift + P )通过编辑器中提供的“命令面板”找到快捷方式以及其他快捷方式,然后搜索格式文档。
Open command palette (Win: F1 or Ctrl + Shift + P )打开命令面板(Win: F1或Ctrl + Shift + P )
Find 'Change Language Model'找到“更改语言模型”
Select language eg json
.选择语言,例如json
。 By now syntax should be highlighted.现在语法应该突出显示。
Format document (eg Open Command Palette -> ' Format Document ')格式化文档(例如打开命令面板 -> '格式化文档')
Code Formatting Shortcut:代码格式化快捷键:
Visual Studio Code on Windows - Shift + Alt + F Windows 上的 Visual Studio 代码 - Shift + Alt + F
Visual Studio Code on MacOS - Shift + Option + F MacOS 上的 Visual Studio 代码 - Shift + Option + F
Visual Studio Code on Ubuntu - Ctrl + Shift + I Ubuntu 上的 Visual Studio 代码 - Ctrl + Shift + I
You can also customize this shortcut using a preference setting if needed.如果需要,您还可以使用首选项设置自定义此快捷方式。
Code Formatting While Saving the File:保存文件时的代码格式:
Visual Studio Code allows the user to customize the default settings. Visual Studio Code 允许用户自定义默认设置。
If you want to auto format your content while saving, add the below code snippet in the work space settings of Visual Studio Code.如果要在保存时自动设置内容格式,请在 Visual Studio Code 的工作空间设置中添加以下代码片段。
Menu File → Preferences → Workspace Settings菜单文件→首选项→工作区设置
{
// Controls if the editor should automatically format the line after typing
"beautify.onSave": true,
"editor.formatOnSave": true,
// You can auto format any files based on the file extensions type.
"beautify.JSfiles": [
"js",
"json",
"jsbeautifyrc",
"jshintrc",
"ts"
]
}
Note: now you can auto format TypeScript files.注意:现在您可以自动格式化 TypeScript 文件。 Check my update.检查我的更新。
You can add a keybinding in menu File → Preferences → Keyboard shortcuts.您可以在菜单文件→首选项→键盘快捷键中添加键绑定。
{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }
Or Visual Studio like:或Visual Studio,如:
{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }
正确的组合键是Shift + Alt + F 。
Visual Studio Code 1.6.1 supports " Format On Save " which will automatically pick up relevant installed formatter extensions and format the whole document on each save. Visual Studio Code 1.6.1支持“ Format On Save ”,它会自动选择相关的已安装格式化程序扩展并在每次保存时格式化整个文档。
Enable "Format On Save" by setting通过设置启用“格式保存”
"editor.formatOnSave": true
And there are available keyboard shortcuts (Visual Studio Code 1.7 and above):还有可用的键盘快捷键(Visual Studio Code 1.7及更高版本):
Format the whole document : Shift + Alt + F格式化整个文档: Shift + Alt + F
Format Selection only : Ctrl + K , Ctrl + F仅格式选择: Ctrl + K , Ctrl + F
On Linux it is Ctrl + Shift + I .在 Linux 上它是Ctrl + Shift + I 。
On Windows it is Alt + Shift + F .在 Windows 上,它是Alt + Shift + F 。 Tested with HTML/CSS/JavaScript and Visual Studio Code 1.18.0.使用 HTML/CSS/JavaScript 和 Visual Studio Code 1.18.0 进行测试。
For other languages, you might need to install a specific language package.对于其他语言,您可能需要安装特定的语言包。
For Fedora对于 Fedora
File
-> Preferences
-> Keyboard shortcuts
.单击File
-> Preferences
-> Keyboard shortcuts
。Default Keyboard Shortcuts
, search ( Ctrl + F ) for editor.action.format
.在Default Keyboard Shortcuts
,搜索 ( Ctrl + F ) 以获取editor.action.format
。 Mine read "key": "ctrl+shift+i"
我的读"key": "ctrl+shift+i"
You can change it as well.你也可以改变它。 Refer to this answer on how to... or if you are feeling a little lazy to scroll up:请参阅有关如何...的答案,或者如果您觉得有点懒惰向上滚动:
You can add a keybinding in "Preferences->Keyboard shortcuts"您可以在“首选项->键盘快捷键”中添加键绑定
{ "key": "cmd+k cmd+d", "command": "editor.action.format" }
Or Visual Studio like:或 Visual Studio,如:
{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }
Please note: cmd key is only for Macs.请注意: cmd键仅适用于 Mac。 For Windows and Fedora (Windows keyboard) use Ctrl对于 Windows 和 Fedora(Windows 键盘),请使用Ctrl
EDIT :编辑:
As per Visual Code version 1.28.2
this is what I found.根据 Visual Code 1.28.2
版,这是我发现的。
editor.action.format
no longer exists. editor.action.format
不再存在。 It has now been replaced by editor.action.formatDocument
and editor.action.formatSelection
.它现在已被editor.action.formatDocument
和editor.action.formatSelection
取代。
Type editor.action.format
in the search box to view existing shortcuts.在搜索框中键入editor.action.format
以查看现有快捷方式。
To change the key combinations follow these steps:要更改组合键,请执行以下步骤:
editor.action.formatDocument
or editor.action.formatSelection
单击editor.action.formatDocument
或editor.action.formatSelection
在 Ubuntu 上是Ctrl + Shift + I 。
Menu File → Preferences → Settings菜单文件→首选项→设置
"editor.formatOnType": true
When you enter the semicolon, it's going to be formatted.当您输入分号时,它将被格式化。
Alternatively, you can also use "editor.formatOnSave": true
.或者,您也可以使用"editor.formatOnSave": true
。
Just right-click on the text and select "Format code".只需右键单击文本并选择“格式代码”。
Visual Studio Code uses js-beautify
internally, but it lacks the ability to modify the style you wish to use. Visual Studio Code 在内部使用js-beautify
,但它缺乏修改您希望使用的样式的能力。 The extension "beautify" lets you add settings.扩展“美化”允许您添加设置。
Shift + Alt + F在 1.17.2 及更高版本中做得很好。
For some reason Alt + Shift + F didn't work for me on Mac Visual Studio Code 1.3.1, and actually the command "Format Document" don't worked at all.由于某种原因Alt + Shift + F在 Mac Visual Studio Code 1.3.1 上对我不起作用,实际上“格式化文档”命令根本不起作用。 But command Formatter worked very well.但是命令格式化程序工作得很好。
So you can use Command + Shift + P and type Formatter or make your own shortcut in menu File → Preferences → Keyboard Shortcuts → Command + K Command + S then type Formatter and add your shortcut.因此,您可以使用Command + Shift + P并键入Formatter或在菜单File → Preferences → Keyboard Shortcuts → Command + K Command + S 中创建自己的快捷方式,然后键入Formatter并添加您的快捷方式。
See an example:看一个例子:
Formatting code in Visual Studio.在 Visual Studio 中格式化代码。
I have tried to format in Windows 8.我曾尝试在 Windows 8 中格式化。
Just follow the screenshots below.只需按照下面的屏幕截图操作即可。
The simplest way I use in Visual Studio Code (Ubuntu) is:我在 Visual Studio Code (Ubuntu) 中使用的最简单方法是:
Select the text which you want to format with the mouse.用鼠标选择要格式化的文本。
Right click and choose "Format selection" .右键单击并选择“格式选择” 。
在 Visual Studio Code 中, Shift + Alt + F正在执行Ctrl + K + D在 Visual Studio 中所做的操作。
On Mac, Shift + Alt + F works for me.在 Mac 上, Shift + Alt + F对我有用。
You can always check the key bindings in the menu:您可以随时检查菜单中的键绑定:
Menu File → Preferences → Keyboard Shortcuts and filter by keyword 'format'.菜单文件→首选项→键盘快捷键并按关键字“格式”过滤。
The format shortcut in C# didn't work for me until I installed Mono for Mac OS X, DNVM and DNX .在我为 Mac OS X、 DNVM和DNX安装Mono之前,C# 中的格式快捷方式对我不起作用。
Before I installed Mono, the auto-format shortcut ( Shift + Alt + F ) worked only for the .json
files.在我安装 Mono 之前,自动格式化快捷方式( Shift + Alt + F )仅适用于.json
文件。
While changing the default behavior for Visual Studio Code requires an extension, you may override the default behavior in the workspace or user level.虽然更改 Visual Studio Code 的默认行为需要扩展,但您可以覆盖工作区或用户级别中的默认行为。 It works for most of the supported languages (I can guarantee HTML, JavaScript, and C#).它适用于大多数受支持的语言(我可以保证 HTML、JavaScript 和 C#)。
Benefits好处
Outcomes结果
.vscode/settings.json
is created in the project root folder .vscode/settings.json
在项目根文件夹中创建How To?如何?
Go to: Menu File → Preferences → Workspace Settings转到:菜单文件→首选项→工作区设置
Add and save "editor.formatOnType": true
to settings.json (which overrides default behavior for the project you work on by creating .vscode/settings.json file).添加并保存"editor.formatOnType": true
到 settings.json(通过创建 .vscode/settings.json 文件覆盖您正在处理的项目的默认行为)。
Benefits好处
Outcomes结果
settings.json
is modified (see location by operating system below)用户的settings.json
被修改(参见下面的操作系统位置)How To?如何?
Go to: menu File → Preferences → User Settings转到:菜单文件→首选项→用户设置
Add or change the value of "editor.formatOnType": false
to "editor.formatOnType": true
in the user settings.json在用户 settings.json "editor.formatOnType": true
"editor.formatOnType": false
的值添加或更改为"editor.formatOnType": true
Your Visual Studio Code user's settings.json
location is:您的 Visual Studio Code 用户的settings.json
位置是:
Settings file locations depending on your platform, the user settings file is located here:设置文件位置取决于您的平台,用户设置文件位于此处:
%APPDATA%\\Code\\User\\settings.json
Windows: %APPDATA%\\Code\\User\\settings.json
$HOME/Library/Application Support/Code/User/settings.json
Mac: $HOME/Library/Application Support/Code/User/settings.json
$HOME/.config/Code/User/settings.json
The workspace setting file is located under the .vscode folder in your project. Linux: $HOME/.config/Code/User/settings.json
工作区设置文件位于项目中的 .vscode 文件夹下。By default, this key was not working for me on HTML, CSS, and JavaScript documents.默认情况下,这个键在 HTML、CSS 和 JavaScript 文档中对我不起作用。
After searching, I found the popular plugin JS-CSS-HTML Formatter with 133,796 installs .搜索后,我找到了流行的插件JS-CSS-HTML Formatter ,安装次数为133,796 。
After installation, just reload the windows and hit Ctrl + Shift + F , and it works!安装后,只需重新加载窗口并按Ctrl + Shift + F ,它就可以工作了!
Just install Visual Studio Keymap (Visual Studio Keymap for Visual Studio Code) by Microsoft.只需安装 Microsoft 的Visual Studio Keymap (Visual Studio Keymap for Visual Studio Code)。 Problem Solved.问题解决了。 :p :p
For those that want to customize what JavaScript files to format, you can use the any extension on the JSfiles
property.对于那些想要自定义要格式化哪些 JavaScript 文件的人,您可以使用JSfiles
属性上的any扩展名。 The same applies to HTML.这同样适用于 HTML。
{
"beautify.onSave": true,
"beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
"beautify.HTMLfiles": ["htm", "html"]
}
This will enable beautify on save for TypeScript, and you can add in XML to the HTML option.这将在保存 TypeScript 时启用美化,您可以将 XML 添加到 HTML 选项。
You have to install the appropriate plug-in first (ie, XML, C#, etc.).您必须先安装适当的插件(即 XML、C# 等)。
Formatting won't become available until you've installed the relevant plugin, and saved the file with an appropriate extension.在您安装相关插件并使用适当的扩展名保存文件之前,格式化将不可用。
在 Mac 中,使用⌘ + K ,然后使用⌘ + F 。
If you want to custom the style of format-document, you should use Beautify extention.如果你想自定义格式文档的样式,你应该使用美化扩展。
Refer to this screenshot:请参阅此屏幕截图:
Not this one.不是这个。 Use this:用这个:
Menu File → Preferences → Workspace Settings , "editor.formatOnType" : true菜单文件→首选项→工作区设置, “editor.formatOnType” : true
Visual Studio Code on Linux: Linux 上的 Visual Studio 代码:
Ctrl + [ to unindent block of code and Ctrl + [取消缩进代码块和
Ctrl + ] to make a mass indentation Ctrl + ]进行大量缩进
Use extension...使用扩展...
Enables auto formatting of the code when you save a file.保存文件时启用代码的自动格式化。
Launch Visual Studio Code and Quick Open ( Ctrl + P ), paste the following command, and press Enter .启动 Visual Studio Code 和Quick Open ( Ctrl + P ),粘贴以下命令,然后按Enter 。
ext install format-on-save ext 安装格式保存
https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.