Открытие в браузере HTML файла, редактируемого в Sublime Text

#sublime_text

Народ, может, кто знает, как запустить html файл из Sublime Text? В NotePad++ это
можно выполнить шорткатом Ctrl+Alt+Shift+X.
    

Ответы

Ответ 1

А насколько мне известно Sublime для того и создан что бы добавлять нужный для себя
функционал ;)

Все достасточно просто и немного зависит от вашей ОС

Для начала создадим новую систему сборки 

Tools -> Build System -> New Build System...


в открывшемся нужно написать:

Для Mac OS 

{
"cmd": ["open", "-a", "Google Chrome", "$file"]
}


Для Linux

{
"cmd": ["google-chrome", "$file"]
}


Для Windows (у меня 8.1 но должно работать почти на всех) 

{
"cmd": ["Путь до браузера", "$file"]
}
У меня это "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"


При этом двойной слеш нужен для экранирования

Собственно все, сохраняем файл как Chrome.sublime-build

Закрываем и открываем снова SublimeText

Заходим в

Tools -> Build System 


Выбираем Chrome и запускать открытые файлы в нем можно нажатием Ctrl+B


Ответ 2

Второй вариант

Использование Build System — функции, позволяющей открывать редактируемые в Sublime
Text файлы через другие программы.

Лично у меня не заработал вариант, предложенный ув-мым Виктором. Открылся Chrome,
но не редактируемый документ. В консоли вывелось следующее:


[3380:2968:0423/114832:ERROR:connection.cc(1934)] Cookie sqlite error 
1, errno 0: no such column: firstpartyonly, sql: SELECT creation_utc,
host_key,  name, value, encrypted_value, path, expires_utc, secure,
httponly, > firstpartyonly, last_access_utc, has_expires, persistent,
priority FROM cookies WHERE host_key = ? AND persistent = 1
[Finished in 13.5s]



В моём браузере Pale Moon Portable на Windows 10 файлы открываются, когда в файле
«билда» с расширением sublime-build прямые и обратные слэши скомбинированы следующим
образом:

{
    "shell_cmd": "\"E:/Pale Moon/Palemoon-Portable.exe\" \"$file\"",
    "selector": "text.html.basic, text.xml"
}


Для Chrome:

{
    "shell_cmd": "\"C:/Program Files/Google/Chrome/Application/Chrome.exe\" \"$file\"",
    "selector": "text.html.basic, text.xml"
}


$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, имеются дополнительные инструменты быстрого
предпросмотра, однако их обзор выходит за пределы поставленного вопроса.


Ответ 3

Первый вариант

Для меня наиболее предпочтительный. SublimeServer — HTTP-сервер, реализованный как
плагин для Sublime Text. С его использованием может отпасть нужда в Open Server, WAMP
Server, Денвере, Mongoose или их альтернативах. Примеры преимуществ использования SublimeServer
в сравнении с обычным открытием HTML-файла через Build System:


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


Устанавливаем его как и все другие плагины через Package Control → Ctrl+Shift+P →
SublimeServer: Start SublimeServer. Автоматически запускать SublimeServer вместе с
Sublime Text у меня не выходит. В файле, где работаем, кликаем куда-нибудь правой кнопкой
мыши, и в контекстном меню выбираем View in SublimeServer. Можно задать хоткей: Preferences
→ Key Bindings - User → в открывшийся файл Default(Ваша операционная система).sublime-keymap
вставляем { "keys": ["alt+home"], "command": "sublimeserver_browser" }, где alt+home
→ выбранное вами сочетание горячих клавиш. В файле используется синтаксис JSON, следите
за правильной расстановкой {фигурных}, [квадратных] скобок и запятых. Корректный пример
файла sublime-keymap:

[
    // Открыть PowerShell
    { "keys": ["alt+shift+t"], "command": "open_terminal" },
    // Открыть страницу на сервере
    { "keys": ["alt+home"], "command": "sublimeserver_browser" },
    // Emmet вверх на 1 цифры CSS
    {
        "keys": [
            "ctrl+keypad_plus"
        ],
        "args": {
            "action": "increment_number_by_1"
        },
        "command": "run_emmet_action",
        "context": [
            {
                "key": "emmet_action_enabled.increment_number_by_1"
            }
        ]
    },
]


Ответ 4

Третий вариант

Файлы запускаются и из сайдбара, если установлен плагин Sidebar Enhacements. 
Кликаем правой кнопкой мыши по имени файла в сайдбаре → Open Run → файл откроется
в сопоставленной ему программе, для HTML это обычно браузер по умолчанию.

Если желаете открыть файл в другом браузере, требуется произвести настройки: кликаем
правой кнопкой мыши по имени файла в сайдбаре → Open With → Edit Applications... →
в открывшийся файл вставляем код и сохраняем его:

{
    "caption": "Firefox Portable",
    "id": "side-bar-files-open-with-firefoxportable",

    "command": "side_bar_files_open_with",
    "args": {
                        "paths": [],
                        "application": "E:\\Firefox\\FirefoxPortable.exe", // WINNT
                        "extensions":"html|htm", //open all even folders
                        "args":[]
                    },
    "open_automatically" : false // will close the view/tab and launch the application
}, 


