Как изменить табуляцию в sublime text
Пример: если у меня есть документ с отступом в 2 пробела, и я хочу, чтобы он имел отступ в 4 пробела, как мне автоматически преобразовать его с помощью редактора Sublime Text?
Вот изящный трюк в Sublime Text 2 или 3 для преобразования вашего отступа в документе.
TL; DR:
Преобразование 2 пробелов в 4 места:
Убедитесь, что для ширины табуляции установлено значение 2. Преобразуйте отступ с двумя пробелами в табуляцию, переключитесь на ширину табуляции 4, а затем преобразуйте отступ обратно в пробелы.
Подробное описание:
Он должен читать:
- Tab width: 4
- Convert Indentation to Spaces
Недавно столкнулся с подобной проблемой. Я использовал превосходный редактор. проблема не в коде, а в редакторе.
Ниже у меня сработало изменение настроек предпочтений.
Меню Sublime Text -> Настройки -> Настройки: зависит от синтаксиса :
Самым простым, что я сделал, было,
изменил мой отступ на вкладки
И это решило мою проблему.
Ты можешь сделать то же самое,
А также в соответствии с вашими потребностями.
Упомянул снимок того же.
Я также последовал совету Джоша Франкеля и создал Sublime Macro + добавленную привязку клавиш. Разница в том, что этот сценарий гарантирует, что интервал сначала устанавливается на табуляцию и устанавливается на размер табуляции 2. Макрос не будет работать, если это не начальная точка.
В Mac, чтобы использовать привязку макроса + клавиши:
- Создайте файл с именем spaces2to4.sublime-macro и скопируйте / вставьте код из сути. Для меня это находится по адресу:
/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/spaces2to4.sublime-macro
- Выберите Sublime Text > Preferences > Key Bindings
- Добавьте эту команду в указанную пользователем таблицу sublime-keymap (она находится в массиве - она может быть пустой):
Теперь ⌘ + shift + o теперь автоматически преобразует каждый файл с отступа в 2 пробела в 4 (но сохранит отступ, если вы запустите его дальше)
Вы должны добавить этот код в свои пользовательские привязки клавиш:
Нажав ctrl + f12, он изменит отступ вашего файла до размера табуляции 4, если вы хотите другой размер табуляции, вы просто измените число «значения». Формат te - это простой json.
Я написал для него плагин. Вы можете найти его здесь или найти «ReIndent» в элементе управления пакетами. В основном он делает то же самое, что написал Кайл Финли, но удобным способом с ярлыками для преобразования между 2 и 4 и наоборот.
Если вы найдете более быстрый поиск и замену, вы можете использовать замену регулярного выражения следующим образом:
Найти (регулярное выражение): (^|\G) (вместо "" <space> вы можете просто написать два пробела. Используется здесь для ясности.)
Замените 4 пробелами или как хотите, например \t .
Хотя многие из предложений работают при преобразовании 2 -> 4 пробела. Я столкнулся с некоторыми проблемами при преобразовании 4 -> 2.
Вот что я в итоге использовал:
Sublime Text 3/Packages/User/to-2.sublime-macro
Я нашел, на мой взгляд, более простое решение, чем Magne:
В Windows или других платформах измените cmd+f и alt+enter любыми горячими клавишами find и select all .
Примечание: этот метод подвержен «ошибкам», если в вашем коде есть более одного пробела. Таким образом, он менее безопасен, чем метод Магне, но быстрее (по крайней мере, для меня).
На самом деле я обнаружил, что для моего рассудка лучше, чтобы пользовательские предпочтения определялись следующим образом:
detect_indentation: false особенно важен, поскольку он заставляет Sublime соблюдать эти настройки в каждом файле, в отличие от настроек View -> Indentation .
Если вы хотите пофантазировать, вы также можете определить сочетание клавиш для автоматического изменения отступа вашего кода (YMMV), вставив следующее в Sublime -> Preferences -> Key Binding - User :
Насколько я могу помнить, такое требование небезосновательно, ибо существуют рекомендации Google Руководство по оформлению HTML/CSS кода от Google, в которых упоминается данный вопрос.
Я нахожу такое объяснение (и это мое личное предпочтение) данному вопросу. Итак, приступим к рассмотрению, как настраивается отступы и табуляции в Sublime Text.
В правом нижнем углу находится кнопка-текст, при нажатии на которую открывается контекстное меню, представленное выше.
Редактирование файла конфигурации Sublime Text
Вот в него я и буду писать свои личные предпочтения для работы в Sublime Text.
По умолчанию он почти пустой, в нем прописана только одна строка, в которой указана тема, использующаяся в оформлении редактора. Внесу туда настройки, которые хочу видеть (их все можно взять из общего файла, только изменить значение на то, которое нужно). Ниже картинкой показаны настройки, большинство из которых взято на просторах Интернета, то которые весьма полезны:
На картинке выделены две строки, которые отвечают за настройку величины отступа и символов, используемых для его создания.
Если вернуться к остальным настройкам, представленным выше, то можно сказать, что почти все они очень и очень полезны.
Отдельно стоит отметить понравившиеся мне:
О темах для Sublime Text
Лично мне она не нравиться. У нее слишком яркая цветовая гамма. Когда по полдня рассматриваешь HTML или CSS код в Sublime Text, то начинаешь это чувствовать.
Она действительно имеет приятную передачу цветов, сами цвета приглушены (если даже выбран светлый вариант). Ниже приведу картинку с открытым HTML-кодом, расцвеченым в Farzher Neon:
Как настроить отступы в sublime text
June 22, 2013
Насколько я могу помнить, такое требование небезосновательно, ибо существуют рекомендации Google Руководство по оформлению HTML/CSS кода от Google, в которых упоминается данный вопрос.
Я нахожу такое объяснение (и это мое личное предпочтение) данному вопросу. Итак, приступим к рассмотрению, как настраивается отступы и табуляции в Sublime Text.
В правом нижнем углу находится кнопка-текст, при нажатии на которую открывается контекстное меню, представленное выше.
Редактирование файла конфигурации Sublime Text
Вот в него я и буду писать свои личные предпочтения для работы в Sublime Text.
По умолчанию он почти пустой, в нем прописана только одна строка, в которой указана тема, использующаяся в оформлении редактора. Внесу туда настройки, которые хочу видеть (их все можно взять из общего файла, только изменить значение на то, которое нужно). Ниже картинкой показаны настройки, большинство из которых взято на просторах Интернета, то которые весьма полезны:
На картинке выделены две строки, которые отвечают за настройку величины отступа и символов, используемых для его создания.
Если вернуться к остальным настройкам, представленным выше, то можно сказать, что почти все они очень и очень полезны.
Отдельно стоит отметить понравившиеся мне:
О темах для Sublime Text
Лично мне она не нравиться. У нее слишком яркая цветовая гамма. Когда по полдня рассматриваешь HTML или CSS код в Sublime Text, то начинаешь это чувствовать.
Она действительно имеет приятную передачу цветов, сами цвета приглушены (если даже выбран светлый вариант). Ниже приведу картинку с открытым HTML-кодом, расцвеченым в :
Sublime Text 3 для верстки сайтов. Настройка внешнего вида и установка плагинов. Руководство для начинающих
Сегодня расскажу о редакторе кода, которым пользуюсь для верстки сайтов уже много лет. Быстрый, удобный и полностью настраиваемый Sublime Text 3.
Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!
Внешний вид программы
Первым делом, после установки Sublime Text 3, я настраиваю внешний вид программы.
Боковая панель
Цветовая схема
Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.
Для того что устанавливать новые цветовые схемы, плагины и прочие дополнения, мне нужно сперва установить установщик этих дополнений. Звучит сложно, но на деле все гораздо проще.
Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.
Моя любимая цветовая схема установлена, ты конечно же можешь выбрать себе любую другую.
Сочетание цветов очень важно для работы с кодом, так как это влияет не только на восприятие, но и на усталость и здоровье твоих глаз. Так что подбери себе цветовую схему так, чтобы тебя ничего в ней не напрягало. И помни про перерывы в работе!
Дополнительные настройки
Поясню каждую настройку.
Убирает странные отступы в программе между кодом и боковой панелью, что делает общую картину более компактной.
Выставляет размер шрифта по умолчанию.Также быстро изменить размер шрифта, работая с кодом, можно зажав контрол и покрутив колесо мыши.
Эти линии очень полезны для новичка, потому что визуально соединяют открывающий и закрывающий элемент, что существенно помогает в ориентации в коде.
Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер .
Например мы работали работали, а потом неожиданно закрыли программу . Бывает такое? У меня постоянно, так вот эта настройка включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.
Разделение рабочего окна
Еще более улучшить восприятие кода и ускорить процесс верстки нам поможет разделение рабочего окна.
Так же у нас есть варианты поделить экран по горизонтали это Rows: 2 и Rows: 3, нажав например на Rows: 3 получим три горизонтальных окна и можно перекинуть JS файл в третье окно. И последний вариант это Grid: 4 который делит экран пополам как по горизонтали, так и по вертикали. В результате получаются четыре окна. Обрати внимание, что переключаться между режимами можно и с помощью горячих клавиш Alt+Shift+ соответствующая цифра.
Так что у тебя есть широкий выбор по вкусу. Я чаще всего использую одно разделение по вертикали.
Подсветки синтаксиса
Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.
Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.
Например, в дальнейшем я планирую работать с файлами SCSS, открыв его я увижу сплошную простыню из набора белых символов. Не очень удобно, правда?
Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.
Настройка внешнего вида редактора важна, так как мы довольно длительное время проводим за написанием кода. Это влияет на нашу усталость, продуктивность, здоровье да и просто на настроение.
Следующее, что мы сделаем это установим ряд плагинов и дополнений. Их существует огромное количество, а я расскажу про основные, которые активно использую сам и которые в разы ускорят весь процесс верстки. Приступим!
Плагины
AutoFileName
Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.
BracketHighliter
ColorHighliter
Великий и могучий Emmet
Итак, что же умеет Emmet?
Перейдем в HTML файл и попробуем записать тег div с классом .block, для этого нам теперь достаточно поставить точку, написать «block» и нажать клавишу Tab. Мы получим:
Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:
Жмем клавишу Tab и получаем:
Но и это еще не все, мы можем создавать свои сниппеты, то есть шаблоны/заготовки.
Теперь для того чтобы вызвать запись:
нам достаточно написать bl и нажать клавишу Tab
GotoCSSDeclaration
Где [«ctrl+1«] это и есть нужное сочетание клавиш. Сохраняем Cntr+S.
И вот как это работает. У нас должен быть открыт CSS и HTML файлы. CSS как правило очень большой и найти что-то быстро сложно, но это в прошлом. Например, нам нужно изменить CSS для класса content-mainpage кликаем на него мышкой и нажимаем ctrl+1. Вуаля, мы в нужном месте CSS файла.
Ну и для тех, кто дочитал до этого момента покажу еще один плагин, который установить не так просто, но он точно того стоит.
Где ctrl+` это и есть наше сочетание клавиш.
Итак, для чего же мы проделали весь этот нелегкий путь? Как правило, в процессе написания, кода мы работаем сначала с HTML потом переносим названия классов в CSS и работаем уже там. Так вот этот перенос делать вручную давольно долго. И тут нам на помощь приходит плагин Tag. Сейчас нам достаточно выделить нужный HTML код, нажать наше сочетание клавиш ctrl+`
и потом вставить результат копирования в наш CSS ctrl+v.
Как заставить Sublime Text сделать отступ в два пробела для каждой вкладки?
Есть ли способ заставить Sublime Text 2 всегда работать с двумя пробелами на вкладке при работе с файлами Ruby?
Я знаю, что отступ можно установить в пункте меню view -> indentation , но он не привязывается. Каждый раз, когда я открываю новый файл и нажимаю вкладку, он возвращается к четырем пробелам.
Сохраните эти настройки:
Повторите эти действия для любых других типов синтаксиса, открыв файл этого типа и вернувшись к настройкам, чтобы открыть правильный файл настроек для этого синтаксиса.
Я отредактировал это, добавив строку «detect_indentation» для запросов в комментариях; Ранее я использовал Default /User для установки размера вкладки и не нуждался в обнаружении вкладок, но не знаю, связано ли это с глобальной конфигурацией или с тем, что я редко открывал файлы с вкладками.
Перезагрузка не обязательна, хотя в некоторых случаях это может быть.
Если вы хотите принудительно настроить выбранную настройку вкладки, игнорируя то, что, вероятно, уже происходит в файле, то вам следует включить detect_indentation в ваша конфигурация (ваши пользовательские настройки или ваши специфичные для синтаксиса настройки, в зависимости от того, хотите ли вы, чтобы они были глобальными или для файлового типа):
Это также можно сделать с помощью текстовой ссылки в нижней панели Sublime Text 2 (справа), которая по умолчанию гласит «Размер вкладки 4», щелкните ее, и появится окно с параметрами для установки размера вкладки. от 1 до 8 пробелов и включает опции для преобразования табуляции в пробелы и пробелы во вкладки.
Могу ли я предложить EditorConfig ? Существует расширение для автозагрузки и применения .editorconfig файл. Затем просто создайте его в корне вашего проекта.
Таким образом, ваши настройки зависят от проекта и файла, если вы используете разные стили для каждого проекта или языка.
Вот как выглядит мой собственный .editorconfig .
Install Package -> Stupid Indent
Preferences -> Package Settings -> Stupid Indent -> Setting-Users
Я хочу заменить все «четыре пробела», написанные другим текстовым редактором, на вкладки. Как мне это сделать?
В правом нижнем углу строки состояния нажмите Spaces: N (или Tab Width: N , где N - целое число), убедитесь, что он говорит Tab Width: 4 о преобразовании из четырех пробелов, а затем выберите Convert Indentation to Tabs в контекстном меню, которое появится при первом щелчке.
Точно так же, если вы хотите сделать обратное, нажмите Spaces или Tab Width текст в строке состояния и выберите из того же меню.
Выберите все, затем:
Windows / Linux:
затем введите «отступ»
Shift + Command + p
затем введите «отступ»
Это самый быстрый способ удерживать руки на клавиатуре. +1 Удивительно . это дает вам возможность "Reindent Lines" из файлов, таких как Bootstrap, который имеет 2 строки отступа Я думаю, что это не совсем то, что он просит. Это также изменяет отступ строк, так что фактически меняет отступ, и он только спрашивает о преобразовании пробелов во вкладки. В любом случае, это хороший ответ, но в некоторых случаях он может испортить ваши отступы (например, подумайте о шаблонах с отступами). Это лучше, так как работает отлично с копией вставленного кода.Чтобы настроить Sublime на постоянное использование вкладок, попробуйте добавить следующее в settings-> settings-user:
Это правильный ответ, потому что даже после выбора «Отступ с использованием пробелов» этот параметр будет сброшен при перезапуске. ОП попросил обратное. Что странно, тут не вариант. Вкладки ненавистников.View -> Indentation -> Convert Indentation to Tabs / Spaces
Выполните регулярное выражение «Поиск» \t (обратная косая черта, табуляция) и замените его четырьмя пробелами.
Либо главное меню, либо нижнее правое меню строки состояния делают то же самое, с меньшим количеством работы.
@MaxNanasy Так оно и есть. Я предполагаю, что моя неприязнь к символам табуляции настолько глубока, что это подсознание. Этот ответ совершенно не имеет отношения к задаваемому вопросу. Пожалуйста, подумайте о том, чтобы заменить его на правильный ответ или иным образом удалить свой ответ. @AndrewDunn "Полностью"? В самом деле? Как инверсия чего-либо может быть «совершенно» не связана? По определению это связано, и исправление очевидно. Если бы у нас была возможность редактировать ответы.создать связывание клавиш для быстрого пути
добавьте это в « Настройки»> «Привязки клавиш» (пользователь), когда вы нажмете super + alt +, t оно преобразует пробелы во вкладки
Вы можете добавить простую привязку клавиш:
Предпочтение> Связывание ключей - пользователь:
Теперь выберите строку или файл и нажмите: command + l
Если вы хотите рекурсивно применить это изменение ко всем файлам в директое, вы можете использовать модальное меню Find> Find in Files .
Редактировать Я не выделил его на изображении, но вы должны нажать кнопку. * Слева, чтобы Sublime интерпретировал поле Find как регулярное выражение / Edit
Edit 2 Я забыл добавить начало привязки строки к регулярному выражению. Я исправляю это ниже, и обновлю изображение, когда у меня будет шанс / Правка
Регулярное выражение в поле «Найти» ^[^\S\t\n\r] будет соответствовать пробельным символам в группах по 4 (исключая символы табуляции и символы новой строки). Поле замены \t указывает, что вы хотите заменить их на вкладки.
Если вы нажмете кнопку справа от поля «Где», вы увидите параметры, которые помогут вам нацелить поиск, замените. Add Folder опция позволит вам выбрать папку, из которой вы хотите осуществлять рекурсивный поиск. Add Include Filter Опция позволит вам ограничить поиск файлов определенного расширения.
В следующем окне видим стандартный путь для установки программы. Нажимаем Next.
Далее инсталлятор предлагает включить запуск программы в контекстное меню, т.е. при нажатии на файл правой кнопкой мыши в контекстном меню мы будем видеть SublimeText для открытия файла. Это очень удобно. Поэтому устанавливаем флажок Add to explorer context menu и нажимаем кнопку Next.
В следующем окне нажимаем Install.
По окончании установки нажимаем Finish.
После этого запускаем программу, щелкнув по ярлыку на рабочем столе.
Программа платная, но разработчики не ограничивают ее использование ни по функциональным возможностям, ни по времени.
Отличие бесплатной версии от платной в том, что в шапке программы присутствует надпись UNREGISTERED
И иногда появляется окно, предлагающее зарегистрировать и оплатить программу. Можно нажать Отмена и работать дальше.
Настройка внешнего вида программы Sublime Text. Настройка цветовых схем
Сначала отобразим боковую панель. Для этого надо выполнить команду Yiew – Side Bar – Show Side Bar
Слева откроется панель, в которой будут отображаться файлы и папки верстки.
Можно перетащить папку с файлами на левую панель.
Настроим цветовую схему программы и кода. Для этого откроем файл с кодом html и перейдем по команде Preference – Color Scheme…
Открывается окно с предустановленными цветовыми схемами
При выборе любой из схем, изменяется цветовое оформление окна программы Sublime Text.
Для того, чтобы подгружать в программу дополнительные цветовые схемы, необходимо сначала установить установщик.
Для этого переходим в меню Tools – Command Palette…
Появится окно с полем поиска.
В поле поиска вводим install, пока не появится Install Package Control и нажимаем на него.
Через некоторое время появится окно об успешной установке Package Control.
Снова вызываем команду меню Tools – Command Palette…, в поле вводим install, пока не появится Package Control: Install Package и нажимаем на него.
Через некоторое время появится окно со списком доступных дополнений.
В поле поиска вводим название темы Base 16 Color Scheme.
Нажимаем на этот пункт и ждем установки.
После установки переходим к смене схем. Выполняем команду Preferences – Color Scheme.
И видим, что в списке появилось гораздо больше цветовых схем.
Наберем в строке поиска Ocean и выбираем эту тему.
Видим, что цветовое оформление изменилось.
Методом перебора Вы можете подобрать для себя другую понравившуюся цветовую схему.
После этого выберем команду Preference – Theme…
И в появившемся окне щелкнем по Adaptive.sublime-theme.
После этого левая панель программы и окружение также стали темными.
Сделаем еще дополнительные настройки. Выполним команду Prefernce - Settings
Откроется новое окно, разделенное на две части. В левой части прописаны настройки по умолчанию. Их изменить нельзя, их можно только переопределить в правой части. Каждая следующая настройка должна отделяться запятой.
В правом окне уже прописаны некоторые настройки цветовой схемы.
Внесите запись "margin": 0, //Убираем отступ
И сохраните файл командой File – Save. Весь код немного подвинулся влево.
Чтобы увеличить или уменьшить размер шрифта в окне программы, достаточно зажать клавишу Ctrl и крутить колесико. Чтобы вернуться к настройкам по умолчанию, надо выполнить команду Preference – Font – Reset
Пропишем еще несколько настроек:
“tab_size”: 3, //Размер табуляции – т.е. насколько сместится курсор влево при нажатии клавиши Tab
"word_wrap": "true", //Перенос строк всегда
Закройте это окно.
Продолжим настраивать окно программы. Часто в ходе верстки необходимо отображать два файла: html и css. Для этого необходимо разделить окно программы на две части. Сделать это можно командой Yiew – Layout – Columns: 2
Теперь мы можем расположить два файла с кодом рядом.
Синтаксис имеет определенную подсветку для каждого языка. Чтобы увидеть весь список языков и синтаксисов, надо нажать в правом нижнем углу программы на пиктограмму языка. Например, для файла html в правом нижнем углу будет запись HTML, для файла css соответственно запись CSS. Надо щелкнуть по этой записи и появится весь доступный список.
Но, чтобы синтаксис подсвечивался должны быть установлены соответствующие схемы.
Установим дополнительные схемы подсветки синтаксиса.
Например, для файлов SCSS в программе нет предустановленной подсветки синтаксиса. Если мы откроем файл SCSS, то увидим только белый цвет.
Выбираем команду меню Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package.
Вводим SCSS.
После установки в левом нижнем углу окна программы появится запись об успешной установке, но запись быстро исчезнет. Можно проверить, что синтаксис SCSS появился в общем списке. Т.е. в правом нижнем углу вызываем список и видим SCSS в конце списка.
Установка необходимых плагинов
Auto File Name – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.
Выполняем знакомую нам команду Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package и затем AutoFileName.
После установки этого плагина в коде можно видеть содержимое папки, например, img и выбрать соответствующий файл.
Bracket Highlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.
Дополнительные настройки плагина можно сделать, выполнив команду Tools – Color Highlighter
Emmet – позволяет с помощью сокращений писать команды кода.
Например, чтобы написать такой код <div необходимо в редакторе набрать только имя класса и нажать клавишу Tab. Т.е. надо записать .main и нажать Tab
После установки необходимо перезапустить программу.
Goto Css Declaration – навигация в коде. Например, чтобы найти блок стилей для какого-либо класса в большом файле css, необходимо в html файле установить курсор на имя этого класса и нажать горячую клавишу. После этого в файле css курсор автоматически переместится в соответствующий блок стилей.
Чтобы создать горячую клавишу, необходимо после установки плагина выполнить команду Preferences – Key Bindings.
После этого появится экран из двух окон. В левом окне предустановленные настройки, которые нельзя изменить, но можно переопределить в правом окне.
Например, сделаем следующую запись
Тогда переход из html файла на нужный класс в таблице стилей css будет по нажатию клавиш ctrl+q. Не забываем, что в html-файле курсор должен стоять на имени класса, который ищем в таблице стилей.
eCSStractor – плагин позволяет извлекать селекторы sass из html-кода.
Выберите в меню программы Preferences – Package Settings – eCSStractor – Key Bindings – User. Наберите следующий код.
Выберите в меню программы Preferences – Package Settings – eCSStractor – Settings – User. Наберите следующий код.
Теперь можно извлекать селекторы, соответствующие методолигии БЭМ, прямо из HTML кода сочетанием клавиш Ctrl+`(ё).
Tag – позволяет извлекать css селекторы из выделенного фрагмента html-кода.
Устанавливает плагин вручную. Сначала скачайте сам плагин здесь. Затем распакуйте в папку по следующему адресу
C;\Users\Твое имя пользователя\AppData\Rroaming\Sublime Text 3\ Packages
После этого надо перезапустить Sublime Text.
Теперь надо добавить горячую клавишу. Заходим Preferences – Key Bindings. Если была предыдущая запись, новую пишем через запятую. Введите следующий код.
Весь наш файл с учетом предыдущих установок и настроек выглядит следующим образом. У Вас он может выглядеть по-другому. Главное обратите внимание на то, что записи разделяются запятыми (строки 5 и 9).
Ссылки для редактора Sublime Text:
Необходимые плагины:
AutoFileName – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.
BracketHighlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.
Goto-CSS-Declaration – навигация в коде. Чтобы найти блок стилей для какого-либо класса в большом файле css, необходимо в html файле установить курсор на имя этого класса и нажать горячую клавишу. После этого в файле css курсор автоматически переместится в соответствующий блок стилей.
Tag – позволяет извлекать селекторы css из выделенного фрагмента html-кода.Tag.zip Путь для распаковки плагина - C:\Users\ Твое имя пользователя \AppData\Roaming\Sublime Text 3\Packages
а также цветовую схему Base16 Color Scheme и подсветку синтаксиса SASS.
Просмотреть все установленные плагины в Sublime Text можно командой Preferences – Package Settings
Читайте также: