Открытие в браузере HTML файла, редактируемого в Sublime Text
Народ, может, кто знает, как запустить html файл из Sublime Text? В NotePad++ это можно выполнить шорткатом Ctrl + Alt + Shift + X .
А насколько мне известно Sublime для того и создан что бы добавлять нужный для себя функционал 😉
Все достасточно просто и немного зависит от вашей ОС
Для начала создадим новую систему сборки
в открывшемся нужно написать:
Для Windows (у меня 8.1 но должно работать почти на всех)
При этом двойной слеш нужен для экранирования
Собственно все, сохраняем файл как Chrome.sublime-build
Закрываем и открываем снова SublimeText
Выбираем Chrome и запускать открытые файлы в нем можно нажатием Ctrl+B
Второй вариант
Использование Build System — функции, позволяющей открывать редактируемые в Sublime Text файлы через другие программы.
Лично у меня не заработал вариант, предложенный ув-мым Виктором. Открылся Chrome, но не редактируемый документ. В консоли вывелось следующее:
В моём браузере Pale Moon Portable на Windows 10 файлы открываются, когда в файле «билда» с расширением sublime-build прямые и обратные слэши скомбинированы следующим образом:
$file — системная переменная, означающая открытый на данную минуту файл.
Также в сравнении с ответом Виктора я добавил новый параметр selector . При значении «text.html.basic, text.xml» когда у нас включено автоматическое переключение между Build System: ( Tools → Build System → Automatic ), в браузере при вызове Build будут открываться только XML и HTML-файлы (а также HTM, XHTML). Значения параметра — начальная часть «областей видимости»: открываем пустой файл → View → Syntax → выбираем требуемый синтаксис → получаем scope в нашем пустом файле — как это сделать, подробно расписано здесь, — вставляем нашу область видимости напротив selector . В HTML, HTM, и XHTML область видимости — text.html.basic , в XML, соответственно, text.xml . Перечисление, как видно на примере, ведётся через запятую.
Да, и чтобы не нажимать каждый раз Ctrl+B , имеются дополнительные инструменты быстрого предпросмотра, однако их обзор выходит за пределы поставленного вопроса.
SublimeText. Руководство по настройке
Итак, сначала вопрос, который волнует всех в первую очередь – да, программа платная. Стоит она на конец 2018 года 80 долларов (годом раньше было 40), в сети можно найти версии, вылеченные от жадности. Однако можно без проблем работать и с незарегистрированной версией. Единственное отличие – в топе программы будет написано слово UNREGISTERED и периодически (где-то раз в 2 часа) при попытке сохранения выскакивает окошечко с предложением купить платную версию. Других ограничений не замечено.
Обзор SublimeText
Автором называют некоего Джона Скиннера. Разработка началась в ноябре 2007 года, причём было объявлено о том, что поставлена цель «создать лучший текстовый редактор всех времён и народов ». Первая версия вышла 18 января 2008 года, вторая в 2011, третья в 2013 году. К 2018 году Скиннер со товарищи быстро сориентировались в тенденциях рынка и сосредоточились на Python, накидав много приятных возможностей для программистов «на змее».
Изначально в качестве целевой аудитории подразумевались разработчики, а потому в программе была предусмотрена проверка синтаксиса для множества популярных языков программирования. Это C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML. Можно подключать плагины и для других языков.
Программа выполнена с суровым интерфейсом без кнопок и декоративных элементов, что позволяет на 100% использовать экранное пространство для дела. Экран можно разбить на несколько рабочих областей. Например, слева открывать файл html, а справа css и параллельно с ними работать. Отдельный плюс – можно открывать не отдельные файлы, а целые каталоги и работать в них. Далее мы подробно рассмотрим, что к чему, на примере нашего проекта.
Подсвечивается всё очень красиво, по дефолту установлена приятная для глаза тёмная тема с контрастным выделением. Её ещё очень любят показывать в фильмах и ТВ-передачах, когда нужно снять «что-то о программистах».
Для установки, удаления и настройки плагинов применяется менеджер пакетов. Настраивается редактор довольно специфично – для этого нужно открывать и редактировать файл настроек. Для этого нажимаете в меню «Preferenses —>Settings», после чего можно будет увидеть расположение файла настроек.
Особая гордость разработчиков – интеллектуальный поиск (Incremental Find), который будет находить не только точное вхождение, но и близкие по написанию значения. Понятно, можно использовать обычный поиск, в том числе и с регулярными выражениями.
И, пожалуй, самая большая вишенка на торте – возможность мультиколонного выделения.
Вы просто ставите курсор в нужное место, затем зажимаете шифт и правую кнопку мыши и ведёте мышь вверх или вниз. Курсоры появляются в нескольких местах, и вы можете вводить символы или удалять текст сразу в колонке. Другой вариант – можно создать дополнительные курсоры в любом месте «Ctrl + клик мыши».
Недостатки – это, как обычно, обычно оборотные стороны достоинств. Профессионалы скажут, что Sublime не дотягивает до полноценной IDE и будут правы. Новичкам покажется жутковатым способ настройки через JSON. Любителям офисных программ будет скучновато без красивых кнопок в интерфейсе. Кого-то будут раздражать периодические призывы купить программу, а кому-то не понравится необходимость работы со сторонними плагинами. Тем не менее, как показывает опыт, для разработки сайтов средней и малой сложности SublimeText вполне годится.
Установка и настройка
С установкой никаких проблем нет, достаточно скачать дистрибутив с официального сайта. Представлены версии для Linux, MacOS 32-и 64-разрядной Windows, в том числе portable версии. Файл загрузки невелик, около 8Мб, в дальнейшем, после установки плагинов, программа разрастается до 20-30 Мб. Память потребляет тоже очень скромно, то есть, в целом всё достаточно бережливо с точки зрения ресурсов.
В процессе работы экран может выглядеть примерно так.
Здесь слева мы видим колонку с каталогом проекта, фалы можно открывать просто кликнув на них мышью. Чтобы начать работать с папкой, выбираете в меню «File —> OpenFolder…»
Рабочую область я разбил на две части. Это делается чрез меню следующим образом «View -> Layout -> Column2». Там же вы можете увидеть и другие режимы – например, разбить экран на верхнюю и нижнюю области, либо на 4 части. Вкладки можно перетаскивать с места на место просто зажав мышью.
Установка плагинов
Существуют сотни плагинов, призванных облегчить жизнь разработчику и придать редактору новые возможности. Как показывает практика, лучше этим не увлекаться. Плагины пишут разные авторские коллективы, пакеты могут конфликтовать друг с другом, быть чувствительны к номеру версии и больше мешать, чем помогать. Поэтому я перечислю то, что использую в работе сам и укажу несколько интересных надстроек на ваше усмотрение.
Установка Менеджера Пакетов
Прежде всего, необходимо установить Менеджер Пакетов (Package Control). Сделать это можно вручную или через консоль.
1 Через консоль
Консоль открывается сочетанием клавиш «Ctrl + `» (это крайняя левая клавиша, сразу под Esc). Код, который нужно ввести, скопируйте с официального сайта. Сам код не привожу, поскольку он может отличаться от версии к версии. Копируйте актуальный. Затем нажимаете Enter и откидываетесь на спинку кресла.
2 Вручную
Для этого нужно вначале скачать файл с той же самой страницы, только с правой части. Затем в меню Sublime выбираем «Preferences -> Browse Packages». Теперь нужно перейти на одну папку выше, и открыть папку «Installed Packages». После чего перезапустить редактор.
В результате в меню «Preferences» должны появится пункты «Package Settings» «Package Control». Вот таким образом:
При запуске «Package Control» появляется вот такое окошко, в котором вы можете вводить название нужного плагина. Самые часто используемые разделы: «Install Package» — установить пакет, «Remove Package» – соответственно, удалить. Менеджер пакетов сам находит нужные плагины, распаковывает их из депозитория и запускает. Всё очень удобно.
Перечислим основные полезные пакеты.
Emmet
Без всяких кавычек – самый популярный у фронтендеров плагин. Существенно ускоряет набор кода, принцип применения простой и быстро запоминается. Примеры использования.
Формирование базовой структуры html. В новом файле с расширением html просто ставите ! и нажимаете <Tab>. В результате появляется заготовка в формате html5.
Быстрый ввод блоков. Пишете div.class-name, жмёте <Tab> и получаете структуру вида
Понятно, что вместо div можно вписать один из тегов html5, а вместо class-name – название вашего класса.
Ввод вложенных блоков. Пишете section.class-name>article.class-name2>p, жмёте <Tab> — получаете:
Построение списков. Пишете ul>li*4>a, жмёте <Tab> — получаете:
Это только самые базовые возможности, остальные вы можете посмотреть в официальной документации. Сайт на английском, но сделан очень просто и понятно, с множеством примеров.
ColorPicker
Плагин открывается в отдельном окне и даёт возможность оперативно выбрать цвет из круговой палитры в hex-формате. Открывается в любом месте экрана.
DocBlockr
Плагин «знает» формат комментариев для большинства языков программирования и позволяет быстро вставлять ваши описания в код.
Color Highlighter
Полезный плагин, который сразу показывает цвет, написанный в файле css в шестнадцатеричном коде.
SublimeREPL
Устанавливается по желанию, содержит встроенные компиляторы для нескольких языков программирования, в том числе PHP и Python. После установки в меню появляется вкладка «Toolse -> SublimeREPL», нажав которую вы увидите выпадающую панель с перечнем языков. Ещё один шаг на пути к полноценной IDE. Достаточно удобно, если вы хотите сразу же проверить работу кода не выходя из редактора.
Установка SASS (SCSS) на SublimeText
Существует три способа подключить препроцессор SASS на Sublime.
Во-первых, вы можете использовать программу Koala, о которой подробно рассказано вот здесь.
Во-вторых, можно установить препроцессор глобально, а затем подключить нужные плагины в редакторе.
В третьих, существуют плагины, которые формируют код, используя собственные библиотеки, без внешнего компилятора.
1 Установка SASS на компьютер
Написан этот инструмент на языке Ruby, так что вам придётся установить компилятор языка. Пользователям Windows сделать это проще всего по следующей ссылке. Просто выбираете последнюю версию, с учётом вашей системы 32 или 64 битной и устанавливаете. Все остальные могут воспользоваться вот этим сайтом.
В процессе установки не забудьте установить флажок на пункте «Add Ruby executables to your PATH»
Затем запускаете консоль, нажав Win + R и набрав «cmd». Либо, кому больше нравится, запустив Windows PowerShell. В командной строке наберите инструкцию для Ruby: «gem install sass» (без кавычек).
Компилятор установлен глобально и теперь нужно настроить необходимые плагины для работы с ним.
2 Установка плагинов для использования SASS
Для этого потребуются следующие плагины:
SASS Build – запускает компилятор и формирует файл css. Для настройки перезагрузите Sublime, откройте меню «Tools —> Build System» и выберите пункт SASS. Построение запускается по нажатию клавиш Ctrl + B.
SublimeOnSaveBuild – устанавливаете опционально. Запускает компиляцию каждый раз при сохранении файлов проекта.
3 Встроенный компилятор SASS для Sublime
Также разработчики периодически пытаются придумать способы как использовать препроцессоры, не захламляя компьютер лишними файлами. Согласитесь, довольно странно тащить к себе целый компилятор одного из самых хитроумных языков высокого уровня только для того, чтобы работать с SCSS.
В качестве выхода был предложен плагин Libsass Build. Как пишут разработчики, он работает через некий интерфейс sassc для более быстрой компиляции по сравнению с официальной реализацией Ruby.
Заключение
Итак, мы установили «лучший текстовый редактор всех времён и народов» SublimeText, настроили его внешний вид, добавили необходимые для работы плагины и подготовили всё необходимое для работы с препроцессором.
Sublime text как запустить код
Sublime Text includes a command line tool, subl , to work with files on the command line. This can be used to open files and projects in Sublime Text, as well working as an EDITOR for unix tools, such as git and subversion.
Setup��
Some operating systems and installation methods will require a configuration change to make subl available on the PATH .
Windows��
On Windows, the command line helper is subl.exe . To use this from the Command Prompt or Powershell, the Sublime Text installation folder needs to be added to the Path environment variable:
Windows 10��
Open the Start Menu and type environ
Select the item Edit the system environment variables
Click the button Environment Variables at the bottom of the System Properties dialog
For the current user, select Path in the User variables for section
For all users, select Path in the System variables section
64bit installs are typically in C:\Program Files\Sublime Text\
32bit installs on a 64bit version of Windows will be in C:\Program Files (x86)\Sublime Text\
32bit installs on a 32bit version of Windows will be in C:\Program Files\Sublime Text\
Windows 8��
Press the Windows Key and type environ
Select the item Edit the system environment variables
Click the button Environment Variables at the bottom of the System Properties dialog
For the current user, select Path in the User variables for section
For all users, select Path in the System variables section
In the Variable value input, add an entry with the Sublime Text installation directory. If there is an existing value, add a ; before the Sublime Text directory.
-
64bit installs are typically in C:\Program Files\Sublime Text\
-
32bit installs on a 64bit version of Windows will be in C:\Program Files (x86)\Sublime Text\
-
32bit installs on a 32bit version of Windows will be in C:\Program Files\Sublime Text\
Windows 7��
Open the Start Menu
Right-click on Computer and select Properties
Click on Advanced System Settings in the left-hand sidebar
Click the button Environment Variables at the bottom of the System Properties dialog
For the current user, select Path in the User variables for section
For all users, select Path in the System variables section
In the Variable value input, add an entry with the Sublime Text installation directory. If there is an existing value, add a ; before the Sublime Text directory.
-
64bit installs are typically in C:\Program Files\Sublime Text\
-
32bit installs on a 64bit version of Windows will be in C:\Program Files (x86)\Sublime Text\
-
32bit installs on a 32bit version of Windows will be in C:\Program Files\Sublime Text\
To use subl , the Sublime Text bin folder needs to be added to the path. For a typical installation of Sublime Text, this will be located at /Applications/Sublime Text.app/Contents/SharedSupport/bin .
If using Bash, the default before macOS 10.15, the following command will add the bin folder to the PATH environment variable:
If using Zsh, the default starting with macOS 10.15, the following command will add the bin folder to the PATH environment variable:
Linux��
If Sublime Text is installed via one of the Linux Package Manager Repositories or a package, a subl symlink will automatically be installed into the /usr/bin/ directory.
If installing from a tarball, the sublime_text executable should be symlinked to subl , with a command such as:
The exact details of the symlink command will depend on the installation location. Most default PATH environment variable values should contain /usr/local/bin , so no further commands should be necessary.
Usage��
To see the available flags, run subl —help . The available flags will vary per operating system – the following example is from Linux:
Configuring as EDITOR��
To use Sublime Text as the editor for many commands that prompt for input, set your EDITOR environment variable:
Specifying -w will cause the subl command to not exit until the file is closed.