Opening in the browser an HTML file edited in Sublime Text

And as far as I know, Sublime is designed to add the necessary functionality;)

Everything is simple and depends on your OS a little.

First, create a new build system.

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

in the open you need to write:

For Mac OS

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

For Linux

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

For Windows (I have 8.1 but should work for almost everyone)

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

In this case, double slash is needed for screening.

Actually everything, save the file as Chrome.sublime-build

Close and open again SublimeText

Go in

 Tools -> Build System 

Select Chrome and launch open files in it by pressing Ctrl + B

Second option

Using the Build System is a function that allows you to open files that are editable in Sublime Text through other programs.

Personally, I have not earned the option proposed by Uv . Victor . Opened Chrome, but not editable document. In the console, the following output:

 [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] 

In my browser Pale Moon Portable on Windows 10, files are opened when the forward and backslashes are combined in the “build” file with the sublime-build extension as follows:

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

For Chrome:

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

$file is a system variable meaning a $file is currently open.

Also in comparison with Victor's answer, I added a new selector parameter. If "text.html.basic, text.xml" when we automatically switch between the Build System: ( Tools → Build System → Automatic ), only XML and HTML files will be opened in the browser when invoking Build; XHTML). The parameter values ​​are the initial part of the “scopes”: open an empty file → View → Syntax → select the required syntax → get the scope in our empty file - how to do it, described in detail here , insert our scope in front of the selector . In HTML, HTM, and XHTML, the scope is text.html.basic , in XML, respectively text.xml . The listing, as seen in the example, is separated by a comma.

Yes, and in order not to press Ctrl + B each time, there are additional quick preview tools , but their review goes beyond the question.

First option

For me, the most preferred. SublimeServer is an HTTP server implemented as a plugin for Sublime Text. Using it can eliminate the need for Open Server, WAMP Server, Denver, Mongoose, or their alternatives. Examples of the advantages of using SublimeServer in comparison with the usual opening of an HTML file through the Build System:

• Correct display of third-party widgets,
• Availability of checking the settings of the .htaccess file,
• Ability to check how a web page looks on different screens, using Screenfly service,
• Font sizes are the same as those that will be seen on the site, rather than smaller ones.
• Correct insertion of the code with video linking to the time received on video hosting sites.

Install it like all other plugins via Package Control → Ctrl + Shift + P → SublimeServer: Start SublimeServer . Automatically run SublimeServer with Sublime Text does not work for me. In the file where we work, we click somewhere with the right mouse button, and in the context menu select View in SublimeServer . You can specify a hotkey: Preferences → Key Bindings - User → in the opened Default(Ваша операционная система).sublime-keymap file Default(Ваша операционная система).sublime-keymap insert { "keys": ["alt+home"], "command": "sublimeserver_browser" } , where alt+home → your hotkey combination. JSON syntax is used in the file, make sure that {curly}, [square] brackets and commas are correctly placed. The correct example of the 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" } ] }, ] 

Third option

Files run from the sidebar, if the Sidebar Enhacements plugin is installed . We right-click on the file name in the sidebar → Open Run → the file will open in the program associated with it, for HTML this is usually the default browser.

If you want to open the file in another browser, you need to make the settings: right-click on the file name in the sidebar → Open With → Edit Applications... → in the opened file, paste the code and save it:

 { "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 }, 

Where

• "caption": "Firefox Portable" - the display name of your browser. You can specify any, which is convenient.
• "id": "side-bar-files-open-with-firefoxportable" - you need to write side-bar-files-open-with- , and then specify the name in its sole discretion.
• "E:\\Firefox\\FirefoxPortable.exe" - the path to the executable file of the browser. It is easier to indicate absolute rather than relative. Backslashes and backslash.

• "extensions":"html|htm" - in the context menu, after clicking the right mouse button on the file name, the item Firefox Portable will be shown only if the file has the extension html or htm , the extensions are separated from each other through the pipe . The extensions parameter can have other values:

  • "extensions": "" - the Firefox Portable item will be displayed in the context menu if we in the sidebar click the right mouse button on a file with any extension or folder.

  • "extensions" :". *" - the Firefox Portable item will be displayed in the context menu when we right-click on a file with any extension, but not a folder.

Click on the sidebar with the right mouse button on the file with the extension html or htm → Open With → Firefox Portable → the file will open in the portable version of Firefox.

Fourth option

Recently, I have been using the Suricate framework to create commands. Multifunctional, one of its features is convenient work with teams.

Justification

Suppose we created a build system to open the current file in a specific browser and want to launch the command with hotkeys from the context menu, Menu Bar and command palette. Total need to edit four files: sublime-keymap , Context.sublime-menu , Main.sublime-menu and sublime-commands ; and including the sublime-build file of our Build System - 5. Moreover, we are forced to write the same text in the files; And so to customize each new command, which can be many.

In Suricate:

1. Only one file with the suricate-profile extension is suricate-profile , not 5;
2. In this one file, you can put all the settings run commands as plug-ins, and by default;
3. Much less unnecessary scribbling, nothing needs to be repeated.

Result

Command palette

Menu bar

Context menu

Run shortcut

File launch setup

Install Suricate via Package Control → Preferences → Package Settings → Suricate → Default Profile — User → we insert the following code into the opened file:

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

Save the file - it should work, as in the screenshots and screencast above. Do not be confused in the JSON syntax , make sure that the quotes, parentheses and commas are set correctly.

Parameters and values

• sasha-firefox - command id. You can write anything, if only it does not coincide with the identifiers of other commands.
• call - call. In the example:
  • Suricate.lib.process.spawn calls the spawn() function of the Suricate.lib.process Python module. This is similar to running the Build System in Sublime Text.
• args are command arguments. The syntax is similar to that used in the build system . In the example:
  • E:\\Firefox\\FirefoxPortable.exe is the path to the executable file of the browser. Specify your own.
  • $file - a system variable for the Build System, means that a third-party program, in this case, Firefox, will launch the currently open file.
• caption - the text that is clicked on in the command palette, Menu Bar and context menu.
• group - where the command from the menu will be launched from. In the example, this is Preferences → Package Settings → Suricate .
• keys - shortcut.
  • <c> - Ctrl for Windows and Linux and Cmd for MacOS.
• context_menu - add or not a command to the context menu.

SublimeServer and Suricate

For the reasons stated in this answer , using SublimeServer is preferable to comparing with opening a file through file:/// . Add the following code to the same Default.suricate-profile file, where the example for Firefox was added:

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

That's how I run the files in the browser. I dropped the launch from Menu Bar and the context menu in the example, since I don’t use it.

Parameter values

The syntax of the call value for the default and plugin commands in Suricate is the following: sublime.$команда . The register matters, Sublime.sublimeserver_browser will not work, as well as suricate.lib.process.spawn in an example above.

Additional links

The capabilities of Suricate are far from being limited to those described in this answer.

• Screencast Suricate ,
• The part of the documentation regarding setting up the launch of commands
• Description of command settings with examples .