# 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](https://atom.io/) – A hackable text editor for the 21st Century

[Brackets](https://brackets.io) – A modern, open source code editor that understands web design (First community release in November 21)

[Kate](https://kate-editor.org/) – Get an Edge in Editing

[Sublime Text](https://www.sublimetext.com/) – Text Editing, Done Right

[TextMate](https://macromates.com/) – Text editor for macOS

[Typora](https://typora.io/) – a markdown editor, markdown reader

[Visual Studio Code](https://code.visualstudio.com/) – Code Editing. Redefined



## Live Reload for Web Development

### Atom

Install the extension [atom-live-server](https://atom.io/packages/atom-live-server). (See [GUI method: Install new packages in Atom using the editor](https://itsfoss.com/install-packages-in-atom/) 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](https://packagecontrol.io/packages/LiveReload). Follow the steps below or watch [this video on YouTube (in french)](https://www.youtube.com/watch?v=xF2w9xarPQ8).

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](http://livereload.com/extensions/) in your browser.

- [Chrome extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) 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](https://code.visualstudio.com/Docs/languages/html)

> VS Code doesn't have built-in support for HTML preview but there are extensions available in the VS Code [Marketplace](https://marketplace.visualstudio.com/vscode). 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](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) or its predecessor [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).