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

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

Вопрос задан

Изменён 3 года 1 месяц назад

Просмотрен 56k раз

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

Допустим, я вставил HTML код в Sublime Text. Этот код с одинаковой табуляцией, соответственно, получается каша.

Как сделать так, чтобы при определённом действии код сам форматировался и принимал нормальный вид?

                  <form>
             <div>
        <div></div>
        <div>
            <div>
             <img>
         </div>
         <div>
            <input>
        </div>
    </div>
</div>
</form>
  • sublime-text
  • sublime-text-3

2

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

PreferencesKey Bindings — User

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

[
    { "keys": ["ctrl+alt+l"], "command": "reindent", "args": { "single_line": false } }
]

Данный код позволяет по нажатию комбинации 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

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

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

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

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Заметки программистера: Sublime Text — простое решение непростых задач

Intellij Idea стала на столько привычным окном в мир большой и запутанной Java, что мимо незаметно пролетела такая прелесть как Sublime Text. Небольшое увлечение решением задач на codewars заставило отложить Idea в сторону и поискать решение «полегче» и «пошустрее». Очень хотелось держать перед глазами одно единственное окно с редактором и терминалом. Все мои попытки примириться с vim и screen так и не увенчались успехом и у меня появился повод присмотреться к Sublime.
Если вы из моей команды, прошу под кат за моим списком  полезных горячих клавиш, расширений и прочих фишечек sublime

Простое управление расширениями

Вся мощь Sublime Text кроется в ее многочисленных расширениях. Более простого механизма их управления мне еще не встречалось! 

Package control — менеджер расширений, делающий процесс управления плагинами для Sublime чрезвычайно простым. Достаточно набрать ключевое слово из интересующего вас контекста, и перед вами предстанет список всех подходящий расширений:


Гибкая конфигурация

Возможности кастомизации поведения и внешнего вида Sublime Text практически безграничны. Все настройки описываются в текстовых файлах и делятся на настройки по умолчанию и пользовательские настройки. Принцип настраивания прост:

  1. Открываете файл с дефолтными настройками интересующего вас аспекта(общие настройки редактора, привязки клавишь, настройки расширений и т.д.): Preferences -> [Settings-Default, Key Bindings-Default, и т.д.]
  2. Находите интересующий вас параметр
  3. Копируете его в аналогичный файл с пользовательскими настройками: Preferences -> [Settings-User, Key Bindings-User, и т.д.]
  4. Изменяете его значение
  5. Сохраняете файл

В качестве примера, настроим sublime вставлять пробелы вместо табуляции. Скорее всего такая настройка если и есть, то находится где-то в файле Settings. Откроем его версию по умолчанию (Preferences -> Settings-Default) и поищем по вхождению слово ‘space’:

Название параметра говорит само за себя и на всякий случай сопровождается исчерпывающим комментарием. Копируем настройку «translate_tabs_to_spaces» в пользовательский файл настроек (Preferences -> Settings-User) со значением true, сохраняем файл.

Теперь по нажатию кнопки <TAB> будут вставляться пробелы вместо символа ‘\t’. Количество пробелов задается параметром «tab_size» и тоже может быть изменено.

Подсветка синтаксиса

Sublime умеет подсвечивать содержимое файлов определяя синтаксис по расширению. Из коробки предлагается большое количество готовых тем, но если их окажется недостаточно, всегда можно установить дополнительные. В частности, для любителей темной темы из Idea ее портировали в sublime. Достаточно поставить соответствующее расширение Darkula Color Scheme.

Тема по умолчанию настраивается в конфигурационном файле Preferences.sublime-settings. Вы можете найти его в своей домашней директории .config/sublime-text-3/Packages/User/ или открыть через меню: Preferenses -> Settings-User:

«color_scheme»: «Packages/Darkula Color Scheme/darkula. tmTheme»

Автоматическое форматирование

Автоматическое форматирование кода — одна из тех фишек, что я люблю в IDE. Из коробки Sublime умеет разве что немного табуляцию поправить, но существует огромное количество расширений, позволяющих выполнять авто-форматирование на гораздо более качественном уровне. 

Если вам приходится часто работать в разных средах и хочется везде иметь одинаковые настройки форматирования, вам поможет в этом EditorConfig. Это плагин для большинства популярных сред разработки, унифицирующий описание форматирования для исходных кодов.

Autocomplete

