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
\nStep 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.
\nStep 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]
\nStep 4: In your project folder install gulp as a dev dependency [bash]npm install –save-dev gulp[/bash]
\nStep 5: Create a gulp file for gulp configuration gulpfile.js in the project folder
Step 6: Within the gulp file, enter the following values
\nconst gulp = require(‘gulp’);\n\n// Gulp dependencies go here\n\ngulp.task(‘default’, function() {\n\n// Gulp tasks go here\n\n});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\n\n[20:03:46] Starting ‘default’…\n\n[20:03:46] Finished ‘default’ after 80 μsStep 8: Install the Babel transcompiler to transform ES6 to ES5\nnpm 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:
\nes6/
\ndist/
\npublic/es6/
\npublic/dist/
\nGulp 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.
\nconst gulp = require(‘gulp’);\n\nconst babel = require(‘gulp-babel’);\n\ngulp.task(‘default’, function() {\n\n// Node source\n\ngulp.src(\"es6/\\_\\*/\\*.js\")\n\n.pipe(babel())\n\n.pipe(gulp.dest(\"dist\"));\n\n// browser source\n\ngulp.src(\"public/es6/\\_\\*/\\*.js\")\n\n.pipe(babel())\n\n.pipe(gulp.dest(\"public/dist\"));\n\n});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:
{\n\n\"extends\": \"airbnb\",\n\n\"rules\": {\n\n\"indent\": [\n\n\"error\",\n\n4\n\n]\n\n}\n\n}Step 14: Modify gulpfile.js to run eslint:
\nconst gulp = require(‘gulp’);\n\nconst babel = require(‘gulp-babel’);\n\nconst eslint = require(‘gulp-eslint’);\n\ngulp.task(‘default’, function() {\n\n// Run ESLint\n\ngulp.src([\"es6/*\\*/\\*.js\", \"public/es6/*\\*/\\*.js\"])\n\n.pipe(eslint())\n\n.pipe(eslint.format());\n\n// Node source\n\ngulp.src(\"es6/\\_\\*/\\*.js\")\n\n.pipe(babel())\n\n.pipe(gulp.dest(\"dist\"));\n\n// browser source\n\ngulp.src(\"public/es6/\\_\\*/\\*.js\")\n\n.pipe(babel())\n\n.pipe(gulp.dest(\"public/dist\"));\n\n});