Visual Studio 代码 CSS 缩进和格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37739375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Visual studio code CSS indentation and formatting
提问by A. DC
I'd like to know if there is any way to activate auto indent a CSS file in visual studio code with the shortcut ALT+SHIFT+F?
我想知道是否有任何方法可以使用快捷方式ALT+ SHIFT+在 Visual Studio 代码中激活自动缩进 CSS 文件F？
It's working fine with JavaScript but strangely not with CSS.
它适用于 JavaScript，但奇怪的是不适用于 CSS。
回答by NValchev
Yes, try installing vscode-css-formatter extension.
It just adds the functionality to format .cssfiles and the shortcut stays the same Alt+Shift+F.
是的，尝试安装vscode-css-formatter 扩展。
它只是添加了格式化.css文件的功能，快捷方式保持不变Alt+ Shift+ F。
回答by bhv
to run this
运行这个
enter alt+shift+f
进入 alt+shift+f
or
或者
press F1or ctrl+shift+pand then enter beautify ..
按F1或ctrl+shift+p然后输入 beautify ..
an another one - JS-CSS-HTML Formatter
另一个 - JS-CSS-HTML Formatter
i think both this extension uses js-beautifyinternally
我认为这个扩展在内部使用了js-beautify
回答by Manohar Reddy Poreddy
Wasted an hour finding the best option.
浪费了一个小时寻找最佳选择。
Just putting it together, for easy reading and choosing one them.
只需将其放在一起，以便于阅读和选择其中之一。
Notes:
笔记：
- CSS and SASS/SCSS/LESS are all related
- HTML, Javascript, Typescript, JSON - VS code is already formatting
- CSS and related - VS code is notformatting as of today
- CSS 和 SASS/SCSS/LESS 都是相关的
- HTML、Javascript、Typescript、JSON - VS 代码已经在格式化
- CSS 和相关 - VS 代码今天没有格式化
Options:
选项：
- To format css/sass/scss/less:
- Prettier
- All css related supported, and not others, I choose this, it works great.
- Prettier
- To format JavaScript/TypeScript/CSS:
- Beautify css/sass/scss/less
- but, already JS, TS are supported by VS code
- Beautify css/sass/scss/less
- To format JS, CSS, HTML, JSON file (wraps js-beautify)
- JS-CSS-HTML Formatter
- but, already JS, HTML, JSON are supported by VS code
- JS-CSS-HTML Formatter
- To format CSS
- CSS Formatter
- but, only CSS supported, not all the related - not maintained 6+ months
- CSS Formatter
- 格式化 css/sass/scss/less：
- 更漂亮
- 支持所有与 css 相关的，而不是其他的，我选择了这个，效果很好。
- 更漂亮
- 要格式化 JavaScript/TypeScript/CSS：
- 美化css/sass/scss/less
- 但是，VS 代码已经支持 JS、TS
- 美化css/sass/scss/less
- 格式化 JS、CSS、HTML、JSON 文件（包装 js-beautify）
- JS-CSS-HTML 格式器
- 但是，VS 代码已经支持 JS、HTML、JSON
- JS-CSS-HTML 格式器
- 格式化 CSS
- CSS 格式化程序
- 但是，仅支持 CSS，并非所有相关的 - 未维护 6 个月以上
- CSS 格式化程序
To format:
格式化：
Press Alt+ Shift+ Fin VS Code, after installing Prettier.
按Alt+ Shift+F在VS代码，安装更漂亮了。
回答by Shahbaaz Khan
After opening local bootstrap.min.cssin visual studio code, it looked unindented. Tried the commad ALT+Shift+Fbut in vain.
在 Visual Studio 代码中打开本地bootstrap.min.css后，它看起来没有缩进。尝试了命令ALT+Shift+F但徒劳无功。
Then installed
然后安装
CSS Formatterextension.
CSS 格式化程序扩展。
Reloaded it and ALT+Shift+Findented my CSS file with charm.
重新加载它，ALT+Shift+F 使我的 CSS 文件缩进了魅力。
Bingo !!!
答对了 ！！！
回答by feihcsim
回答by Konrad Viltersten
There are several to pick from in the gallery but the one I'm using, which offers considerable level of configurability still remaining unobtrusive to the rest of the settings is Beautify by Michele Melluso. It works on both CSS and SCSS and lets you indent 3 spaces keeping the rest of the code at 2 spaces, which is nice.
在图库中有几个可供选择，但我正在使用的一个是Michele Melluso 的 Beautify，它提供了相当程度的可配置性，但对其余设置仍然不显眼。它适用于 CSS 和 SCSS，并允许您缩进 3 个空格，将其余代码保留在 2 个空格处，这很好。
You can snatch it from GitHuband adapt it yourself, should you feel like it too.
你可以从GitHub 上抓取它并自己调整它，如果你也喜欢的话。
回答by lilhamad
Go to Files menu -> Preference -> Extentions Then type CSS Formatter wait for it to load and click install
转到文件菜单 -> 首选项 -> 扩展然后输入 CSS Formatter 等待它加载并单击安装
回答by William Dekou
Install HookyQR.beautify extension. It will beautify your javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. It is the most use extensions for this purpose
安装 HookyQR.beautify 扩展。它将美化您在 Visual Studio Code 中的 javascript、JSON、CSS、Sass 和 HTML。这是为此目的最常用的扩展
回答by Sion
To format the code in Visual Studio when you want, press: (Ctrl + K) & (Ctrl + F)
要在需要时在 Visual Studio 中格式化代码，请按：(Ctrl + K) & (Ctrl + F)
The auto formatting rules can be found and changed in: Tools/Options --> (Left sidebar): Text Editor / CSS (or whatever other language you want to change)
可以在以下位置找到和更改自动格式化规则：工具/选项 -->（左侧边栏）：文本编辑器/CSS（或您想要更改的任何其他语言）
For the CSS language the options are unfortunately very limited. You can also make some changes in: .../ Text Editor / All Languages
不幸的是，CSS 语言的选项非常有限。您还可以在：.../ 文本编辑器/所有语言中进行一些更改
