Freelance Projects

Upeksha Wisidagama

Javascript Coding Standards - Vim, Syntastic and JSHint

Install Syntastic Vim Syntax Checker

ZOMG It's Syntastic

Syntastic is a syntax checking plugin that runs files through external syntax checkers. This can be done on demand, or automatically as files are saved and opened.

Intall Syntastic via Bundle.

‘Vim Sytastic Installation’
1
2
3
cd ~/.vim/bundle
git clone https://github.com/scrooloose/syntastic.git
:Helptags

Install NodeJS

‘NodeJS Installation’
1
2
3
4
5
sudo apt-get update
sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Source: https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

Install The Node Package Manager

‘Node Package Manager Installation’
1
2
3
4
5
6
7
8
9
10
curl https://npmjs.org/install.sh | sh

Written by John Gilmore and Jay Fenlason.
install npm@latest
fetching: http://registry.npmjs.org/npm/-/npm-1.3.4.tgz

uw@uw:~/.vim/bundle$ node --version
v0.10.13
uw@uw:~/.vim/bundle$ npm --version
1.3.4

Install JSHint

‘JSHint Installation’
1
2
3
4
5
6
7
8
uw@uw:~/.vim/bundle$ sudo npm install jshint -g
jshint@2.1.4 /usr/lib/node_modules/jshint
├── console-browserify@0.1.6
├── underscore@1.4.4
├── shelljs@0.1.4
├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.0)
└── cli@0.4.4-2 (glob@3.2.3)
uw@uw:~/.vim/bundle$

Create a .jshintrc file in your home directory.

Source: https://github.com/jshint/jshint/blob/master/examples/.jshintrc

Option Reference: http://www.jshint.com/docs/

Javascript Coding Standard - Run the JSHint

Run :SyntasticCheck on a Javascript file. Fix Errors and Warnings.

You can also check your code on http://www.jslint.com and http://www.jshint.com

Sample .jshintrc Files

https://github.com/jquery/jquery/blob/master/.jshintrc https://github.com/mozilla/browserid/blob/dev/.jshintrc

Install UglifyJS2

npm install uglify-js@1

https://github.com/mishoo/UglifyJS

Now uglify, uglify filename.js > filename.min.js.

Now you know the basics of how to write clean jQuery code and compress them to save bandwidth and improve page load time !