Text editors for writing code (and text)¶
Following a short list of text editors for different purposes. Of course you can use any other editor as well.
Atom – A hackable text editor for the 21st Century
Brackets – A modern, open source code editor that understands web design (First community release in November 21)
Kate – Get an Edge in Editing
Sublime Text – Text Editing, Done Right
TextMate – Text editor for macOS
Typora – a markdown editor, markdown reader
Visual Studio Code – Code Editing. Redefined
Live Reload for Web Development¶
Atom¶
Install the extension atom-live-server. (See GUI method: Install new packages in Atom using the editor for help.)Then: When you have opened a project (the whole folder of your website), you can press ctrl+alt+8 to launch a live server on port 8000. It will be opened in your browser. When you save your changes in Atom, the page will auto refresh.
You can stop the server with ctrl+alt+q.
Brackets¶
Brackets comes with built-in live preview.
Sublime¶
For Sublime some more steps are required. We have to install an extension inside Sublime and another one inside our browser.
Install LiveReload in Sublime¶
Open Sublime
Open the Tools menu
Click Install Package Control
This allows you to install packages inside Sublime in general.
Now install the package LiveReload. Follow the steps below or watch this video on YouTube (in french).
Open the Preferences menu
Click Package Control
A search bar opens where you type:
Package Control: Install Package
A new search bar opens where you search for
LiveReload
and click on it/ select press enter.
This will install the package. Then go to
Preferences -> Package Settings -> LiveReload -> Plugins -> Enable/ disable plugins.
A new search bar with the message LiveReload: Enable/ disable plugins appears. Hit Enter.
Then select Enable - Simple Reload and press Enter again.
Install LiveReload in your browser¶
Next you have to install an extension in your browser.
Chrome extension on the Chrome Web Store — if you want to use it with local files, be sure to enable “Allow access to file URLs” checkbox in Tools > Extensions > LiveReload after installation.
Firefox: https://addons.mozilla.org/en-US/firefox/addon/livereload-web-extension/
Install »View in Browser« to launch your page from Sublime (optional)¶
If you wan’t to open your browser directly from within Sublime, you’ll need another Sublime extension for that:
Open the Preferences menu
Click Package Control
A search bar opens where you type:
Package Control: Install Package
A new search bar opens where you search for
View In Browser
and click on it.
This will install the package, you can find it under
Preferences -> Package Settings -> View In Browser.
To run it, press inside your .html file ctrl+alt+v.
Visual Studio Code¶
According to the docs
VS Code doesn’t have built-in support for HTML preview but there are extensions available in the VS Code Marketplace. Open the Extensions view (Ctrl+Shift+X) and search on ‘live preview’ or ‘html preview’ to see a list of available HTML preview extensions.
You could try Five Server or its predecessor Live Server.