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

• What are the best programming text editors? - Slant
• SitePoint Smackdown: Atom vs Brackets vs Light Table vs Sublime Text (September 2014)