ES6 Linting With Gulp

Update: This post is outdated and has been archived.

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

const gulp = require(‘gulp’);

// Gulp dependencies go here

gulp.task(‘default’, function() {

// Gulp tasks go here

});

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:

[20:03:46] Using gulpfile ~/workspace/project/gulpfile.js

[20:03:46] Starting ‘default’…

[20:03:46] Finished ‘default’ after 80 μs

Step 8: Install the Babel transcompiler to transform ES6 to ES5 npm install –save-dev gulp-babel

npm install –save-dev babel-preset-es2015

Step 9: Create a Babel configuration file .babelrc with the following content:

{ "presets": ["es2015"] }

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.

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"));

});

Step 11: Install ESLint to lint your ES6 javascript code npm install -g eslint

and npm install –save-dev gulp-eslint

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

Step 13: Create .eslintrc.json file in the project folder with the following content:

{

"extends": "airbnb",

"rules": {

"indent": [

"error",

4

]

}

}

Step 14: Modify gulpfile.js to run eslint:

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"));

});