Code Editors

Visual Studio Code is a free code editor from Microsoft and is available for Linux, Mac OSX, and Windows. This editor has a large community, frequent updates and new features with each release. Also included is embedded Git control, an integrated terminal and debugger, IntelliSense support and a large number of available extensions.

Atom is a free open-source “hackable” text and code editor developed by GitHub. Configure Atom for JavaScript and Web Development

Brackets is a modern, open source text editor that understands web design. TIP: if you are fairly new to markdown and/or would like a live preview while you edit, checkout this Markdown Preview plugin for Brackets.

Emacs

Sublime Text is a fast, stable editor with a huge number of features and plugins termed packages.

Vim - Variants include Neovim, MacVim

Others

IDE’s

Configuration Considerations

If you’re running under Windows and work with Git, create and edit shell scripts, etc., you may want to consider setting the default line endings to Unix LF instead of Windows CR LF.

The Windows version of Sublime Text 3 is set to use Windows line endings by default. You can set Unix as the default in Sublime Text 3 as follows:

  1. From the Menu, select Preferences (alt + n)

  2. Select Settings – User

  3. Add the following to the Preferences.sublime-settings file *

    {
        "default\_line\_ending": "unix"
    }
    

* If there are pre-existing settings in the Preferences.sublime-settings file, the curly braces are not needed since they already surround the settings. The Sublime Text settings files are in json format.

dos2unix

Convert line endings from Windows to Unix with the dos2unix command using Cygwin, a Unix like command-line interface for Windows.

This example will find all files inside current directory and execute dos2unix on them:

find . -type f -exec dos2unix {} \\;

Further reading, I like Jeff Atwood’s blog post from 2010, The Great Newline Schism.

Line Ending Plugins

Sublime Text comes with all the tools for handling line endings built in. What about the others?

Atom - As of version 1.0.8 you can change the default line endings for new files. Select File | Settings | Packages | Core Packages | line-ending-selector. Select Settings, Default line ending setting. You can also convert line endings for an open file selecting LF or CRLF at the bottom right hand corner status area.

Brackets - An extension to convert line endings may be needed. The brackets-newline extension worked for me. The default line endings adjusts to the OS it’s running on. There doesn’t seem to be a way to set default line endings for new files.

Visual Studio Code - Use an .editorconfig file and the respective EditorConfig for VS Code extension. For example,

.editorconfig
# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.html]
indent_style = tab
tab_width = 4

[*.{json,yml}]
indent_size = 2

[*.md]
trim_trailing_whitespace = false

Line endings can be converted by selecting LF or CRLF at the bottom right hand corner status area. Like Brackets, the default line endings adjusts to the OS it’s running on and there doesn’t seem to be a way to set default line endings in the core settings.

Sublime Text

Settings

For those of you that are interested and for my own records, my Sublime Text settings file. The Fira Code fonts are a great addition to a developer work station.

User/Preferences.sublime-settings
{
    "caret_style": "phase",
    "color_scheme": "Packages/Colorsublime-Themes/Facebook.tmTheme",
    "detect_indentation": false,
    "detect_slow_plugins": false,
    "fade_fold_buttons": false,
    "font_face": "Fira Code",
    "font_size": 14,
    "highlight_line": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "line_padding_bottom": 3,
    "line_padding_top": 3,
    "tab_size": 4,
    "theme": "Material-Theme.sublime-theme",
    "trim_trailing_white_space_on_save": true,
    "use_tab_stops": true
}

I have also modified the Facebook.tmTheme file so the background color matches the sidebar.

Packages/Colorsublime - Themes/Facebook.tmTheme
<key>background</key>
<string>#263238</string>

Packages

Emmet toolkit for web-developers. Usage cheat-sheet

HTML-CSS-JS Prettify — HTML, CSS, JavaScript and JSON code formatter for Sublime Text 2 and 3.

Resources

Emacs

Vim

Probably the most needed shortcut key for those who only use Vim when it pops up in Git, how to exit Vim editor?
Shift + :   (command mode)
q

Atom

atom.io Recommended packages for configuring Atom for JavaScript Best Practices. Install by selecting Packages from the Menu or issue apm (Atom package manager) install commands using a CLI (command line interface).

Sublime Text

Recommended settings and packages for configuring Sublime Text for JavaScript Best Practices. The easiest way to install Sublime Text packages is by using the Package Control. The Package Control installation document is located at https://packagecontrol.io/installation. Using the Package Control to manage packages will automatically update the plugins it installs for the latest features and bug fixes. Some of the packages specified in this guide only work with Sublime Text 3.


Visual Studio

Shortcut Keys Keys Description Ctrl+Shift+/ Toggle comment block Ctrl+Alt+L Solution Explorer Resources Visual Studio Docs

Visual Studio Code

The open source Visual Studio Code cross platform code editor from Microsoft has grown to become the most popular since its release in 2015. Visual Studio Code is highly customizable, has a vast extension library, Git integration, contextual theme support, a built in terminal and debugging to name a few of the many available features.

Sandbox

HTML CSS JavaScript