Главная » Языки программирования

Sublime text форматирование кода css

На чтение 10 мин
Содержание
  1. Saved searches
  2. Use saved searches to filter your results more quickly
  3. License
  4. mutian/Sublime-CSS-Format
  5. Name already in use
  6. Sign In Required
  7. Launching GitHub Desktop
  8. Launching GitHub Desktop
  9. Launching Xcode
  10. Launching Visual Studio Code
  11. Latest commit
  12. Git stats
  13. Files
  14. README.md
  15. Как настроить в Sublime 3 автоформатирование кода
  16. 1 ответ 1
  17. Стандартными средствами
  18. С помощью стороннего плагина
  19. Автоматическое выравнивание html кода SublimeText 3?
  20. CSS Formatter for Sublime Text
  21. Installation
  22. Usage
  23. Shortcuts
  24. Configuration
  25. Author

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

CSS Formatting for Sublime Text

License

mutian/Sublime-CSS-Format

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

CSS Formatter for Sublime Text

CSS Format is a CSS formatting plugin for Sublime Text, you can convert CSS/SASS/SCSS/LESS code to Expanded, Compact or Compressed format. CSS Format is just only a formatter, do not supports grammar check and auto correct feature.

body < background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; > ol, ul, li < margin: 0; padding: 0; > a < color: rgba(65, 131, 196, 0.8); >
body < background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; > ol, ul, li < margin: 0; padding: 0; > a < color: rgba(65, 131, 196, 0.8); >
body < background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; > ol, ul, li < margin: 0; padding: 0; > a < color: rgba(65, 131, 196, 0.8); >
bodybackground:#fff;font:12px/2em Arial,Helvetica,sans-serif;> ol,ul,limargin:0;padding:0;> acolor:rgba(65,131,196,0.8);>
body < background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; > ol, ul, li < margin: 0; padding: 0; > a < color: rgba(65, 131, 196, 0.8); >
bodybackground:#fff;font:12px/2em Arial,Helvetica,sans-serif;> ol, ul, limargin:0;padding:0;> acolor:rgba(65,131,196,0.8);>
bodybackground:#fff;font:12px/2em Arial,Helvetica,sans-serif>ol,ul,limargin:0;padding:0>acolor:rgba(65,131,196,0.8)>

OPTION 1 — with Package Control (recommended)

Читайте также:  Узнать содержит ли строка подстроку java

The easiest way to install this package is through Package Control.

  1. Install Package Control, follow instructions on the website.
  2. Open command panel: Ctrl+Shift+P (Linux/Windows) or Cmd+Shift+P (OS X) and select Package Control: Install Package.
  3. When packages list appears, type CSS Format and select it.

OPTION 2 — with Git

Clone the repository in your Sublime Text «Packages» directory:

git clone git://github.com/mutian/Sublime-CSS-Format.git "CSS Format"

You can find your «Packages» inside the following directories:

  • OS X: ~/Library/Application Support/Sublime Text 2/Packages/
  • Windows: %APPDATA%/Sublime Text 2/Packages/
  • Linux: ~/.Sublime Text 2/Packages/

OPTION 3 — without Git

Download the latest source zip from Github and extract it into a new folder named CSS Format in your Sublime Text «Packages» folder.

Select the code, or place cursor in the document, and execute commands in one of the following ways:

  • Context Menu: CSS Format.
  • Edit Menu: Edit > CSS Format.
  • Command Panel: Open command panel: Ctrl+Shift+P (Linux/Windows) or Cmd+Shift+P (OS X) and select Format CSS: XXX.

By default, CSS Format provides no keyboard shortcuts to avoid conflicts, but you can read the included Example.sublime-keymaps file to get an idea how to set up your own.

There are a number of configuration options available to customize the behavior on save. For the latest information on what options are available, select the menu item Preferences > Package Settings > CSS Format > Settings — Default.

