IDE.md

Code Editor or IDE (Integrated development environment)

Software programming means to notate instructions for a computer or machine to exectute. While there are other types of programming, this often is done by writing code in some text format. For many programming languages, the code can be written in some unformatted UTF-8 text file, that just carries a special file extension like .html, .css or .js to indicate how it should be interpreted.

While it is technically possible to write such code in a regular text editor, it might be much more comfortable to use some special code editor that assists in writing code, e.g. by offering a monospaced typeface, syntax highlighting, auto completions, cool color themes, code formatters, git integration and of course various ways to extend it via plugins.

Common text based code editors

• Visual Studio Code by Microsoft free
• Atom by GitHub free
• Vim free
• Sublime Text free/$80

Popularity of IDEs by State of CSS 2020

Plugins, Tips, Tricks

• Double click on a word to select the whole word, triple-click to select the whole paragraph
• Hit shift+arrowLeft or shift+arrowRight to select text
• Hit alt+arrowLeft or alt+arrowRight to jump back and forth between words, add shift to select
• Hit cmd+arrowLeft or cmd+arrowRight to jump to the beginning or end of the line, add shift to select
• Hit cmd+arrowUp or cmd+arrowDown to jump to the beginning or end of the file, add shift to select
• Add a .editorconfig file to your project to tell the editor your style of code formatting

VS Code

• Prettier plugin for automatic code formating
• LiveServer plugin to open a live server with hot reloading
• Code Snippets
• Duplicate action plugin to duplicate file with cmd+d
• Hit alt+arrowUp or alt+arrowDown for switching lines, add shift to copy a line
• Hit cmd+shift+7 to un/comment the current line or selected code
• Select Themes
• Theme Generator by Coder Coder
• More Tips & Tricks

Atom

• Prettier plugin for automatic code formating
• Live Server plugin to open a live server with hot reloading
• Code Snippets
• Select Themes

It is often also helpful to search for plugins for the framework or language you work in, to find more specialized snippets and productivity helpers.