Как сделать табуляцию назад в sublime text

Добавил пользователь Дмитрий К.
Обновлено: 28.09.2024

Пример. Если у меня есть документ с отступом в 2 раза, и я хочу, чтобы у него было 4 отступа пространства, как я могу автоматически преобразовать его с помощью редактора Sublime Text?

ОТВЕТЫ

Ответ 1

Здесь аккуратный трюк в Sublime Text 2 или 3, чтобы преобразовать интервал отступов в документе.

TL; ДР:

Преобразование из 2 пробелов в 4 пробела:

Убедитесь, что ширина закладки установлена равной 2. Преобразуйте отступ в 2 пробела к вкладкам, переключитесь на ширину вкладки 4, а затем преобразуйте отступ назад в пробелы.

Подробное описание:

Он должен читать:

Tab width: 4
Convert Indentation to Spaces

Ответ 2

Я действительно нашел, что лучше для моего здравомыслия, чтобы пользовательские настройки были определены следующим образом:

detect_indentation: false особенно важен, поскольку он заставляет Sublime соблюдать эти настройки в каждом файле, а не в настройках View -> Indentation .

Если вы хотите получить фантазию, вы также можете определить комбинацию клавиш для автоматического повторного ввода кода (YMMV), вставив следующее в Sublime -> Preferences -> Key Binding - User :

и визуализировать пробелы:

Ответ 3

Я нашел, на мой взгляд, более простое решение, чем Magne:

В окнах или других платформах измените cmd+f и alt+enter на любые ваши find и select all горячие клавиши.

Примечание. Этот метод подвержен "ошибкам", если в вашем коде имеется более одного места. Таким образом, он менее безопасен, чем метод Магне, но он быстрее (по крайней мере для меня).

Ответ 4

В то время как многие из предложений работают при преобразовании 2 → 4 пространства. Я столкнулся с некоторыми проблемами при преобразовании 4 → 2.

Вот что я в итоге использовал:

Sublime Text 3/Packages/User/to-2.sublime-macro

Ответ 5

Если вы обнаружите, что поиск и замена быстрее используются, вы можете использовать замену регулярных выражений следующим образом:

Найти (regex): (^|\G) (Вместо "" вы можете просто написать два пробела. Используется здесь для ясности.)

Замените 4 пробела или что угодно, например \t .

Ответ 6

Я написал для него плагин. Вы можете найти здесь здесь или искать "ReIndent" в управлении пакетами. В основном он делает то же самое, что написал Кайл Финли, но удобным способом с ярлыками для преобразования между 2 и 4 и наоборот.

Ответ 7

Вы должны добавить этот код к своим пользовательским привязкам клавиш:

нажимая ctrl + f12, он будет повторно прикреплять ваш файл к размеру вкладки 4. Если вам нужен другой размер вкладки, вы просто изменяете значение "значение". Формат Te - простой json.

Всем привет. C вами Corvax. Сегодня я хочу поговорить о таком важном инструменте любого разработчика как редактор кода, а точнее Sublime Text 3. Это отличный редактор, который вы можете “прокачать” по своему вкусу и целям. Часто начинающие разработчики редко пользуются горячими клавишами что существенно замедляет их рабочий процесс. Сейчас же я хочу поделиться с вами перечнем тех самых полезных шорткатов. Поехали.

Работа со строками

MaсOS: CMD + L

Win/Linux: Ctrl + L

Выделение целой строки.

MaсOS: CMD + A

Win/Linux: Ctrl + A

Выделить весь код.

MaсOS: CMD + /

Win/Linux: Ctrl + /

История

MaсOS: CMD + Z

Win/Linux: Ctrl + Z

Отмена действий на шаг назад.

Перемещение по файлам и папкам

MaсOS: CMD + R

Win/Linux: Ctrl + R

Если вам нужно быстро переместится по странице, то этот инструмент станет для вас незаменимым. При нажатие комбинации у нас открывается окно по которому вы можете быстро переходить по элементам страницы.

MaсOS: CMD + T

Win/Linux: Ctrl + T

Быстрое перемещение по файлам.

Поиск

MaсOS: CMD + F

Win/Linux: Ctrl + F

Поиск в проекте нужного файле.

MaсOS: CMD + P

Win/Linux: Ctrl + P

Поиск по проекту.