DO NOT edit the default settings. Your changes will be lost when CSS Format is updated. ALWAYS edit the user settings by selecting Preferences > Package Settings > CSS Format > Settings — User.

  • indentation: Format indentation, you can set it to » » . By default, this is set to «\t»
  • expand_block_break: Set the line breaks after each rules block under Expanded format. By default, this is set to «\n\n» .
  • format_on_save: Set to true to trigger format on save. By default, this is set to false .
  • format_on_save_action: Format action. You can refer to Settings — Default. By default, this is set to «expand» .
  • format_on_save_filter: CSS Format matches the name of the file being saved against this regular expression to determine if a build should be triggered. By default, the setting has a value of «\\.(css|sass|scss|less)$» .

Created by Mutian (http://mutian.wang).

For more info, you can send email to me: mutian(a)me.com!

Источник

Как настроить в Sublime 3 автоформатирование кода

Как настроить в Sublime 3 автоформатирование кода? Допустим, я вставил HTML код в Sublime Text. Этот код с одинаковой табуляцией, соответственно, получается каша. Как сделать так, чтобы при определённом действии код сам форматировался и принимал нормальный вид?

1 ответ 1

Стандартными средствами

Preferences → Key Bindings — User

Если файл пустой, то вставить код полностью.
Если нет, то добавить объект в массив, как добавляли бы его в JSON.

Читайте также:  Как включить java plugin

Данный код позволяет по нажатию комбинации CTRL + ALT + L отформатировать код во всем файле или только внутри выделенного фрагмента.

С помощью стороннего плагина

Есть плагин Sublime-HTMLPrettify. Ему нужен установленный node.js для работы.
Может читать настройки из .jsbeautifyrc файла.

  • Нажмите CTRL + SHIFT + P или CMD + SHIFT + P в Linux/Windows/OS X
  • Наберите install , выберите Package Control: Install Package
  • Наберите prettify , выберите HTML-CSS-JS Prettify

Использование (любой из вариантов)

  • Выберите Tools → Command Palette ( CTRL + SHIFT + P или CMD + SHIFT + P ) и наберите htmlprettify .
  • Нажмите CTRL + SHIFT + H (или CMD + SHIFT + H если у вас Mac).
  • Кликните правой кнопкой мыши на выделенном фрагменте HTML/CSS/JS Prettify → Prettify Code
  • Откройте HTML, CSS или JavaScript file, откройте консоль Sublime Text через меню View → Show Console и наберите view.run_command(«htmlprettify») .

Пример работы на вашем фрагменте кода:

Источник

Автоматическое выравнивание html кода SublimeText 3?

Подскажите, пожалуйста, можно ли настроить SublimeText 3 таким образом, чтобы он автоматически выравнивал/структурировал html код, когдя я его вставляю/пишу.
Вот примерно то, что я хочу Инструмент для форматирования HTML кода

Возможно какой то плагин. Не могу понять какой и как его настроить.

Спасибо большое, очень выручил этот код. В новой версии путь: Preferenses -> Key Bindings -User. Вставляем этот код в открывшийся файлик и наслаждаемся автоформатированием текста.

Можете делать ctrl + a, потом Edit → Line → Reindent. Либо попробовать какой-нибудь плагин (раз, два).

Zoxon

Дело в том, что автоформатирование не всегда требуется, иногда (у меня по крайней мере очень часто) нужно оставить оригинальное форматирование в бОльшей части кода.

По умолчанию автоформатирование кода (расставление отступов, автозакрытие тегов) включено. Если требуется форматировать код — просто выделите его (для надёжности ещё можно нажать Ctrl+J) и выровняйте встроенными средствами, способы приведены выше (или через контекстное меню)

Не понятно только, для надежности нажмите Ctrl+J и что это даст ? Sublime объединил выделенные строки в одну, а как сделать обратную операцию ? «способы приведены выше» у меня не срабатывают для объединенной строки.

просто после объединения в одну строку гораздо правильнее расттавляются переносы и отступы приведёнными тут способами.

Источник

CSS Formatter for Sublime Text

CSS Format is a CSS formatting plugin for Sublime Text, you can convert CSS/SASS/SCSS/LESS code to Expanded, Compact or Compressed format. CSS Format is just only a formatter, do not supports grammar check and auto correct feature.

body  background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; > ol, ul, li  margin: 0; padding: 0; > a  color: rgba(65, 131, 196, 0.8); > 
body  background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; > ol, ul, li  margin: 0; padding: 0; > a  color: rgba(65, 131, 196, 0.8); > 
body  background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; > ol, ul, li  margin: 0; padding: 0; > a  color: rgba(65, 131, 196, 0.8); > 
bodybackground:#fff;font:12px/2em Arial,Helvetica,sans-serif;> ol,ul,limargin:0;padding:0;> acolor:rgba(65,131,196,0.8);> 
body  background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; > ol, ul, li  margin: 0; padding: 0; > a  color: rgba(65, 131, 196, 0.8); > 
bodybackground:#fff;font:12px/2em Arial,Helvetica,sans-serif;> ol, ul, limargin:0;padding:0;> acolor:rgba(65,131,196,0.8);> 
bodybackground:#fff;font:12px/2em Arial,Helvetica,sans-serif>ol,ul,limargin:0;padding:0>acolor:rgba(65,131,196,0.8)>

Installation

OPTION 1 — with Package Control (recommended)

The easiest way to install this package is through Package Control.

  1. Install Package Control, follow instructions on the website.
  2. Open command panel: Ctrl+Shift+P (Linux/Windows) or Cmd+Shift+P (OS X) and select Package Control: Install Package.
  3. When packages list appears, type CSS Format and select it.

OPTION 2 — with Git

Clone the repository in your Sublime Text “Packages” directory:

git clone git://github.com/mutian/Sublime-CSS-Format.git "CSS Format"

You can find your “Packages” inside the following directories:

  • OS X: ~/Library/Application Support/Sublime Text 2/Packages/
  • Windows: %APPDATA%/Sublime Text 2/Packages/
  • Linux: ~/.Sublime Text 2/Packages/

OPTION 3 — without Git

Download the latest source zip from Github and extract it into a new folder named CSS Format in your Sublime Text “Packages” folder.

Usage

Select the code, or place cursor in the document, and execute commands in one of the following ways:

  • Context Menu: CSS Format.
  • Edit Menu: Edit > CSS Format.
  • Command Panel: Open command panel: Ctrl+Shift+P (Linux/Windows) or Cmd+Shift+P (OS X) and select Format CSS: XXX.

Shortcuts

By default, CSS Format provides no keyboard shortcuts to avoid conflicts, but you can read the included Example.sublime-keymaps file to get an idea how to set up your own.

Configuration

There are a number of configuration options available to customize the behavior on save. For the latest information on what options are available, select the menu item Preferences > Package Settings > CSS Format > Settings — Default.

DO NOT edit the default settings. Your changes will be lost when CSS Format is updated. ALWAYS edit the user settings by selecting Preferences > Package Settings > CSS Format > Settings — User.

  • indentation: Format indentation, you can set it to » » . By default, this is set to «\t»
  • expand_block_break: Set the line breaks after each rules block under Expanded format. By default, this is set to «\n\n» .
  • format_on_save: Set to true to trigger format on save. By default, this is set to false .
  • format_on_save_action: Format action. You can refer to Settings — Default. By default, this is set to «expand» .
  • format_on_save_filter: CSS Format matches the name of the file being saved against this regular expression to determine if a build should be triggered. By default, the setting has a value of «\\.(css|sass|scss|less)$» .

Author

Created by Mutian (http://mutian.wang).

For more info, you can send email to me: mutian(a)me.com!

Источник

Оцените статью
© 2023 Программирование