При наборе текста Sublime анализирует его и предоставляет наиболее релевантные варианты его завершения. Из коробки работает в основном с содержимым открытого файла, но может быть улучшен с помощью дополнений, например SublimeCodeIntel. Внимание! Индексирование может занять некоторое время и Sublima может перестать быть привычно шустрой.

Snippets

Snippet — это заранее подготовленный шаблон кода, который может быть быстро вставлен в sublime:

Каждый сниппет описывается в отдельном файле  ~/. config/sublime-text-3/Packages/User{Snippet Name}.sublime-snippet.
Шаблон файла можно быстро создать через меню: Tools -> New Snippet. Синтаксис описания сниппет очень прост:

<!-- Блоки кода вида ${number:string} - это участки автоматической подставновки, 
    которые будут последовательно выделяться(для замены на необходимое содержание) при нажатии клавиши Tab-->
<snippet>
    <content><![CDATA[
function ${1:function_name} (${2:argument}) {
    ${3:// body...}
}
]]></content>
    <!-- Необязательный параметр: указывает сокращение по которому будет вставляться сниппет -->
    <tabTrigger>fun</tabTrigger>
    <!-- Необязательный параметр: указывает тип файла для которого предназначен сниппет -->
    <scope>source.js</scope>
</snippet>

Возможные варианты для scope

Более подробно про сниппеты можно почитать на хабре.

Встроенный тайлинг

Для любителей тайлинга (возможности автоматического размещения окон на экране с помощью горячих клавиш) в sublime он есть из коробки:

alt+shift+2 alt+shift+3 alt+shift+4
alt+shift+5 alt+shift+8 alt+shift+9

Для размещения открытых файлов в разных частях экрана используются группы: 

view -> groups

Полезные расширения

Git

Встраивает команды git-а прямо в sublime. Просто откройте командную палитру (Ctrl+Shist+P) и наберите команду git:

GitGutter

Встроенная подсветка изменений фалов:

HTML-CSS-JS Prettify

Автоматическое форматирование HTML, CSS и JavaScript файлов:

Единственный важный момент: для форматирования JavaScript нужен Node.js framework.

AutoFileName

Закончит за вас указание пути к файлу в коде:

ColorPicker

С ColorPicker вам больше не придется открывать Gimp чтобы узнать код цвета!

ColorHighlighter

Чтобы наглядно представлять как выглядит цвет, описаный в css-атрибуте, стоит присмотреться к расширению ColorHighlighter. Это расширение позволяет наглдно видеть цвет, описанный в css:

Goto-CSS-Declaration

Goto-CSS-Declaration позволяет перейти к описанию css-стиля в один клик!

Terminality

Расширение позволяет открыть терминал операционной системы прямо в окне редактора:

Жутко удобно, но явно немного нагружает процессор.

sublimetext — Форматирование кода Sublime Text 2

спросил

Изменено 5 лет, 3 месяца назад

Просмотрено 124 тыс. раз

Во-первых, позвольте мне сказать, что я пришел из Microsoft, и Visual Studio — это мой хлеб с маслом. У него есть команда (привязка клавиш произвольная), которая автоматически форматирует любой синтаксис кода . Та же самая команда работает в HTML, CSS, Javascript, C# и т. д.

Я пробовал плагины для ST2, и до сих пор я обнаружил, что большинство из них не работают на компьютере с Windows, а если и работают, то для очень конкретной цели. как просто Javascript.

Я пробовал (и открывал вопросы, где это уместно):

https://github.com/victorporof/Sublime-HTMLPrettify

https://github. com/jdc0589/JsFormat (это действительно работает)

https ://github.com/welovewordpress/SublimeHtmlTidy

Кто-нибудь из пользователей Windows ST2 нашел что-нибудь, что работает для форматирования CSS/HTML/Javascript, предпочтительно за один раз?

Редактировать: Поскольку этот вопрос получает много просмотров без активности, я скажу, что я am все еще ищу плагин, который может форматировать различные типы сценариев в одной команде.

Октябрь 2013 г. До сих пор не нашел ничего, что хорошо бы покрывало JS+CSS+HTML, однако я остановился на JsFormat как на сегодняшний день наиболее эффективном и свободном от ошибок с наименьшим количеством настроек только для JavaScript.

  • sublimetext
  • prettify
  • sublimetext2

Аналогичная опция в Sublime Text — это встроенный Edit->Line->Reindent . Вы можете поместить этот код в Preferences -> Key Bindings User :

 { "keys": ["alt+shift+f"], "command": "reindent"}
 

Я использую alt + shift + f , потому что я пользователь Netbeans.

Чтобы отформатировать код, выберите все, нажав ctrl + a и «Ваша комбинация клавиш». Извините меня за мой плохой английский.


Или, если вы не хотите выделять все перед форматированием, вместо этого добавьте в команду аргумент:

 { "keys": ["alt+shift+f"], "command": "reindent", " аргументы": {"single_line": false} }
 

(согласно комментарию @Supr ниже)

1

Sublime CodeFormatter поддерживает форматирование для PHP, JavaScript/JSON/JSONP, HTML, CSS, Python. Хотя я не использовал CodeFormatter очень давно, я был впечатлен его возможностями «украшать» JS, HTML и CSS. Я не пробовал использовать его с PHP (я не занимаюсь разработкой PHP) или Python (с которым у меня нет опыта), но оба языка имеют много вариантов в .sublime-settings файл.

Одно замечание, настройки не очень легко найти. В Windows вам нужно будет перейти к вашему %AppData%\Roaming\Sublime Text #\Packages\CodeFormatter\CodeFormatter. sublime-settings . Поскольку у меня нет Mac, я не уверен, где находится файл настроек в OS X.

Что касается сочетания клавиш, я добавил эту привязку клавиш в свой файл « Key Bindings — User »:

 {
    "клавиши": ["ctrl+k", "ctrl+d"],
    "команда": "code_formatter"
}
 

Я использую Ctrl + K , Ctrl + D , потому что это то, что Visual Studio использует для форматирования. Конечно, вы можете изменить его, просто помните, что то, что вы выберете, может конфликтовать с сочетанием клавиш какой-либо другой функции.

Обновление:

Похоже, разработчики Sublime Text CodeFormatter упростили доступ к файлу .sublime-settings . Если вы устанавливаете CodeFormatter с плагином Package Control, вы можете получить доступ к настройкам через Preferences -> Package Settings -> CodeFormatter -> Settings — Default и переопределите эти настройки с помощью пункта меню Preferences -> Package Settings -> CodeFormatter -> Settings — User .

1

Я не могу говорить о 2-м или 3-м, но если вы сначала установите Node, Sublime-HTMLPrettify работает очень хорошо. После установки вам необходимо настроить собственное сочетание клавиш. Одна вещь, которую я заметил в Windows, вам может потребоваться отредактировать ваш путь для Node в переменной %PATH%, если он уже длинный (я думаю, что ограничение составляет 1024 для переменной %PATH%, и все, что после этого, игнорируется.)

Есть ошибка Windows, но в проблемах есть исправление. Вам нужно будет отредактировать файл HTMLPrettify.py — https://github.com/victorporof/Sublime-HTMLPrettify/issues/12

. 5

Возможно, этот ответ не совсем то, что вы ищете, но он будет форматировать любой язык с помощью одного и того же сочетания клавиш. Решением являются сочетания клавиш для конкретного языка.

Для каждого языка, который вы хотите отформатировать, вы должны найти и загрузить для него подключаемый модуль, например форматировщик html и форматировщик C#. И затем вы сопоставляете команду для каждого плагина с одной и той же клавишей, но с другим контекстом (см. ссылку).

Приветствие

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

sublimetext3 — Автоматический отступ в Sublime Text

спросил

Изменено 1 год, 4 месяца назад

Просмотрено 107 тысяч раз

Есть ли какая-либо команда/ярлык для автоматического отступа всего моего кода на странице одновременно в Sublime Text 3?

например: В NetBeans я могу сделать это с помощью Alt + Shift + F .

  • sublimetext3
  • sublimetext
  • форматирование кода

В Sublime это довольно просто. Просто Ctrl+Shift+P (или Command+Shift+P в MacOS), чтобы открыть палитру инструментов, введите reindent и выберите Indentation: Reindent Lines . Он должен изменить отступ всего файла, в котором вы находитесь, просто не забудьте сохранить его перед запуском команды, иначе он может не появиться.

5

Просто добавьте эту привязку в файл «Привязки клавиш — Пользователь»:

Настройки > Привязки клавиш — пользователи

 {"keys": ["alt+shift+f"], "command": " redent", "args": {"single_line": false}}
 

И добавьте этот код в квадратные скобки.

Теперь вы можете использовать Alt + Shift + f в качестве ярлыка автоматического отступа

Вы также можете использовать функцию «повторного отступа» через палитру команд.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *