Grunt, Gulp or Make?

What IDE should I use?

Should I use plugins?

These are subjective...

...but we'll advise anyway

The IDE/Editor

Many Great Options

• Sublime Text
• Text Mate
• Atom
• Coda
• Eclipse
• WebStorm
• etc...

Sublime Text

Probably the most popular editor at FeedHenry

Excellent Sublime Plugins

• JSHint - Validate JavaScript
• GitGutter - Quick Highlighting of Changes
• JSDocs - Completion for Comment Docs
• SideBar - Enhance the Side Bar options
• .MD Preview - Render Markdown in Sublime
• CSS3 - Syntax Highlighting for cutting edge CSS3
• EditorConfig - Set filetype formatting preferences

Customised Editor Example

Regardless of Editor choice - install similar extensions.

Demo

Code Formatting

No right/wrong here but...

Node.js Style?

The community has preferences though! *

* Personally, I follow these

Defined Code Style Benefits

• Easy to read code
• Easier to debug 
• Requires less scrolling (line length)
• Reduces bugs (brackets & semi-colons)
• Ensures commits only show relevant line changes

this leads us to...

EditorConfig

Automated code formatting!

EditorConfig

• Set project file formatting preferences
• .editorconfig file at project root
• Use EditorConfig IDE plugin to apply settings
• Ensures consistency across machines
• Prevents accidental formatting changes in commits

Sample .editorconfig

root = true

[*.css]
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true

[*.js]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

IDE Support

npm install -g jshint

JavaScript

No compiler means errors can happen at runtime!

JSHint

• Detect errors in code before runtime
• Flag potential problems
• Can be configured based on preferences
• Add .jshintrc to project to automatically configure

Sample .jshintrc

{
  "globals": {
    "describe": true,
    "it": true,
    "beforeEach": true,
    "chai": true
  },
  "curly": true,
  "camelcase": true,
  "evil": false,
  "browser": true,
  "trailing": true,
  "nonew": true,
  "node": true,
  "newcap": true,
  "quotmark": "single",
  "strict": true,
  "maxparams": 5,
  "maxdepth": 5,
  "maxstatements": 20,
  "maxcomplexity": 10
}

Sample JSHint Output

eshortiss@Evans-MacBook-Pro:~/workspaces/localStorage$ jshint ./lib/LocalStorage.js 
./lib/LocalStorage.js: line 18, col 3, Expected '}' to match '{' from line 15 and 
instead saw 'GET'.
./lib/LocalStorage.js: line 18, col 6, Missing semicolon.
./lib/LocalStorage.js: line 18, col 6, Expected '(end)' and instead saw ':'.
./lib/LocalStorage.js: line 3, col 5, 'ls' is defined but never used.
./lib/LocalStorage.js: line 4, col 5, 'safejson' is defined but never used.
./lib/LocalStorage.js: line 5, col 5, 'events' is defined but never used.
./lib/LocalStorage.js: line 6, col 5, 'util' is defined but never used.
./lib/LocalStorage.js: line 15, col 5, 'EVENTS' is defined but never used.

Demo

What about Visual Studio?

Visual Studio Enhancements

• Node.js Tools with IntelliSense
• JSHint
• Markdown Support
• EditorConfig