Code Editors


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


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.


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


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.

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 – Personally, I like that Atom defaults to LF for new files, however this should be configurable. There is the line-ending-converter plugin to convert line endings. There doesn’t seem to be a way to set default line endings.

Brackets – Like Atom, you need an extension to convert line endings. 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.

Visual Studio Code – Line endings can be converted by selecting LF or CRLF on the bottom right hand corner. Like Brackets, the default line endings adjusts to the OS it’s running on. Like Atom and Brackets, there doesn’t seem to be a way to set default line endings.

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

Loading Disqus Comments ...
Loading Facebook Comments ...