Best Free Source Code Editors for e.g.: HTML, CSS, JavaScript

This is a list of the best free source code editors, especially for web programming, for example for JavaScript, HTML or CSS, with some useful indications about features, difficulty and which platforms they are available for. If you’re looking to find the best fit for you, keep reading. This list is full of beginner friendly editors that also can be customized to fit your coding needs, no matter if it’s for HTML, CSS, JavaScript, Ruby, Python or PHP.

For languages like C#, Java or the like I’d maybe rather go for an IDE, but I still love writing Go and C# in one of the below.

We’ll have a look at the following:

  • Atom
  • Brackets
  • Sublime Text
  • Notepad++

Atom Editor – A Sublime-ish Alternative

Atom is a source code editor, primarily maintained by GitHub and key features include easy accessability to plugins and themes. It supports splitting documents and tiling by default, as well as a file tree that shows the current direcotry. The community is active and developing packages/plugins and themes.

atom-editor-syntax-highlight-file-tree-git-integration

The editor can easily be used for more than web development, since the syntax highlighting for many languages can be installed as packages. The editor is very developer friendly because the settings are beyond the user interface saved as config files for easy synchronisation and hotkeys can be customized. Both the syntax themes and the user interface are easily styleable.

atom-editor-settings-packages-keybindings

On of the other core features is the integration to git, that highlights files in the file tree if depending on their git status. If you are in a git repository, atom will show you which files have not been committed yet.

It’s built with coffeescript and node.js, which sometimes is a little drawbacks in terms of performance.

themes: Yes: atom.io/themes

plugins: Yes: atom.io/packages

license: MIT

available for: Linux, Mac OS X, Windows

Brackets Editor – Simple and with PSD Integration

Brackets is a new and light weight editor primarily maintained by Adobe. It is open source but appears as a product as the creative cloud program under the name Adobe Edge Code. One of the key features is the Live Preview where Brackets will make sure to reload the page that you’re working on in your browser when you make a change or save the file, also brackets can look up the CSS rule that belongs to your HTML right away with a keybinding.

http://jonathanmh.com/wp-content/uploads/2015/02/brackets-editor-adobe-file-tree.png

Since it’s also built with JavaScript and node.js, which sometimes is a little drawbacks in terms of performance. Currently Brackets can’t open a directory from the command line.

With the more recent versions one of the key features has become Extract which can copy font styles and layers directly from Photoshop PSD files, so this seems to be a great tool for designers or the ones working hand in hand with them.

themes: Yes: (internal manager)

plugins: Yes: (internal manager)

license: MIT

available for: Linux, Mac OS X, Windows

Sublime Text – not free, but unlimited trial

Sublime Text is a very customizable and very popular choice for many developers. One of the core features is the document map, that displays a visual overview of your current file in a zoomed out variant, highlighting the part that currently is visible in your editor.

sublime-text-file-tree-editor

One of the key features of Sublime is often considered the instant upload feature, when you are working with a remote project over FTP. The community supplies a great deal of themes and plugins.

license: proprietary

available for: Linux, Mac OS X, Windows

Nodepad++ – A better Notepad Replacement

Notepad++ is very unopinionated and does a lot of things really well. It supports many languages and is extendable through the built in plugin manager. The editor is very feature rich and kind of a jack of all trades. The performance is great.

A drawback from my point of view is the file tree that is not visible by default, since I tend to have more than one file in a project.

themes: Yes: through the theme manager

plugins: Yes: through the plugin manager

license: GPL

available for: Windows

Summary

Through plugins and themes most of the candidates above can be set to fit your needs or mimic another editors look or behaviour. I suggest you give them a shot and figure out what the best tool for you is. Currently I am using Atom with the vim mode package a lot, but I’m also a huge fan of Brackets and Vim.

It’s in a way very cool and inception-like to use tools built with JavaScript to build new tools made of JavaScript. I’ll get into my favourite plugins for both Atom and Brackets in future posts.

What is your favourite editor? Is it among the presented ones? Do you favour another one? Be sure to let me know why!

5 thoughts on “Best Free Source Code Editors for e.g.: HTML, CSS, JavaScript”

  1. One more addition to the list: bluefish (for linux). It’s the only linux editor I’ve tried so far and it is ok for my needs (html, css, a bit php & javascript).

    Thanks for your useful information in your blog … and happy New Year. 🙂

    1. Thanks so much for the comment!

      I actually have used Bluefish a couple of years ago, but for me it’s no longer in the race when it comes to the extensions and support for languages and markups that the above listed editors provide.

      For example with atom and sublime you can easily install a package for the .vue syntax (http://vuejs.org framework) that we used for http://photographerexcuses.com. The .vue files are basically html template, script tag and stylesheet in one so the components can exist in a single file.

      Apart from specific use cases like that, Bluefish is still a good editor when it comes to frontend work!

Leave a Reply

Your email address will not be published. Required fields are marked *