Code Editors

Written by Cody Lindley

The Front-End Developer Roadmap from Frontend Masters - Advance your skills with in-depth, modern front-end engineering courses.

Overview:

Learning resources and tools.

Definitions:

Code Editor
A source code editor is a text editor program designed specifically for editing source code of computer programs by programmers. It may be a standalone application or it may be built into an integrated development environment (IDE) or web browser. Source code editors are the most fundamental programming tool, as the fundamental job of programmers is to write and edit source code.

Contribute content, suggestions, and fixes on github:

https://github.com/FrontendMasters/learning-roadmap

Overview

Front-end code can minimally be authored with a simple text editing application like Notepad or TextEdit. But, most front-end practitioners use a code editor specifically designed for editing a programming language.

Code editors come in all sorts of flavors, so to speak. Selecting one is a rather subjective engagement. Choose one, learn it inside and out, then get on to learning HTML, CSS, DOM, and JavaScript.

However, I do strongly believe minimally that a code editor should have the following qualities (by default or by way of plugins):

  1. Good documentation on how to use the editor
  2. Report (i.e., hinting/linting/errors) on the code quality of HTML, CSS, and JavaScript.
  3. Offer syntax highlighting for HTML, CSS, and JavaScript.
  4. Offer code completion for HTML, CSS, and JavaScript.
  5. Be customizable by way of a plugin architecture.
  6. Have available a large repository of third-party/community plugins that can be used to customize the editor to your liking
  7. Be small, simple, and not coupled to the code (i.e., not required to edit the code)

I recommending using Visual Studio Code because of the quality of the tool and the continuous improvements made to the editor by Microsoft. Additionally, today it is the most widely used editor among front-end developers.

Image source: https://2019.stateofjs.com/other-tools/text_editors

Code Editors

Shareable & Runnable Online Code Editors

Simple Shareable & Runnable Online Code Snippets