Merge pull request #108 from unic/feat/estatico-eslint-use-eslint-directly

feat: use eslint directly, deprecate gulp-eslint

Author: Robin Löffel

packages/estatico-eslint/.eslintrc.js

@@ -1,14 +1,13 @@
 module.exports = {
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   extends: 'airbnb-base',
   rules: {
     'import/no-extraneous-dependencies': 'off',
-    'import/no-unresolved': 'off',
-    'class-methods-use-this': 'off'
+    'class-methods-use-this': 'off',
+    'function-paren-newline': 'off',
   },
   env: {
     node: true,
     browser: true,
   },
 };
-  

packages/estatico-eslint/index.js

@@ -57,10 +57,8 @@ const task = (config, env = {}) => {
   const gulp = require('gulp');
   const plumber = require('gulp-plumber');
   const changed = require('gulp-changed-in-place');
-  const eslint = require('gulp-eslint');
   const through = require('through2');
-  const chalk = require('chalk');
-  const path = require('path');
+  const { ESLint } = require('eslint');
 
   return gulp.src(config.src, {
     base: config.srcBase,
@@ -72,33 +70,33 @@ const task = (config, env = {}) => {
     // Do not pass unchanged files
     .pipe(config.plugins.changed ? changed(config.plugins.changed) : through.obj())
 
-    // Lint and log formatted results, optionally auto-fix files
-    .pipe(eslint(config.plugins.eslint).on('error', err => config.logger.error(err, env.dev)))
-    .pipe(eslint.formatEach())
-    .pipe(through.obj((file, enc, done) => {
-      if (file.eslint && (file.eslint.errorCount > 0 || file.eslint.fixed)) {
-        const relFilePath = path.relative(config.srcBase, file.path);
+    // pass files directly to eslint
+    .pipe(through.obj(async (file, _enc, done) => {
+      const eslint = new ESLint(config.plugins.eslint);
+      const results = await eslint.lintFiles(file.path);
+      const [ result ] = results;
+      const formatter = await eslint.loadFormatter('stylish');
+      const output = formatter.format(results);
 
-        if (file.eslint.errorCount > 0) {
-          config.logger.error({
-            message: 'Linting error (details above)',
-            fileName: relFilePath,
-          }, env.dev);
-        }
+      if (config.plugins.eslint.fix) {
+        await ESLint.outputFixes(results);
+      }
 
-        // Only keep file in stream if it was fixed
-        if (file.eslint.fixed) {
-          config.logger.info(`Automatically fixed linting issues in ${chalk.yellow(relFilePath)}. Set "plugins.eslint.fix" to false to disable this functionality.`);
+      if (output.length > 0) {
+        // eslint-disable-next-line no-console
+        console.log(output);
+      }
 
-          return done(null, file);
-        }
+      if (!env.dev && result.errorCount > 0) {
+        return done(new Error(`Found ${result.errorCount} error(s) in ${file.relative}! Aborting build!`), file);
       }
 
-      return done();
-    }))
+      if (!env.dev && result.warningCount > 0) {
+        return done(new Error(`Found ${result.warningCount} warning(s) in ${file.relative}! Aborting build!`), file);
+      }
 
-    // Optionally write back to disc
-    .pipe(config.plugins.eslint.fix ? gulp.dest(config.dest) : through.obj());
+      return done(null, file);
+    }).on('error', error => config.logger.error(error, env.dev)))
 };
 
 /**

packages/estatico-eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unic/estatico-eslint",
-  "version": "0.0.13",
+  "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,26 +11,25 @@
   "repository": "https://github.com/unic/estatico-nou/tree/master/packages/estatico-eslint",
   "license": "Apache-2.0",
   "dependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/eslint-parser": "^7.16.5",
     "@unic/estatico-utils": "0.0.10",
-    "babel-eslint": "^9.0.0",
-    "chalk": "^2.4.1",
+    "eslint": "^8.5.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "^2.11.0",
     "gulp-changed-in-place": "^2.3.0",
-    "gulp-eslint": "^4.0.2",
     "gulp-plumber": "^1.2.0",
     "joi": "^13.2.0",
     "through2": "^2.0.3"
   },
   "engines": {
-    "node": ">=8"
+    "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
     "ava": "^0.25.0",
-    "del": "^3.0.0",
     "lodash.merge": "^4.6.1",
     "sinon": "^5.0.7"
   },

…ico-eslint/test/expected/default/main.js …es/estatico-eslint/test/expected/main.jspackages/estatico-eslint/test/expected/default/main.js renamed to packages/estatico-eslint/test/expected/main.js packages/estatico-eslint/test/expected/default/main.js renamed to packages/estatico-eslint/test/expected/main.js

@@ -1,7 +1,6 @@
 module.exports = {
   extends: 'airbnb-base',
-  rules: {
-    'import/no-extraneous-dependencies': 'off',
-    'import/no-unresolved': 'off'
-  }
+  parserOptions: {
+    requireConfigFile: false,
+  },
 };

packages/estatico-eslint/test/fixtures/.eslintrc.js

@@ -2,9 +2,9 @@ const test = require('ava');
 const sinon = require('sinon');
 const utils = require('@unic/estatico-utils').test;
 const path = require('path');
-const del = require('del');
 const merge = require('lodash.merge');
 const task = require('../index.js');
+const { readFileSync, writeFileSync } = require('fs');
 
 const defaults = {
   src: [
@@ -14,47 +14,57 @@ const defaults = {
   dest: './test/results/',
 };
 
-test.cb('with --fix', (t) => {
+test.cb('runs just to lint', (t) => {
   const spy = sinon.spy(console, 'log');
+  const options = merge({}, defaults, {
+    plugins: {
+      changed: null,
+    },
+  });
 
-  task(defaults, {
+  task(options, {
     dev: true,
-    fix: true,
-  })().on('end', () => {
+  })().on('finish', () => {
     spy.restore();
-
     const log = utils.stripLogs(spy);
 
-    t.notRegex(log, /'hello' is never reassigned. Use 'const' instead/);
-    t.notRegex(log, /estatico-eslint Linting error in file main\.js \(details above\)/);
-
-    utils.compareFiles(t, path.join(__dirname, 'expected/default/*'));
+    // the monitored console output should contain those three errors
+    t.true(log.includes("'hello' is never reassigned. Use 'const' instead"));
+    t.true(log.includes('Missing semicolon'));
+    t.true(log.includes('Unexpected console statement'));
 
     t.end();
   });
 });
 
-test.cb('without --fix', (t) => {
-  const options = merge({}, defaults, {
-    plugins: {
-      changed: null,
-    },
-  });
-
+test.cb('runs and takes care of autofixable errors', (t) => {
   const spy = sinon.spy(console, 'log');
 
-  task(options, {
+  // read the contents of the to-be fixed file in its original state
+  const untouchedFileContents = readFileSync(path.join(__dirname, './fixtures/main.js'), 'utf-8');
+  // read the fixture file, containing the expected autofix result
+  const fixtureFileContents = readFileSync(path.join(__dirname, './expected/main.js'), 'utf-8');
+
+  task(defaults, {
     dev: true,
+    fix: true,
   })().on('finish', () => {
     spy.restore();
-
     const log = utils.stripLogs(spy);
 
-    t.regex(log, /'hello' is never reassigned. Use 'const' instead/);
-    t.regex(log, /estatico-eslint main\.js Linting error \(details above\)/);
+    // read the contents of the file that got autofixed by eslint
+    const touchedFileContents = readFileSync(path.join(__dirname, './fixtures/main.js'), 'utf-8');
+    // revert the autofixed file to its original state
+    writeFileSync(path.join(__dirname, './fixtures/main.js'), untouchedFileContents);
+
+    // the autofixed file should contain the same as the expected file
+    t.true(touchedFileContents === fixtureFileContents);
+    // should print out the unfixable error
+    t.true(log.includes('Unexpected console statement'));
+    // should not print out fixable errors, because eslint already took care of them
+    t.false(log.includes("'hello' is never reassigned. Use 'const' instead"));
+    t.false(log.includes('Missing semicolon'));
 
     t.end();
   });
 });
-
-test.afterEach(() => del(path.join(__dirname, '/results')));