Где


"caption": "Firefox Portable" — отображаемое имя Вашего браузера. Можно задать любое,
какое удобно.
"id": "side-bar-files-open-with-firefoxportable" — необходимо написать side-bar-files-open-with-,
а дальше задаёте имя по собственному усмотрению.
"E:\\Firefox\\FirefoxPortable.exe" — путь к исполняемому файлу браузера. Проще указывать
абсолютный, нежели относительный. Слэши обратные и дублируются.
"extensions":"html|htm" — в контекстном меню после клика правой кнопкой мыши по имени
файла пункт Firefox Portable будет показываться только, если файл имеет расширение
html или htm, расширения отделяются друг от друга через пайп. Параметр extensions может
принимать и другие значения:


"extensions": "" — пункт Firefox Portable будет показываться в контекстном меню,
если мы в сайдбаре кликнем правой кнопкой мыши по файлу с любым расширением или папке.
"extensions" :". *" — пункт Firefox Portable будет показываться в контекстном меню,
когда мы в сайдбаре кликнем правой кнопкой мыши по файлу с любым расширением, но не папке.



Кликаем в сайдбаре правой кнопкой мыши по файлу с расширением html или htm → Open
With → Firefox Portable → файл откроется в портативной версии Firefox.


Ответ 5

Четвёртый вариант

В последнее время для создания команд я пользуюсь фреймворком Suricate. Многофункциональный,
одной из его возможностей является удобная работа с командами.





Обоснование

Положим, мы создали build system для открытия текущего файла в определённом браузере
и хотим запускать команду горячими клавишами, из контекстного меню, Menu Bar и command
palette. Итого потребуется правка четырёх файлов: sublime-keymap, Context.sublime-menu,
Main.sublime-menu и sublime-commands; а включая файл sublime-build нашей Build System
— 5. Причём в файлах мы вынуждены писать один и тот же текст; и так для настройки каждой
новой команды, которых может быть множество.

В Suricate:


Правится всего один файл с расширением suricate-profile, а не 5;
В этот один файл можно поместить все настройки запуска команд как плагинов, так и
по умолчанию;
Гораздо меньше лишней писанины, ничего не надо повторять.






Результат

Command palette



Menu Bar



Контекстное меню



Запуск шорткатом







Настройка запуска файла

Устанавливаем Suricate через Package Control → Preferences → Package Settings → Suricate
→ Default Profile — User → в открывшийся файл вставляем следующий код:

{
  "user_commands":
  {
    // Запустить Firefox
    "sasha-firefox": {
        "call": "Suricate.lib.process.spawn",
        "args": {
            "cmd": ["E:\\Firefox\\FirefoxPortable.exe", "$file"]
        },
        "caption": "Sasha Firefox",
        "group": "main.preferences",
        "keys": ["+super+keypad6"],
        "context_menu": true
    },
  }
}


Сохраняем файл — должно работать, как на скриншотах и скринкасте выше. Не путайтесь
в JSON-синтаксисе, следите за правильной расстановкой кавычек, скобок и запятых.

Параметры и значения


sasha-firefox — идентификатор команды. Можете писать что угодно, лишь бы не совпадало
с идентификаторами других команд.
call — вызов. В примере:


Suricate.lib.process.spawn вызывается функция spawn() модуля Python Suricate.lib.process.
Это аналогично запуску Build System в Sublime Text.

args — аргументы команды. Синтаксис аналогичен используемому в Build System. В примере:


E:\\Firefox\\FirefoxPortable.exe — путь к исполняемому файлу браузера. Указываете свой.
$file — системная переменная для Build System, означает, что сторонней программой,
в данном случае Firefox, запустится открытый в данный момент файл.

caption — текст, нажав на который в command palette, Menu Bar и контекстном меню,
запускается команда.
group — откуда будет запускаться команда из меню. В примере это Preferences → Package
Settings → Suricate.
keys — шорткат. 


 — Ctrl для Windows и Linux и Cmd для MacOS.

context_menu — добавлять или нет команду в контекстное меню.






SublimeServer и Suricate

По причинам, изложенным в данном ответе, использование SublimeServer выглядит предпочтительнее
в сравнении с открытием файла через file:///. Добавляем в тот же файл Default.suricate-profile,
куда заносили пример для Firefox, следующий код:

// Запустить SublimeServer
"sasha-sublimeserver": {
    "caption": "SublimeServer: View into SublimeServer",
    "keys": ["+super+insert"],
    "call": "sublime.sublimeserver_browser",
},


Вот так я запускаю файлы в браузере. Запуск из Menu Bar и контекстного меню в примере
я опустил, поскольку не пользуюсь этим.

Значения параметра

Синтаксис значения call для дефолтных команд и команд плагинов в Suricate следующий:
sublime.$команда. Регистр имеет значение, Sublime.sublimeserver_browser не будет работать,
как и suricate.lib.process.spawn в примере выше.





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

Возможности Suricate далеко не ограничиваются описанным в данном ответе.


Описание Suricate со скринкастами,
Часть документации, касающаяся настройке запуска команд,
Описание параметров настройки команд с примерами.