ES6 Linting With Gulp

This guide assumes your development environment is either Linux or OS X and have already installed Git. The methods below has been tested to work on Cloud9 IDE. The guide has been based on the configuration from Learning Javascript, 3rd Edition by Ethan Brown

Step 1: Install Node.js if its not already installed. This will install the npm package management tool which is essential to installing the linting tools. Cloud9 has Node and npm installed by default.

Step 2: Run npm init to create a package.json file for configuration of npm installs

Step 3: Install gulp [bash]npm install -g gulp[/bash]

Step 4: In your project folder install gulp as a dev dependency [bash]npm install –save-dev gulp[/bash]

Step 5: Create a gulp file for gulp configuration gulpfile.js in the project folder

Step 6: Within the gulp file, enter the following values
[javascript]
const gulp = require(‘gulp’);
// Gulp dependencies go here

gulp.task(‘default’, function() {
// Gulp tasks go here
});
[/javascript]

Step 7: Run the command gulp to check gulp is running correctly. We’ll need to update the configuration later. The basic configuration we’ve entered is enough to get gulp running. You should see something like below:
[bash]
[20:03:46] Using gulpfile ~/workspace/project/gulpfile.js
[20:03:46] Starting ‘default’…
[20:03:46] Finished ‘default’ after 80 μs
[/bash]

Step 8: Install the Babel transcompiler to transform ES6 to ES5 [bash]npm install –save-dev gulp-babel[/bash]
[bash]npm install –save-dev babel-preset-es2015[/bash]

Step 9: Create a Babel configuration file .babelrc with the following content:
[javascript]{ "presets": ["es2015"] }[/javascript]

Step 10: Configure Gulp to run Babel, open up the gulpfile again and add the following. The source and destination configuration assumes you’ve already created the following directory structure under your project folder:

es6/
dist/
public/es6/
public/dist/

Gulp will use Babel to transform ES6 code in the es6 folders and create compatible es5 javascript in the dist folders. Change the folders and configuration as you like.
[javascript]
const gulp = require(‘gulp’);
const babel = require(‘gulp-babel’);

gulp.task(‘default’, function() {
// Node source
gulp.src("es6/**/*.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
// browser source
gulp.src("public/es6/**/*.js")
.pipe(babel())
.pipe(gulp.dest("public/dist"));
});
[/javascript]

Step 11: Install ESLint to lint your ES6 javascript code [bash]npm install -g eslint[/bash]
and [bash]npm install –save-dev gulp-eslint[/bash]

Step 12: Install Airbnb ES6 linting rules in your project folder [bash]npm install –save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint[/bash]

Step 13: Create .eslintrc.json file in the project folder with the following content:
[javascript]
{
"extends": "airbnb",
"rules": {
"indent": [
"error",
4
]
}
}
[/javascript]

Step 14: Modify gulpfile.js to run eslint:
[javascript]
const gulp = require(‘gulp’);
const babel = require(‘gulp-babel’);
const eslint = require(‘gulp-eslint’);

gulp.task(‘default’, function() {
// Run ESLint
gulp.src(["es6/**/*.js", "public/es6/**/*.js"])
.pipe(eslint())
.pipe(eslint.format());
// Node source
gulp.src("es6/**/*.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
// browser source
gulp.src("public/es6/**/*.js")
.pipe(babel())
.pipe(gulp.dest("public/dist"));
});
[/javascript]