5 Best Cross-Platform Code Editors for Web Developers

Code editors are probably the most important tools of web developers. Finding one that best fits your workflow and goals, and has all the features you need can save you a lot of time and significantly improve your code quality.

In this article, I will show you the five best cross-platform code editors for web developers. All of them run on the three major operating systems, Windows, Linux, and OS X. The features you will need mainly depend on your working style, current coding knowledge, and the kind of work you need to deliver. You can have just one go-to editor that you use for everything, but many developers use different code editors to perform different tasks.

Now, let’s see the five best cross-platform code editors for web developers.

1. Atom

Atom Source Code Editor

Atom is a free and open-source code editor created by GitHub. At first, it was GitHub’s internal source code editor, but a few years later (in 2014) they decided to release it to the public. As Atom provides developers with many advanced features, it has quickly become one of the most popular code editors.

Its UI is exceptionally well-designed, as you can split the interface into different panes in order to easily compare different files. It has many important features that can greatly improve your development workflow, such as a built-in package manager, a smart autocompletion capability, file system browsing, an easy-to-use find-replace feature, and more.

Atom also comes with thousands of open-source packages and themes, many of which are created by third-party developers. For instance, Teletype, its latest package created by the core team, makes real-time collaboration possible for developers who need a reliable tool for pair programming or social coding.

Pros:

  • several customization options
  • a built-in package manager
  • easy-to-install packages
  • Git integration
  • open-source and free

Cons:

  • booting sometimes takes a long time
  • occasional performance issues (may slows down your system)

2. Visual Studio Code

Visual Studio Code

Visual Studio Code is Microsoft’s cross-platform source code editor that runs on all major operating systems. Interestingly, Visual Studio Code has been built on top of Atom’s open-source components, however Microsoft removed some features and added a handful of new ones. It’s also faster than Atom,  both at startup and while running. Visual Studio Code is fully customizable; you can find many different themes and plugins in the official marketplace. You can install them easily from the editor and start using them immediately.

Visual Studio Code has many awesome features that can greatly improve your development workflow. Probably the most notable one is the IntelliSense autocomplete feature that provides you with a list of smart suggestions while you are writing your code. Visual Studio Code also has a great built-in debugger as well that allows you to debug right from the editor. Moreover, it supports Git by default; it has a separate Git View in which you can run different Git commands.

Pros:

  • easy-to-use marketplace and nice extension ecosystem
  • built-in Git integration
  • IntelliSense auto-complete feature
  • built-in debugger
  • highly customizable
  • free and open-source

Cons:

  • somewhat confusing branding (has nothing to do with Visual Studio)

3. Brackets

Brackets Source Code Editor

Brackets was specifically created for web designers and front-end developers by Adobe Systems. It can be the ideal source code editor for you if you mainly do front-end work (HTML, CSS, JavaScript). One of its most awesome features is that it allows you to establish a real-time connection with Google Chrome. This means you can instantly see the changes you are making in the browser.

Although you can split the editor into vertical or horizontal panes to perform side-by-side coding, Brackets also introduces the handy inline editing feature. For instance, if you select a specific CSS ID with the cursor you can open the inline editor by hitting the Ctrl + E (on Windows) or Cmd + E (on Mac) key combinations. Then, Brackets will show you all the selectors belonging to that ID within an inline window. Brackets also supports Sass and LESS which means you can use them together with the inline editing and live preview features, as well.

Pros:

  • preprocessor support
  • visual tools for front-end development
  • lightweight (only 40 MB)
  • syncs with the browser (through the Live Preview feature)
  • open-source and free

Cons:

  • confusing extension management (e.g. no filtering options in the registry)
  • fewer extensions and themes than other code editors have
  • not that suitable to work in backend languages (e.g. PHP, Python, Ruby, or WordPress)

4. Sublime Text

Sublime Text

Sublime Text is already at its third major release (Sublime Text 3) and is a quite popular source code editor within the web developer community. I must add that it’s not free, however it does come with a free trial. For continued use, you must purchase a license for $80. However, Sublime Text doesn’t lock you out if you don’t do so, just occasionally displays a pop-up warning asking you to buy the license.

One of Sublime Text’s coolest features is the Goto Anything command you can trigger by hitting the Ctrl + P keyboard shortcut. Then, you can quickly open files, or jump to certain words, lines, or symbols. Sublime Text also provides you with a sophisticated Command Palette through which you can easily access different functionalities such as checking key bindings or switch to another color palette.

Moreover, it allows multiple selections and split editing, and also has a huge package ecosystem. Packages can be installed with Sublime Text’s own package manager via the Command Palette.

Pros:

  • Goto Anything and Multiple Selection features
  • distraction-free mode
  • instant project switch
  • advanced package ecosystem
  • great performance on any platform (outperforms all other source code editors)

Cons:

  • doesn’t come for free
  • it’s not easy to integrate it with Git

5. Light Table 

Light Table Code Editor

Light Table started as a Kickstarter campaign back in 2012 and managed to raise more than $300,000. It runs on all major operating systems, including Windows, Linux, and Mac OS X, however the installation process currently requires some extra steps for OS X users. Light Table has a sleek and streamlined user interface that does away with all the clutter, but still provides you with a command palette and a fuzzy finder. It’s written in ClojureScript and currently supports HTML, CSS, JavaScript, Python, Clojure, and ClojureScript.

With Light Table, you can easily perform inline evaluation within your code, which means you don’t have to use the console when you want to view your results. The watches feature allows you to keep track of any important value within your code. Moreover, Light Table also makes it possible to embed anything that your project needs, such as graphs, games, and visualizations. Light Table has a built-in plugin manager (available from the View > Plugin Manager menu), with a fairly good selection of plugins as well.

Pros:

  • inline evaluation and watches
  • Embed Anything feature
  • powerful plugin manager
  • highly customizable
  • fast, clutter-free interface
  • free and open-source

Cons:

  • currently no default PHP support, so WordPress development requires a few extra steps (you can use this PHP plugin, for instance)

Next Steps

Apart from choosing the code editor that best fits your needs, you may want to look up other web development tools as well. If so, have a look at our article about best cloud IDEs or check out our collection of essential tools we recommend for modern web development. 

To stay updated with our web development tips and tricks, don’t forget to follow us on Twitter and Facebook either.

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress