Javascript Transpiler and ESLint are NOT Perfect

Summary

Even with a transpiler, not all ECMAScript descriptions can be converted.
Even with ESLint, not all ECMAScript descriptions can be linted.

Inspect!

When using ECMAScript, what does the transpiler convert and what does it parse?

Verify what the transpiler converts and what it ignores
Verify what ESLint parses and what it ignores

cc-kawakami/transpilers-and-eslint-are-not-perfect

Input for validation

Code samples based on ES6 to ESNext standards
Pick a function that you may have occasion to use

/**
 * ES2015
 * ------------------------------------------------
 */
/** const, let */
const cst = 1
let lt = 2
console.log(cst)
console.log(lt)

/** Allow function */
const fn = () => {
  console.log('fn')
}

/** classes */
class Hoge {
  fuga () {
    console.log('fuga')
  }
}

/**
 * ES2016
 * ------------------------------------------------
 */
/** Array.prototype.includes */
const array = [1, 2, 3, 4, 5]
console.log(array.includes(2))

/** power operator */
console.log(2**2)

/**
 * ES2017
 * ------------------------------------------------
 */
/** Async functions */
async function log () {
  console.log('hoge')
}

/** Object.values() */
const obj = { hoge: 0, fuga: 1, piyo: 2 }
console.log(Object.values(obj))

/**
 * ES2018
 * ------------------------------------------------
 */
/** Spread Properties */
const hoge = { fuga: 'piyo' }
console.log({ .... .hoge })

/** RegExp named capture groups */
console.log(/(? <year>[0-9]{4})year/.test('2021'))

/** RegExp Lookbehind Assertions */
console.log(/(? <=[0-9]+)\. [0-9]+/.test('.34'))

/**
 * ES2019
 * ------------------------------------------------
 */
/** flat array methods */
console.log([[1, 2], 3, 4].flat())

/**
 * ES2020
 * ------------------------------------------------
 */
/** Optional chaining operator */
console.log(hoge?.fuga)

/**
 * ES2021
 * ------------------------------------------------
 */
/** Logical assignment operators */
console.log(a ||= b)

/** Numeric separators */
console.log(100_000_000)

/**
 * ESNext
 * ------------------------------------------------
 */
/** static class field */
class Foo {
  static bar = 1
}

console.log(Foo.bar)

Target transpiler and settings

No	name	target
1	Babel / conservative	- ( `> 1% in JP` )
2	Babel / progressive	- ( `> 5% in JP` )
3	esbuild / default	ESNext
4	esbuild / to ES2017	ES2017
5	rollup	not transpile
6	rollup-plugin-esbuild	ES2017
7	Typescript / default	ES3
8	Typescript / to ES2017	ES2017

Inspection results.

Descriptions not converted by ALL transpiles

RegExp named capture groups (ES2018)
RegExp Lookbehind Assertions (ES2018)
Flat array methods (ES2019)

Descriptions that cannot be validated with ESLint

flat array methods (ES2019)

Other things I noticed

esbuild reduces comments by default.

(extra) execution time

No	name	target	time ( s )
1	Babel / conservative	- ( `> 1% in JP` )	0.63
2	Babel / progressive	- ( `> 5% in JP` )	0.53
3	esbuild / default	ESNext	0.31
4	esbuild / to ES2017	ES2017	0.18
5	rollup	not transpile	0.20
6	rollup-plugin-esbuild	ES2017	0.27
7	Typescript / default	ES3	1.21
8	Typescript / to ES2017	ES2017	1.36

Javascript Transpiler and ESLint are NOT Perfect

Summary

Inspect!

Input for validation

Target transpiler and settings

Inspection results.

Descriptions not converted by ALL transpiles

Descriptions that cannot be validated with ESLint

Other things I noticed

(extra) execution time

Reference