Autofilename sublime text 3 настройка
Раньше-то Eclipse был нашим всем, но на днях произошло неприятное: Eclipse падает всякий раз при копи/пэйст. Открыт соответствующий баг, решения пока нет, а между тем работать в Eclipse стало и решительно, и нерешительно невозможно. Вероятно, можно откатиться на более старые версии, но не факт, бо тогда и окружающие его пакеты тоже надо даунгрейдить, а это не тру.
Но под Linux есть много всяких IDE для разработки, даже есть почти нативное KDevelop. Из кроссплатформенных на слуху:
- PyCharm от JetBrains — выглядит адекватно, но от него завыли кулеры и памяти поуменьшилось изрядно, при этом проект внутри ещё не создан. Нет.
- Atom от GitHub, которое сегодня тоже от Microsoft. Построен на электроне, а это нет!
- VS Code (он же Visual Studio Code) от Microsoft. Нет. от кого-то из гугла (Джон Скиннер). Слово sublime переводится как «возвышенный, величественный, высокий, грандиозный».
Тут и остановимся.
В основе своей Sublime Text разочаровывающе примитивный и требуется время на его освоение и настройку, но это и хорошо. Можно подключать к простой основе только те расширения, которые понадобятся в работе, а это unix way. У него много документации (unix way!)? Он в принципе хочет каких-то денег (not a unix way!), но не настойчиво да и не особо много, поэтому всё норм.
BracketHighlighter
Выделите символы [], (), <>, "", "", для удобного просмотра начального и конечного тегов. Как показано на рисунке:
HTML-CSS-JS Prettify
Формат HTML, CSS,javascriptИ формат кода Json. Чтобы использовать плагин, вам нужно установить nodejs и в Packages-Setting →
HTML/CSS/JS Prettify→
Установите путь установки вашего узла в поле set set path. Процесс использования: Инструменты →
Палитра команд (или Ctrl + Shift + P), введите и выберите htmlprettify, чтобы завершить форматирование всего документа. Вы также можете установить сочетания клавиш: «Настройка пакетов» → «HTML / CSS / JS Prettify» → «Установить сочетания клавиш», потому что мой ctrl + shift + h уже занят, поэтому я изменил на ctrl + shift + alt + h.
1
Установка Sublime Text в Debian
Install the GPG key:
Select the Stable channel to use:
Update apt sources and install Sublime Text
BracketHighliter
1.1
Основная настройка Sublime Text
Для управления пакетами надо включить Package Control (инструкция):
Расширение возможностей Sublime Text
- Tools > Command Palette… (Ctrl+Shift+P)
- Начать набор команды «install» > появятся подсказки > Выбрать «Package Control: Install package»
- начать набор названия пакета, который надо установить > появятся подсказки > выбрать нужный и даблклик или Enter.
Restart Sublime Text.
Установка Package Control в Sublime Text
Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чем вы получите соответствующее уведомление.
Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.
Emmet
Front-end разработкаТребуется, меньше писать, показать больше, использовать клавишу Tab для запуска. После установки Emmet, вы можете ввести небольшое количество кода и нажать клавишу Tab, система автоматически завершит код.
Боковая панель
Для отображения панели переходим View – Side Bar – Show Open Files. В этой панели будут отображаться наши проекты, то есть папки и файлы нашей верстки. Для наглядности сейчас добавлю один из них. Все что там нужно сделать — это просто перетащить папку с проектом на нашу панель.
Плагины
Общие плагины
Sublime предназначен для просмотра, установки и удаления плагинов через диспетчер плагинов Package Control.
Установить пакет управления
Поиск Baidu Package Control, чтобы открыть официальный сайт
Нажмите, чтобы скачать файл
Открыть каталог файлов
Поместите загруженный файл в каталог установленных пакетов и перезапустите редактор. Установка прошла успешно
Внешний вид программы
Первым делом, после установки Sublime Text 3, я настраиваю внешний вид программы.
ColorPicker
Палитра, когда вам нужно ввести цвет, вы можете напрямую выбрать цвет. Используйте сочетание клавиш ctrl + shift + c, чтобы открыть цветовую палитру. Следует отметить, что эта комбинация клавиш может не открывать палитру, поскольку комбинация клавиш занята, наиболее прямым решением является настройка непосредственно в Предпочтения → Связывание клавиш-Пользователь: ", "
Необходимые плагины:
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
Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода Sublime Text 3, установке необходимых для верстки плагинов и создании своего пресета настроек для быстрого старта на новом рабочем месте.
Вам наверняка знакома ситуация, когда на новом рабочем месте необходимо быстро установить и настроить Sublime Text для работы над новыми проектами. Как правило, тонкая настройка Sublime Text занимает много времени и выполнять ее каждый раз не практично и долго.
Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения верски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.
По умолчанию Sublime Text выглядит довольно печально:
Разделение рабочего окна
Еще более улучшить восприятие кода и ускорить процесс верстки нам поможет разделение рабочего окна.
Поскольку практически всегда приходится работать с несколькими разными файлами, например index.html style.css и какой-то js файл, то дополнительным удобством будет разделение окна с кодом на секторы. Варинтов несколько. Переходим в View – Layout и смотрим что тут у нас есть.
Соответственно Single – это вид без разделений как сейчас, Columns: 2, 3, 4 это разбивка по вертикали. Например нажав на Columns: 2 наш экран с кодом разделится пополам, и мы можем часть файлов переместить в пустую колонку, например CSS слева HTML и JS справа, что делает работу более наглядной и быстрой.
Так же у нас есть варианты поделить экран по горизонтали это Rows: 2 и Rows: 3, нажав например на Rows: 3 получим три горизонтальных окна и можно перекинуть JS файл в третье окно. И последний вариант это Grid: 4 который делит экран пополам как по горизонтали, так и по вертикали. В результате получаются четыре окна. Обрати внимание, что переключаться между режимами можно и с помощью горячих клавиш Alt+Shift+ соответствующая цифра.
Так что у тебя есть широкий выбор по вкусу. Я чаще всего использую одно разделение по вертикали.
Terminal
Откройте терминал файла. Терминал по умолчанию CMD. Ctrl + Shift + T открывает папку, в которой находится файл, Ctrl + Shift + Alt + T открывает корневую папку проекта, где находится файл, и вы можете самостоятельно перенастроить сочетания клавиш. Вы также можете щелкнуть правой кнопкой мыши открыть терминал здесь, чтобы открыть.
Подведем итог плагинов, представленных ранее:
Alignment
AutoFileName
BracketHighlighter
ColorPicker
CSS Format
DocBlockr
Emmet
JsFormat
Sidebar Enhancements
Tag
Trailing Spaces
ConvertToUTF8
HTML-CSS-JS Prettify
Terminal
и сочетания клавиш, сбрасываемые этими плагинами:
Существует множество плагинов, которые необходимо добавить в соответствии с используемой библиотекой и инфраструктурой, например, jQuery, angular, node.js, less и т. д., если Ctr + Shift + p вводит ключевые слова. Плагин, который вы хотите установить.
JS умные советы, супер прост в использовании
Поскольку существует слишком много сочетаний клавиш, вот лишь некоторые из наиболее часто используемых сочетаний клавиш:
1. Операция
Ctrl + `: открыть консоль Sublime Text (выход Esc)
Ctrl + Shift + P: открыть панель команд (выход Esc)
Ctrl + K, Ctrl + B: комбинация клавиш, отображение или скрытие боковой панели.
Alt: переместить курсор в строку меню, ↑ ↓ ← → переместить курсор
2. Изменить
Ctr + Shift + D: скопировать и вставить строку, в которой находится курсор
Alt +.: закрыть тег
Ctrl + /: закомментировать текущую строку с помощью //.
Ctrl + Shift + /: комментарий с помощью / ** /.
Ctrl + Enter: добавить новую строку ниже текущей строки и перейти к этой строке
Ctrl + Shift + Enter: добавить строку над текущей строкой и перейти к ней
Ctrl + ← / →: перемещать слово за словом,
Ctrl + Shift + ← / →: выбрать слово за словом
Ctrl + Shift + ↑ / ↓: переместить текущую строку (файл будет изменен)
Ctrl + KK: удалить от курсора до конца строки
Ctrl + K Backspace: удалить от курсора до начала строки
Ctrl + Z: отменить
Ctrl + Y: возобновить отмену
Ctrl + J: объединить строки (если выбрано несколько строк для объединения)
Ctrl + [: сделать отступ для выбранного содержимого слева
Ctrl +]: сделать отступ для выбранного содержимого справа
3. Выберите
Alt + F3: после выбора ключевых слов выберите все те же слова. Может использоваться с Ctrl + D.
Ctrl + D Ctrl + K Ctrl + U: Ctrl + D выделяет слово под курсором и выделяет все вхождения слова, снова Ctrl + D, выберет появившееся слово Следующая позиция. В процессе выбора нескольких слов Ctrl + K пропустит выбранное в данный момент слово, а в процессе выбора нескольких слов Ctrl + U вернется назад.
Ctrl + L: выделить всю строку, где находится курсор
Ctrl + X: удалить строку, в которой находится курсор
Ctrl + J: объединить выделенную область в одну строку
Ctrl + Shift + M: выберите содержимое текущей скобки, повторите выбор самой скобки
4. Найти
(если всплывет какое-либо окно, Esc выйдет из всплывающего окна)
Ctr + p: введите контейнер @display (внутри css или js)
Ctrl + F: вызвать окно поиска
Ctrl + H: вызвать окно замены для замены
Ctrl + Shift + H: после ввода содержимого замены замените текущее ключевое слово
Ctrl + Alt + Enter. После ввода содержимого замены замените все подходящие ключевые слова. (ПРИМЕЧАНИЕ. Обратите внимание, что если в это время фокус мыши находится в окне редактирования, замена не удастся, а фокус мыши будет настроен на поле замены, будут работать Ctrl + Alt + Enter)
Ctrl + Shift + F: открыть поиск и замену нескольких файлов
Alt + C: переключить режим с учетом регистра
Alt + W: переключить режим соответствия всего слова
Alt + R: включить / выключить режим обычного соответствия
6. Окно и вкладка
Ctrl + N: создать новую метку в текущем окне
Ctrl + Shift + N: создать новое окно (сочетание клавиш конфликтует с сочетанием клавиш метода ввода Sogou)
Ctrl + W: закрыть вкладку, если вкладки нет, затем закрыть окно
Ctrl + Shift + W: закрыть все открытые файлы
Ctrl + Shift + T: восстановить только что закрытый ярлык.
Ctrl + Tag: переместить тег.
7. Экран
F11: переключиться в обычный полноэкранный режим
Shift + F11: переключение в полноэкранный режим без помех
Alt + Shift + 2: разделение влево и вправо
Alt + Shift + 8, чтобы разделить вверх и вниз
Alt + Shift + 5, чтобы разделить экран вверх, вниз, влево и вправо (т.е. разделить на четыре экрана)
Ctrl + цифровые клавиши: переход на указанный экран
Ctrl + Shift + цифровые клавиши: переместить текущий экран на указанный экран
AutoFileName
Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.
Alignment
Выполнить на определенных переменныхинтеллектуальныйВыравнивание, обычно "=" выравнивание знака, комбинация клавиш по умолчанию - Ctrl + Alt + A, но этот конфликт горячих клавиш и снимок экрана QQ не может быть использован, вам нужно сбросить его, я обычно устанавливаю его на Ctr + Alt + Shift + A, вставьте следующее в Key-Bindings-User: ,
Настройка внешнего вида программы 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 в конце списка.
1
Установка Sublime Text в Debian
Install the GPG key:
Select the Stable channel to use:
Update apt sources and install Sublime Text
Установка необходимых плагинов
Auto File Name – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.
Выполняем знакомую нам команду Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package и затем AutoFileName.
После установки этого плагина в коде можно видеть содержимое папки, например, img и выбрать соответствующий файл.
Bracket Highlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.
Дополнительные настройки плагина можно сделать, выполнив команду Tools – Color Highlighter
Emmet – позволяет с помощью сокращений писать команды кода.
После установки необходимо перезапустить программу.
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).
Trailing spaces
Он может обнаруживать и удалять пробелы кода одним щелчком мыши и автоматически удалять лишние пробелы при сохранении, делая ваш код более компактным и стандартизированным. Функция входа: Изменить →
Trailing Spaces→
Удалите, вы также можете самостоятельно устанавливать горячие клавиши, обычно я устанавливаю их как ctrl + shift + alt + t, вставляя следующее в Key-Bindings-User: ,
Самые популярные плагины для Sublime Text:
- Emmet - ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet;
- AutoFileName - дополняет код при написании путей до файлов в верстке;
- Gist - подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
- Sass - плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
- terminus - плагин встроенного терминала Sublime Text.
- W3CValidators - мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.
Изменить шрифт и цвет фона
Установить размер шрифта и сохранить
Установить цвет фона
Подсветки синтаксиса
Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.
Подсветки синтаксиса – это особое окрашивание цветом того или иного елемента в коде. Например, в этой цветовой схеме в HTML файле краcным выделен тег, зеленым — название класса, белым — текст и так далее. Это делает восприятие кода намного понятнее. Обрати внимание на правый нижний угол окна программы, в зависимости от того как кой файл у нас сейчас активен, CSS HTML JS и так далее происходит переключение отображения кода этого конкретного файла.
Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.
Например, в дальнейшем я планирую работать с файлами SCSS, открыв его я увижу сплошную простыню из набора белых символов. Не очень удобно, правда?
Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.
Открываем наш привычный Commаnd Palette перейдя Tools – Command Palette, либо нажимаем Ctrl+Shift+P набираем install, жмем Install Package Control и ищем дополнение SCSS. Нажимаем на него, после установки мы можем переключить наше отображение на SCSS. Сейчас все выглядит симпатичнее, не так ли?
Настройка внешнего вида редактора важна, так как мы довольно длительное время проводим за написанием кода. Это влияет на нашу усталость, продуктивность, здоровье да и просто на настроение.
Следующее, что мы сделаем это установим ряд плагинов и дополнений. Их существует огромное количество, а я расскажу про основные, которые активно использую сам и которые в разы ускорят весь процесс верстки. Приступим!
ColorHighliter
Обрати внимание на этот код — это код цвета, но какого именно непонятно.
ConvertToUTF8
С помощью этого плагина вы можете редактировать и сохранять файлы, которые в настоящее время не закодированы в Sublime Text, особенно GB2312, GBK, BIG5, EUC-KR, EUC-JP и т. Д., Используемые пользователями из Китая, Японии и Кореи. Вы можете использовать Файл →
Установите File Encoding в меню, чтобы вручную преобразовать кодировку файла. Например, вы можете открыть файл в кодировке UTF-8 и указать сохранение как GBK, и наоборот.
Дополнительные настройки
Дополнительно повысить восприятие кода и комфорт при работе с ним мне помогут следующие дополнительные настройки. Переходим Preferences – Settings. Открывается такое окно разделенное на две части. В левой части настройки по умолчанию, их изменить нельзя, а вот в правой части ты можешь эти настройки переназначить, каждая следующая должна идти через запятую. Вот какие настройки использую я:
Поясню каждую настройку.
Убирает странные отступы в программе между кодом и боковой панелью, что делает общую картину более компактной.
Выставляет размер шрифта по умолчанию.Также быстро изменить размер шрифта, работая с кодом, можно зажав контрол и покрутив колесо мыши.
Если ты вдруг размер изменил случайно, то сбросить его можно перейдя в Preferences – Font — Reset
Эти линии очень полезны для новичка, потому что визуально соединяют открывающий и закрывающий элемент, что существенно помогает в ориентации в коде.
Лично я отключаю их (false) по двум причинам. Первая — я уже не новичок и без них неплохо справляюсь, вторая причина — это следующая настройка.
Отображает невидимые табуляции и пробелы. То есть это не часть кода, а просто разметка для удобства работы. И вот, если включить и draw_indent_guides и draw_white_space то получатеся кашица которая лично меня напрягает. Что из этого использовать, а что нет — решать тебе.
Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер :)
Например мы работали работали, а потом неожиданно закрыли программу :) Бывает такое? У меня постоянно, так вот эта настройка включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.
JsFormat
JsForma может автоматически помочь вам отформатироватьJavaScriptКод для формирования общего формата, например, для сжатия, пробелов и новых строкjsКод организован так, чтобы сделать структуру кода js понятной и легкой для просмотра. В сжатом файле JS щелкните правой кнопкой мыши, чтобы выбрать jsFormat, или используйте горячую клавишу по умолчанию (Ctrl + Alt + F.). Если горячая клавиша занята, ее можно настроить в меню «Предпочтения» → «Привязки клавиш»: «]>,
DocBlockr
После установки плагина вы можете быстро создавать различные форматы комментариев. Когда вам нужно сгенерировать символ комментария, введите / *, /, а затем система возврата каретки автоматически сгенерирует его для вас. Если / находится сразу за определением функции, формат комментария будет основан на функции Генерация параметров.
Установка плагинов в Sublime Text
Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.
Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду "Install Package" и выбираем нужный пакет из списка.
Цветовая схема
Далее настраиваю цветовую схему программы и кода, для наглядности открою любой файл, например, с HTML кодом. Для этого два раза кликаю на нужном файле. Теперь перехожу Preferences – Color Scheme, открывается окошко с установленными цветовыми решениями и при выборе той или иной темы внешний вид нашего кода и сама программа будут меняться.
Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.
Для того что устанавливать новые цветовые схемы, плагины и прочие дополнения, мне нужно сперва установить установщик этих дополнений. Звучит сложно, но на деле все гораздо проще.
Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.
Моя любимая цветовая схема установлена, ты конечно же можешь выбрать себе любую другую.
Общий вид программы мне больше нравится темный, поэтому перехожу Preferences – Theme, и переключаюсь на Adaptive.sublime-theme
Сочетание цветов очень важно для работы с кодом, так как это влияет не только на восприятие, но и на усталость и здоровье твоих глаз. Так что подбери себе цветовую схему так, чтобы тебя ничего в ней не напрягало. И помни про перерывы в работе!
GotoCSSDeclaration
Плагин поможет нам с навигацией в коде. Устанавливаем ровно так же как и предыдущие плагины. Далее назначим горячие клавиши для работы с плагином для этого переходим Preferences – Key Bindings, и пишем следующий код
Где ["ctrl+1"] это и есть нужное сочетание клавиш. Сохраняем Cntr+S.
И вот как это работает. У нас должен быть открыт CSS и HTML файлы. CSS как правило очень большой и найти что-то быстро сложно, но это в прошлом. Например, нам нужно изменить CSS для класса content-mainpage кликаем на него мышкой и нажимаем ctrl+1. Вуаля, мы в нужном месте CSS файла.
Ну и для тех, кто дочитал до этого момента покажу еще один плагин, который установить не так просто, но он точно того стоит.
Зовут его Tag и установить нам придется его вручную. По этой ссылке можно скачать архив с плагином. Далее распаковываем в особую папку программы. Для Windows 10 это C:\Users\[Подставь свое имя пользователя]\AppData\Roaming\Sublime Text 3\Packages. Далее закрываем Sublime и открываем снова и добавляем горячие клавиши открыв Preferences – Key Bindings и дописав следующее:
Где ctrl+` это и есть наше сочетание клавиш.
Итак, для чего же мы проделали весь этот нелегкий путь? Как правило, в процессе написания, кода мы работаем сначала с HTML потом переносим названия классов в CSS и работаем уже там. Так вот этот перенос делать вручную давольно долго. И тут нам на помощь приходит плагин Tag. Сейчас нам достаточно выделить нужный HTML код, нажать наше сочетание клавиш ctrl+`
В следующем окне видим стандартный путь для установки программы. Нажимаем Next.
Далее инсталлятор предлагает включить запуск программы в контекстное меню, т.е. при нажатии на файл правой кнопкой мыши в контекстном меню мы будем видеть SublimeText для открытия файла. Это очень удобно. Поэтому устанавливаем флажок Add to explorer context menu и нажимаем кнопку Next.
В следующем окне нажимаем Install.
По окончании установки нажимаем Finish.
После этого запускаем программу, щелкнув по ярлыку на рабочем столе.
Программа платная, но разработчики не ограничивают ее использование ни по функциональным возможностям, ни по времени.
Отличие бесплатной версии от платной в том, что в шапке программы присутствует надпись UNREGISTERED
И иногда появляется окно, предлагающее зарегистрировать и оплатить программу. Можно нажать Отмена и работать дальше.
Sublime text3 - плагин умной подсказки js и другие часто используемые плагины
Среди многих инструментов Sublime Text, несомненно, является оружием, имеет красивый интерфейс, мощные функции и удивительную производительность. Следует отметить, что это не IDE, а простой инструмент для редактирования текста, но его код выделен. Грамматические подсказки, автоматическое завершение и быстрый ответ, а также поддержка различных расширенных плагинов, что делает процесс редактирования текста очень стандартизированным, быстрым и эффективным.
Sublime является платным программным обеспечением, но загруженное с официального сайта возвышенное ПО можно использовать в обычном режиме после установки, покупать не нужно, преимущество покупки заключается в том, что вам не будет предложено совершить покупку во время использования (на самом деле частота всплывающих окон очень низкая, что не влияет на нормальное использование).
1.3
каждого плагина Sublime Text по-отдельности займет некоторое время, но оно того стоит. Ковыряние в файлах настроек и прописывание инструкций приносит ощущение полного контроля и управления. Unix way же!
1.3.1
Пусть будет Adaptive.
Preferences > Customize Theme
Откроется два файла, один нередактируемый (общие настройки), второй редактируемый, бо сугубо пользовательский. Идея в том, что из общего можно копировать строки настроек в пользовательский файл и всё будет норм.
Иногда эти файлы открываются поодиночке.
Например, впишем это.
В Anaconda встроен довольно строгий линтер, он считает неправильными почти все строки любого кода (и он, конечно, прав), помечая их белыми прямоугольниками. Эту функциональность лучше передать отдельному плагину, бо лучше использовать линтер под свой язык программирования и строго под выбранные юзером правила правописания, которые под тот же Python бывают очень разные. Поэтому
Preferences > Package Settings > Anaconda > Setting — User
Этот файл пуст, можно прописать там и отключение линтера анаконды, и путь к рабочей версии Python:
Позже можно будет использовать возможности Anaconda для автоформатирования кода по CTRL-ALT-R (насколько это, конечно, применимо к тому же питону) в соответствии с правилами PEP8. Там тоже надо настраивать точнее, бо по-умолчанию эта шняга заменяет табы четырьмя пробелами.
View > Indentation > Tab Width: 4 //эту настройку в будущем уже не трогаем
View > Indentation > Convert Indentations to Tabs
В правом нижнем углу окна отображается эта же настройка ‘Tab Size: 4’.
Левомышечный клик по ней открывает то же самое меню, что из View. Остаётся кликнуть по последней команде: Convert Indentations to Tabs. Можно использовать каждый раз после CTRL-ALT-R.
Надо пореже использовать CTRL-ALT-R и воспитывать в пальцах изначально принудительное правописание и отступы, в Python этот аспект важнее, чем в других ЯП.
Настройка хоткея для вызова Sidebar
Вызов или через View > Sidebar, или через последовательное нажатие «Ctrl+k, Ctrl+b».
Клавиши можно переназначить, например, на Ctrl+\: Preferences > Package Settings > Side Bar > Key Bindings — User
1.3.4
Настройка консоли для запуска скриптов на Python
По-умолчанию дежурный запуск скриптов на Python делается во встроенной консольке через Ctrl+B. Годно, если надо просто что-то выполнить, и нет, если подразумевается интерактивность со стороны юзера.
Ctrl+Shift+P > Package Control: Install Package > Terminus
Затем сохранить в каталог с пакетами (/~/.config/sublime-text/Packages/User/) новый файл close_terminal.py — это плагин для тонкой обработки будущих окон терминала. В частности, он будет при каждом билде скрипта в разработке держать фокус на окне со скриптом и фокус только на одном окне терминала, чтобы не открывалось новое при каждом нажатии Ctrl+B.
Tools > Build System > New Build System (откроется пустой файл настроек)
Путь /usr/bin/python3 общий, тут можно задать любое направление к разным версиям, буде таковая необходимость соизволит явиться.
Под виндой, соответственно, в shell_cmd надо указать путь к python.exe, и делать это надо чуть заковыристо, через двойные косые: «shell_cmd»: «D:\\.python_venvs\\general_python\\Scripts\\python.exe -u \»$file\»».
Эти самые pre_window_hooks и post_window_hooks пришли из плагина close_terminal.py
Ctrl+S > дать новому файлу sublime-build имя вроде ’BuildPython3.sublime-build’ и убедиться в том, что он сохраняется в /~/.config/sublime-text/Packages/User/
Tools > Build System > выбрать ’BuildPython3‘
Больше эту настройку можно не трогать. Теперь общий хоткей Ctrl+B вызовет консоль Terminus справа от окна с кодом и в ней выполнит код по заветам прописанного интерпретатора Python.
Перевод фокуса с одной панели на другую с клавиатуры через Ctrl+1 и Ctrl+2 — если на экране две панели (их можно понаоткрывать бесчетно).
Сегодня расскажу о редакторе кода, которым пользуюсь для верстки сайтов уже много лет. Быстрый, удобный и полностью настраиваемый Sublime Text 3.
Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!
CSS Format
Формат CSS может форматировать любой код CSS, SASS, SCSS, LESS в расширенную, компактную, сжатую форму, выбирать код стиля, который необходимо отформатировать, щелкните правой кнопкой мыши и выберите «Формат CSS» и выберите формат, который необходимо сформировать.
Плагин Tag предоставляет различные операции над тегом Tag с функциями: закрытие тега HTML в соответствии с / автоматически, автоматическое выравнивание тега (или выбор ctrl + alt + f), удаление тега и его содержимого и вставка тега + shift +, «Создать теги», удалять атрибуты в тегах, закрывать теги, проверять теги и т. д. Некоторые функции выполняются автоматически, некоторые функции должны быть выполнены вручную, ввод функции Строка меню Правка →
Tag。
Ссылки для редактора Sublime Text:
Тонкая настройка редактора, пресет моих настроек
Переходим к настройкам Sublime Text.
Предтавляю мой пресет настроек, который я всегда использую для стартовой настройки редактора Sublime Text на новом рабочем месте или после переустановки системы. Вы можете использовать данный пресет в вашем редакторе и кастомизировать его при необходимости:
Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) - отдельно:
Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) - отдельно:
Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.
Разместив данные сниппеты в соответствующих файлах настроек вы получите полностью готовый к рабое, настроенный Sublime Text или можете настроить редактор под себя. В настройках есть два поля - левое с дефолтными настройками и правое с пользовательскими. В дефолтных настройках вы можете увидеть подсказки к каждому свойству и применить его в правой части скопировав и установив свое значение.
Узнать какое свойство за что отвечает довольно просто - все свойства имеют интуитивно понятные наименования на английском языке. Любое свойство из большого обилия доступных настроек можно просто перевести на русский язык и понять, что оно означает.
Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
"C:\Users\\AppData\Roaming\Sublime Text 3"
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.
Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.
Sidebar Enhancements
Файл щелчка правой кнопкой мыши на боковой панели предоставляет мало функций, но в реальной разработке файл обычно имеет различные запросы на обработку, а плагин расширяет функцию щелчка правой кнопкой мыши на файле боковой панели, например, вы можете напрямую щелкнуть правой кнопкой мыши, чтобы переместить файл в корзину в браузере. Обзор, копирование файлов в буфер обмена и т. Д. Посмотреть деталидокументация боковой панели
Перед установкой плагина есть несколько вариантов щелчка правой кнопкой мыши по файлам:
После установки плагина опция щелчка правой кнопкой мыши по файлу значительно расширяется:
Мои две часто используемые функции - настроить файл на использование сочетания клавиш F12, открытого браузером, и переименовать F2, вам нужно добавить его в Key-Bindings-User
< "keys": ["f12"], "command": "side_bar_open_in_browser","args":<"paths":[], "type":"testing", "browser":"">>,
< "keys": ["f2"], "command": "side_bar_rename">,
Установить плагин
При установке плагина сначала используйте Ctrl + Shift + P (Инструменты → Палитра команд . ), чтобы открыть панель управления, введите PackageControl и нажмите Enter, чтобы отобразить следующий рисунок:
Выберите Управление пакетами: Установить пакет и нажмите Enter. После успешной установки, как показано на рисунке, введите имя плагина в поле ввода, выберите плагин Enter, чтобы установить плагин.
Установка плагина вручную
Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.
Один из таких плагинов BufferScroll - потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.
Для установки BufferScroll вручную, перейдите на GitHub страницу плагина, скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.
AutoFileName
Быстро перечислите имена всех файлов в папке, которую вы хотите процитировать, например, вы хотите процитировать test / img / 1.jpg. Просто введите / img, плагин будет автоматически запрашивать все имена файлов в / img, как показано на рисунке
Великий и могучий Emmet
Итак, что же умеет Emmet?
Перейдем в HTML файл и попробуем записать тег div с классом .block, для этого нам теперь достаточно поставить точку, написать "block" и нажать клавишу Tab. Мы получим:
Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:
Жмем клавишу Tab и получаем:
Но и это еще не все, мы можем создавать свои сниппеты, то есть шаблоны/заготовки.
Для этого перейдем Preferences – Package Settings – Emmet – Settings User. Здесь запишем следующее:
Теперь для того чтобы вызвать запись:
нам достаточно написать bl и нажать клавишу Tab
Установка внешнего оформления Sublime Text
Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.
Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:
- One Dark Color Scheme - цветовая схема для подсветки кода;
- One Dark Material - Theme - тема оформления UI Sublime Text.
Читайте также: