Installing ESLint for Gulp

If you have the Prettier VSCode plugin, uninstall or disable it via the extensions menu on the side bar
Install the required node modules via these commands:
- npm install eslint-config-prettier
- npm install eslint-plugin-prettier
- npm install gulp-eslint
- npm install prettier-eslint

Overwrite your .eslintrc.json file with this:

Note: Feel free to copy over any personal settings you want to keep from your .eslintrc.json file
If you don't have a .eslintrc.json file, create one in the root directory where all your projects are stored

If you instead have a .eslintrc.js file, delete it and create a .eslintrc.json file with these contents

  {
    "extends": [
      "airbnb-base",
      "prettier"
    ],
    "rules": {
      "no-console": "off",
      "linebreak-style": 0,
      "prettier/prettier": [
        "error", 
        {
            "trailingComma": "es5",
            "singleQuote": true,
            "printWidth": 120
        }
      ]
    },
    "plugins": [
      "prettier"
    ]
  }

Overwrite your gulpfile.js file with the following content

If you don't have a gulpfile.js file, create one in your project directory
Note: Feel free to copy over any personal tests you want to keep from your original gulpfile.js file

 const gulp = require('gulp');
 const sass = require('gulp-sass');
 const autoprefixer = require('gulp-autoprefixer');
 const browserSync = require('browser-sync').create();
 const eslint = require('gulp-eslint');

 gulp.task('default', ['styles', 'lint'], () => {
   gulp.watch('sass/**/*.scss', ['styles']);
   gulp.watch('js/**/*.js', ['lint']);

   browserSync.init({
     server: './',
   });
 });

 gulp.task('styles', () => {
   gulp
     .src('sass/**/*.scss')
     .pipe(sass().on('error', sass.logError))
     .pipe(
       autoprefixer({
         browsers: ['last 2 versions'],
       })
     )
     .pipe(gulp.dest('./css'))
     .pipe(browserSync.stream());
 });

 gulp.task('lint', () =>
   gulp
     .src(['js/**/*.js'])
     .pipe(eslint())
     .pipe(eslint.format())
     .pipe(eslint.failOnError())
 );

Restart VSCode and everything should be working! Feel free to ask any questions that may come up.

Helpful Resources

ESLint setup in Visual Studio Code (Joel Longie): https://www.youtube.com/watch?v=o2H8kvuwMKE
Setting up ESLint on VS Code with Airbnb JS Style Guide (Travis Horn): https://travishorn.com/setting-up-eslint-on-vs-code-with-airbnb-javascript-style-guide-6eb78a535ba6 (recommend starting at: "The detailed version")
How to Setup VS Code + Prettier + ESLint (Wes Bos): https://www.youtube.com/watch?v=YIvjKId9m2c

ConnectExtend/gulp-eslint-setup.md

Installing ESLint for Gulp

Helpful Resources