Code Editors

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

brackets.io Brackets is a 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.

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

Vim

Visual Studio Code is a free code editor from Microsoft and is available for Linux, Mac OSX, and Windows. This editor has a growing community and new features with each release. One feature I recently discovered is the live markdown preview, Ctrl+Shift+V.

others …* Light Table * Spacemacs

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 instead of Windows.

Line Endings

Windows

CR LF

Unix

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.

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

# 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

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 Modes Command Command mode is the default mode. Edit Edit mode is activated by entering a append or i insert. Exit enter mode using the Esc key. Configuration The vmap and imap settings are for copy to and paste from the system clipboard.

Visual Studio Code

code.visualstudio.com This free open source 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. User Settings My VS Code user preferences - I changed the default, "workbench.editor.enablePreview": true - When this is set to true, a subsequent file open will close the previous file if it has not been double clicked or edited.

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). In Atom, open Preferences (Settings on Windows) Go to Install section Search for package Click Install button to install package EditorConfig Emmet Linter Linter-jshint Linter-jscs Other Goodies atom-beautify atomic-chrome change-case fancy-new-file file-icons language-markdown markdown-preview-plus

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.