Дополнительные

MaсOS: CMD + Q

Win/Linux: Ctrl + Q

Быстрое закрытие редактора.

MaсOS: CMD + N

Win/Linux: Ctrl + N

Создать новую вкладку.

MaсOS: CMD + S

Win/Linux: Ctrl + S

MaсOS: Ctrl + CMD + F

Здесь я постарался перечислить наиболее часто использованные комбинации клавиш в Sublime Text 3. Надеюсь, что данная статья была вам полезна. С вами был Corvax. Оставляйте ваши комментарии, учитесь, развивайтесь и успехов вам дорогие друзья.

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.

Sublime Text 3 это мощный редактор исходного кода со множеством настроек, сумасшедшим числом плагинов, армией поклонников и еще он очень красивый и удобный! Настройка саблайма для первого пользования окажется довольно сложной т.к. здесь попросту нет настроек.

Когда-то писал про Sublime Text, но тогда я только познакомился с этим чудо редактором. Теперь же опишу все его преимущества, настройку горячих клавиш, полезные комбинации и некоторые интересные плагины.

Особенности Sublime Text

быстрота работы;
приятный внешний вид;
минимализм — ничего лишнего;
отвлеченный режим – вообще ничего лишнего;
графическая карта — быстрый скролл по всей высоте файла;
продвинутый поиск;
сумасшедшее число плагинов (более 800 разработчиков);
мультивыделение и мультиредактирование — правка сразу нескольких строк;
гибкая настройка горячих клавиш, функций;
возможностью разделить экран на несколько частей;

Настройка Sublime Text 3

По умолчанию все настройки уже заданы и записаны в файл Preferences Settings – Default. Если нам необходимо внести изменения, то мы лезем на сайт, ищем нужные настройки, открываем Preferences User – Default и вписываем свои значения.

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

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

В свою сборку вложил этот файл и подробное описание по установке и настройке.

Горячие клавиши

Горячие клавиши настраиваются по аналогии, но, в отличие от настроек, мы не знаем код команды. Поэтому, как и с основными настройками, идем на сайт программы, ищем клавишу, затем открываем Preferences Key Bindings – Default, через поиск находим полный код клавиши и переделываем ее при необходимости в файле Preferences Key Bindings – User

Нашел вот такое: “CTRL+Z Отмена последнего действия”. Теперь открываю файл горячих клавиш по умолчанию и вбиваю в поиск сочетание клавиш (CTRL — прописывается не кнопкой, а четырьмя буквами).

Нашел на 24 строке нужную команду. Переношу ее в пользовательский файл настроек горячих клавиш и меняю комбинацию клавиш на ту, которая мне удобна.

Ниже выкладываю свой файл с настройками. Изменил только две верхние команды, остальное просто собрал, чтобы не забывать сочетания.

В свою сборку вложил этот файл и подробное описание по установке и настройке.

Цветовые схемы

Цветовых схем очень много. По умолчанию стоит тема Monokai. В комплекте идет еще 22 темы.

Создать тему для Sublime Text: SFTP.

В общем, долго обходил стороной проекты, но однажды, а точнее вместе с плагином SFTP воспользовался и мне понравилось. На скриншоте выше пять шаблонов, над которыми я работаю. Два из них синхронизированы с FTP и заливают файлы напрямую, по нажатию Ctrl+S. Так работает SFTP.

Сниппеты

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

Мультивыделение и редактирование

Нажатием одной комбинации клавиш можно установить каретку (мигающий вертикальный курсор) одновременно на все строки после чего, также при помощи комбинации клавиш можно обернуть строки кодом. Например, имеется текст, который нужно обернуть ссылками

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

Первая строка
Вторая строка
Третья строка
Четвертая строка
Пятая строка
Шестая строка
Седьмая строка
Восьмая строка
Девятая строка
Десятая строка

Если запущено мультиредактирование и количество редактируемых строк совпадает с количеством вставляемых — вставит их не в одну строчку, а каждой строке по одной новой. Пример ниже, когда тег TITLE совпадает с текстом ссылки.

В следующем окне видим стандартный путь для установки программы. Нажимаем 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 – позволяет с помощью сокращений писать команды кода.

Например, чтобы написать такой код

необходимо в редакторе набрать только имя класса и нажать клавишу 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

Читайте также: