Как в sublime text 3 открыть html документ в браузере
Sublime Text - View In Browser
View In Browser is a Sublime Text plugin that will open whatever is in your current view/tab. If the file current open is new and has not been saved a temporary file is created (in your default temp directory for your OS) with the extension of .htm and your browser will open it. However if the current open file is saved and has a name this plugin will open it in whatever you have set to handle its type.
By default the keystroke assigned to this plugin is CTRL + ALT + V.
By default this plugin will open files in Firefox. You can configure it to open using another browser of your choice. To do this, choose Settings - User from Preferences > Package Settings > View In Browser.
The browser you wish to use to open files is set in the key named browser. The following is a list of browsers configured for use out of the box.
- Firefox - Mac OS, Linux, Windows
- Chrome - Mac OS, Linux, Windows
- Chrome64 - Windows
- Yandex - Windows
- Safari - Mac OS
- Internet Explorer - Windows
- Chromium - Linux
View In Browser also provides key bindings to open your current view in browser other than your browser setting. Below is a listing of the keys and what browser open with those key bindings.
- CTRL + ALT + F - Firefox
- CTRL + ALT + C - Chrome
- CTRL + ALT + I - Internet Explorer
- CTRL + ALT + S - Safari
Like any other key binding in Sublime these can be changed. Below is an example of the key configuration. You can remap these in your User key bindings configuration file.
One of the things you may notice in the Windows configuration for chrome is a variable in the command path that looks like: %Local AppData%. This is a reference to your Windows installation's AppData folder in your user profile directory. There is a variable there because this value will differ for each user on your computer, and Chrome installs to your AppData folder.
Here is a list of supported variables:
- AppData - Your main application data folder for your profile (usually roaming)
- Personal - Your documents location
- Desktop - The path to your Desktop location (may be unreliable)
- Start Menu - The path to your Start Menu items location
- Local AppData - Your local application data folder for your profile
- My Video - Path to your videos location
- My Pictures - Path to your pictures location
- My Music - Path to your music location
Note that many of these are not terribly useful for determining browser location, unless you have decided to install Firefox in your My Music folder.
Configure to View on Local Server
The View In Browser plugin also supports the ability to view files in the context of a local server. So if you have a local Apache, Tomcat, or some other server application running you can configure this plugin to open your file prefixed with a URL.
To configure this the View In Browser plugin reads the configuration of your currently loaded project. You can edit a project file by opening the sublime-project file by choosing Project -> Edit Project. In your project file you will need to specify two things:
- baseUrl - The root URL to prefix files with
- basePath - The base path where your site/application lives
Here's how that looks.
Notice the key named settings which is a dictionary that contains another key named sublime-view-in-browser. This is where you will put your baseUrl and basePath settings.
- Dorian Patterson - imaginationac
- Neil Freeman - fitnr
- Michael MacDonald - schlick
- Jadient - jadient
The MIT License (MIT) Copyright (c) 2012 Adam Presley
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Народ, может, кто знает, как запустить 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 , имеются дополнительные инструменты быстрого предпросмотра, однако их обзор выходит за пределы поставленного вопроса.
Как настроить Sublime Text 3 для верстальщика? Например, как можно прямо из программы запускать созданный HTML файл в браузерах?
Лично я использую:
1) Sass (трудно объяснитьв двух словах, лучше прочитать документацию по этой технологии, если она вам неизвестна)
2) Compass (кроссбраузерная компиляция sass, нарезка спрайтов)
3) Emmet (экономит время написания html)
4) SFTP (фтп-клиент)
5) CSSComb (форматирует css)
6) SassBeautify (форматирует код в sass)
Небольшой джентельменский набор:
Emmet
SideBarEnhancements (умеет открывал хтмл по комбинации клавиш)
SFTP
Less/Saas
Prefixr
AdvancedNewFile
LiveReload
AutoFileName
Естественно всё субъективно.
Все устанавливается через Package Control.
Тут можете поискать еще что-нибудь.
Хороший набор, пара вопросов:
1. SideBarEnhancements (умеет открывал хтмл по комбинации клавиш) - в чем смысл у этого функционала?
2. AutoFileName - у меня почему-то не работает. Не знаете с чем может быть связано?
WebStorm не редактор, это IDE. Мне не нравится WebStorm своей избыточностью, многое мне просто не нужно. Плюс скорость работы. У меня на работе довольно древняя машинка в результате Шторм заметно подтормаживает, а сайблайм летает везде. Плюс сайблайм гибок в настройках, я всегда могу снести то что мне на данный момент не нужно и поставить все что мне нужно. Плагинов - гигантское количество. Из него в принципе можно сделать ту же самую IDE, которая не будет уступать WebStorm'у. Но обратите внимание, тут человек просит настроить сайблайм для верстальщика, а не для фронтэнд разработки, соответственно большая часть потенциала шторма ему попросту не нужна.
Как в sublim text 3 заставить документ открыться в браузере? Все перелопатил, кроме SideBarEnhancements практически ничего нет.
Если жму Open in Browser в левой панели, документ открывается в notepad++). Никакие горячие клавиши на открытие в браузере не срабатывают.
И минус в том что на файлы без папки плагин не срабатывает.
Поставь плагин Sublime Text - View In Browser
Его пожно поставить при помощи Package Control. Если он еще не установлено то в sublime3 его можно поставить так:
1.Открываем консоль путем нажатия ctrl+` или тыкаем в View > Show Console menu.
2.Копируем туда эту команду:
3.Ждем пока пакеты установятся и перезапускаем Sublime Text3.
Теперь используем Package Control что бы поставить View In Browser:
1.Жмем Command-Shift-P (Mac OS X) или Ctrl-Shift-P (Windows) что бы открыть Command Palette.
2.Начинаем набирать фразу Package Control пока не появится подходящая команда.
3. Вводим Install Package, пока не увидите "пакет управления: Установите пакет". Выбрать его и нажать Return/Enter.
3. В текстовом поле начинайте набирать фразу View In Browser пока не появится, когда появится нажмите Enter, чтобы установить его.
4.Перезапуск Sublime Text.
Теперь что бы посмотреть открытую Sublime Text вебстраницу можно при помощи комбинации клавишь Ctrl-Alt-V
View In Browser я пробовал, но он почему-то не открывает страницу в браузере не через горячую кнопку ни через верхнее меню.
SideBarEnhancements спустя пол дня я нашел в коде почему не работало отображение в браузерах. Оказывается пути к браузерам нужно вручную исправлять в коде. Если кто-то подскажет в каком формате в этом плагине забиваются хоткеи будит совсем хорошо)))
Попробоуй поставить вручную:
Жми Tools > Build System > New Build System.
Откроется новый таб который называется untitled.sublime-build вот с таким текстом:
Если у тебя мак замени его следующим:
Если у тебя винда то следующим:
Сохрани его с именем "Choose Browser.sublime-build" в следующем месте:
Mac OS X: ~/Library/Application Support/Sublime Text 2/Packages/User
Windows: вот тут я не подскажу, очень давно не видел эту ОS. Очень важно что бы это было место которое Sublime Text знает и БУДЕТ там искать.
Рестарт Sublime Text.
Теперь что бы увидеть проект в броузере, иди в Tools > Build и нажми Command-B (Mac) or Ctrl-B (Windows).
По клавившам: Command-B это хреновая комбинация потому что в маке это по умолчанию "сделать выделенный текст болдовым". Каждый юзер OS X это может легко поменять в System Preferance, а вот как это организовано в Windows я без понятия.
На и немножко не в тему но маленькое ИМХО, для вебстраниц Espresso значительно лучше чем Sublime Text. Я и курс на Линде посмотрел и OS вроде хорошо знаю, но изучить этот редактор - 🤪
Soxay:
View In Browser я пробовал, но он почему-то не открывает страницу в браузере не через горячую кнопку ни через верхнее меню.
Открытие в браузере HTML файла, редактируемого в Sublime Text
Народ, может, кто знает, как запустить html файл из Sublime Text? В NotePad++ это можно выполнить шорткатом Ctrl + Alt + Shift + X .
Ответы (5 шт):
А насколько мне известно 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 , имеются дополнительные инструменты быстрого предпросмотра, однако их обзор выходит за пределы поставленного вопроса.
Первый вариант
- Корректное отображение сторонних виджетов,
- Доступность проверки настроек файла .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 :
Третий вариант
Файлы запускаются и из сайдбара, если установлен плагин Sidebar Enhacements. Кликаем правой кнопкой мыши по имени файла в сайдбаре → Open Run → файл откроется в сопоставленной ему программе, для HTML это обычно браузер по умолчанию.
Если желаете открыть файл в другом браузере, требуется произвести настройки: кликаем правой кнопкой мыши по имени файла в сайдбаре → Open With → Edit Applications. → в открывшийся файл вставляем код и сохраняем его:
- "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.
Четвёртый вариант
В последнее время для создания команд я пользуюсь фреймворком Suricate. Многофункциональный, одной из его возможностей является удобная работа с командами.
Обоснование
Положим, мы создали build system для открытия текущего файла в определённом браузере и хотим запускать команду горячими клавишами, из контекстного меню, Menu Bar и command palette. Итого потребуется правка четырёх файлов: sublime-keymap , Context.sublime-menu , Main.sublime-menu и sublime-commands ; а включая файл sublime-build нашей Build System — 5. Причём в файлах мы вынуждены писать один и тот же текст; и так для настройки каждой новой команды, которых может быть множество.
Читайте также: