Beautify
HookyQR
js-beautify for VS Code
Beautify javascript , JSON , CSS , Sass , and HTML in Visual Studio Code.
VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file’s path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file .
For help on the settings in the .jsbeautifyrc see Settings.md
How we determine what settings to use
When not using a multi-root workspace:
- If there is a valid .jsbeautifyrc in the file’s path tree, up to project root, these will be the only settings used.
- If an option is a file path or object of configuration specified in the user or workspace settings like this: «beautify.config» : «string|Object. » , these will be the only settings used. The file path is interpreted relative to the workspace’s root folder.
- If there is a valid .jsbeautifyrc in the file’s path tree, above project root, these will be the only settings used.
- If there is a valid .jsbeautifyrc in your home directory, these will be the only settings used.
When using a multi-root workspace: Same as above, but the search ends at the nearest parent workspace root to the open file.
- Settings are translated from your VS Code workspace/user settings.
- Any open editor settings (indent spaces/tabs) for the specific file are merged in.
- Editorconfig settings are searched for (See http://editorconfig.org/) and are merged in.
VS Code | .jsbeautifyrc settings map
| .jsbeautifyrc setting | VS Code setting |
|---|---|
| eol | files.eol |
| tab_size | editor.tabSize |
| indent_with_tabs (inverted) | editor.insertSpaces |
| wrap_line_length | html.format.wrapLineLength |
| wrap_attributes | html.format.wrapAttributes |
| unformatted | html.format.unformatted |
| indent_inner_html | html.format.indentInnerHtml |
| preserve_newlines | html.format.preserveNewLines |
| max_preserve_newlines | html.format.maxPreserveNewLines |
| indent_handlebars | html.format.indentHandlebars |
| end_with_newline | html.format.endWithNewline (html) |
| end_with_newline | file.insertFinalNewLine (css, js) |
| extra_liners | html.format.extraLiners |
| space_after_anon_function | javascript.format .insertSpaceAfterFunctionKeywordForAnonymousFunctions |
| space_in_paren | javascript.format .insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis |
Note that the html.format settings will ONLY be used when the document is html. javascript.format settings are included always.
Also runs html and css beautify from the same package, as determined by the file extension. The schema indicates which beautifier each of the settings pertains to.
The .jsbeautifyrc config parser accepts sub elements of html , js and css so that different settings can be used for each of the beautifiers (like sublime allows). Note that this will cause the config file to be incorrectly structured for running js-beautify from the command line.
Settings are inherited from the base of the file. Thus:
Will result in the indent_size being set to 4 for JavaScript and HTML, but set to 2 for CSS. All will get the same indent_char setting.
If the file is unsaved, or the type is undetermined, you’ll be prompted for which beautifier to use.
You can control which file types, extensions, or specific file names should be beautified with the beautify.language setting.
Beautify on save will be enabled when «editor.formatOnSave» is true.
Beautification on particular files using the built in Format Document (which includes formatting on save) can be skipped with the beautify.ignore option. Using the Beautify file and Beautify selection will still work. For files opened from within the workspace directory, the glob patterns will match from the workspace folder root. For files opened from elsewhere, or when no workspace is open, the patterns will match from the system root.
Note that the glob patterns are not used to test against the containing folder. You must match the filename as well.
Источник
Как вы форматируете код в Visual Studio Code (VSCode)
Что эквивалентно Ctrl + K + F и Ctrl + K + D в Windows в Visual Studio для форматирования или «украшения» кода в редакторе кода Visual Studio?
Форматирование кода доступно в Visual Studio Code с помощью следующих ярлыков:
- В Windows Shift + Alt + F
- На Mac Shift + Option + F
- В Linux Ctrl + Shift + I
Кроме того, вы можете найти ярлык, а также другие ярлыки, с помощью «Палитры команд», предоставленной в редакторе с помощью Ctrl + Shift + P (или Command + Shift + P на Mac), а затем выполнить поиск формата документа .
Ярлык форматирования кода:
Visual Studio Code для Windows — Shift + Alt + F
Код Visual Studio на MacOS — Shift + Option + F
Код Visual Studio в Ubuntu — Ctrl + Shift + I
Вы также можете настроить этот ярлык, используя настройки предпочтений, если это необходимо.
Форматирование кода при сохранении файла:
Visual Studio Code позволяет пользователю настраивать параметры по умолчанию.
Если вы хотите автоматически отформатировать содержимое во время сохранения, добавьте приведенный ниже фрагмент кода в настройках рабочего пространства кода Visual Studio.
Файл меню → Настройки → Настройки рабочего пространства
Примечание: теперь вы можете автоматически форматировать файлы TypeScript. Проверьте мое обновление.
Источник
Почему форматирование кода JSX не правильно
vscode — мой любимый редактор, у меня проблема с форматированием кода. Вот мой jsx код:
Когда я использую option + shift + F для его форматирования, это дает мне следующее:
Очевидно, это не правильно.
vscode версия — v1.10.2 , и не устанавливайте расширение для форматирования кода.
Итак, я не хочу устанавливать какое-либо расширение для форматирования кода, есть ли конфигурация для vscode , чтобы сделать это правильно?
Прости за это. Я проверяю мои установленные расширения, найдено Beautify расширение. Но почему я использую форматирование кода vscode, он использует Beautify ?
6 ответов
Как вы заметили, расширение Beautify является основной причиной здесь (см. эту проблему). Это расширение предоставляет форматер документов, который VSCode будет запускать при запуске команды форматирования.
- Отключить расширение
- Отключите Beautify только для файлов js, удалив запись js из настройки «beautify.language»
- Убедитесь, что ваш файл имеет языковой режим javascriptreact . Я считаю, что это не позволит Beautify запустить файл
В качестве альтернативы Beautify и обходного пути, которое вы должны сделать, вы можете использовать вместо этого rc-beautify расширение vscode. Установите его, CTRL + B, чтобы отформатировать JS, код JSX.
Установите Prettier (если он не установлен) и попробуйте добавить следующие настройки пользователя или рабочего места:
Не помещайте разрыв строки между return и возвращенным выражением JSX. Запустите автоформат (Alt + Shift + F) и проверьте, работает ли.
Выберите язык в правом нижнем углу как «JavaScript React».
И лучший способ — переименовать файлы js в jsx .
Это связано с тем, что vs code распознает язык файлов .js как «JavaScript», а не «JavaScript React», и beautify использует язык, который vs code говорит, что он решает, как его отформатировать.
Как подсказывают другие ответы, вы можете вручную выбрать язык (в правом нижнем углу кода) как «JavaScript React» или переименовать каждое расширение файла в .jsx , но мне кажется, что проще добавить:
В мой рабочее пространство settings.json файл.
Теперь vs код автоматически распознает все языки .js файлов как «JavaScript React» в рабочей области!
Если вы не знаете, как получить доступ к этому файлу, ознакомьтесь с настройками пользователя и рабочей области.
Edit: Это полезно, если все файлы .js в вашем рабочем пространстве являются «JavaScript React»!
Вы не написали свое имя файла, если это файл «.js», переименуйте в «.jsx»
Источник
VSCode-неправильное форматирование кода jsx
vscode-мой любимый редактор, у меня проблема с форматированием кода. Вот мой jsx код:
когда я использую option + shift + F форматировать его, он дает мне это:
очевидно, это неправильно.
версия vscode — v1.10.2 , а не устанавливать расширение форматирования кода.
и я не хочу устанавливать расширение форматирования кода, есть ли какая-либо конфигурация для vscode для этого правильно?
извиняюсь за это. Я проверяю установленные расширения, нашел
3 ответов
как вы заметили, расширение Beautify является основной причиной здесь (см. этот вопрос). Это расширение предоставляет средство форматирования документов, которое VSCode будет выполняться при выполнении команды format
- отключить расширение
- отключить украсить только для JS-файлов, удалив js запись «beautify.language» задание
- убедитесь, что ваш файл имеет режим язык javascriptreact . Я верю, что это предотвратит Украсить от запуска на файле
установите Prettier (если не установлен), и попробуйте добавить это настройки пользователя или рабочего места:
не помещайте linebreak между return и возвращаемым выражением JSX. Запустите autoformat (Alt+Shift+F) и проверьте, работает ли.
в качестве альтернативы, чтобы украсить и обходной путь, который вы должны сделать, вы можете использовать вместо rc-украсить расширение vscode. Установите его, CTRL+B для форматирования кода JS, JSX.
Источник
Vs code beautify не работает
Андрей, Я не до конца понял суть: речь идёт об автоиндентации или о переводе строки?
Если речь про перевод строк, то силами редактора такой вопрос не решить — придётся использовать плагин. Конкретный посоветовать не могу, поэтому нужно попробовать какие-нибудь из маркета по запросу «Style formatter». Плагин CSScomb такое не умеет, к сожалению.
Немногим позже добавлю плагин (https://github.com/morishitter/stylefmt), который вроде как умеет это.
Если вопрос про автоиндентацию, то при нажатии на Enter после «;» индентация будет выстроена на ровне со свойством, а если после «<», то на уровень ниже (вложенный).
Денис, Имел ввиду автоформатирование кода, редактор умеет форматировать файлы css, но не умеет файлы scss.
Я использовал связку beautify и cssComb(с пресетом «яндекс»). cssComb сортировал свойства, а beautify выставлял отступы и убирал пустые строки. Вопрос в том, можно ли как-то настроить beautify или cssComb, чтобы это все выполнялось средствами одного плагина?
И еще есть вопрос на счет cssComb, где можно посмотреть настройки пресета «яндекс», я бы хотел их немного изменить?
Изменить их можно либо, создав файл .csscomb.json в директории проекта, либо в настройках редактора, создав объект с настройками «csscomb.preset». Подробнее процесс я описал в описании к плагину.
CSScomb не умеет добавлять отступы между вложенными селекторами, однако, можно создать задачу, например, в Grunt или Gulp, и назначить её на сочетание клавиш.
Глеб, На своё удивление обнаружил, что сейчас плагины, использующие языковой сервер, испытывают проблемы при дебаггинге. Попробуйте переместить ваш плагин в директорию, где находятся плагины редактора (user -> .vscode -> extensions) и запустить редактор. Если Если плагин не заработает, то пишите на Stack Overflow или на GitHub.
Источник
