support Class Fields

[aladdin-add]

The version of ESLint you are using.
latest

The problem you want to solve.
support class fields officially, as it has reached stage-4.
refs: https://github.com/tc39/proposals/blob/master/finished-proposals.md

Your take on the correct solution to problem.

• Ecma262 update: Normative: Add public and private class fields, static class features, private methods & getters/setters tc39/ecma262#1668
• ESTree update: Add ES2022 estree/estree#250
• Acorn update: Implement ES2022 class features acornjs/acorn#1026
• eslint-visitor-keys update: Update: add PrivateIdentifier and PropertyDefinition eslint-visitor-keys#20
• espree update: Update: add class fields (refs eslint/eslint#14343) espree#486
• eslint-scope update: Update: support class fields (refs eslint/eslint#14343) eslint-scope#69
• eslint syntax and rules update: Breaking: upgrade espree and support new class features (refs #14343) #14591
• eslint code path analysis update

[nzakas]

@aladdin-add can you investigate to see which rules need to be updated and list them in this issue?

[aladdin-add]

that's exactly what I want to do later. 😄

[rhinonan]

indent ?

Class Foo {
  private foo1 = 1
    private foo2 = 2 // eslint indent rule not given any errors
}

[ota-meshi]

Does ESLint need to upgrade eslint-utils?
It may not be necessary as it seems to use only some features of eslint-utils.
I would like to help eslint-utils. mysticatea/eslint-utils#20

[nzakas]

Published new version of eslint-visitor-keys

[nzakas]

Published new version of eslint-scope.

[f0o]

Class foo {
  #x
}

still yields error Parsing error: Unexpected character '#' on eslint 8.0.1 - Did I miss something?

[minimit]

Class foo {
  #x
}

still yields error Parsing error: Unexpected character '#' on eslint 8.0.1 - Did I miss something?

Be sure to have this setting in .eslintjs.rc.

parserOptions: {
    ecmaVersion: 13,

[f0o]

@minimit That's the one! Thanks!

[NinjaCross]

I have this same error running eslint 8.4.1 using gulp-eslint 7.21.1

"C:\Program Files\nodejs\node.exe" J:\MyProject\MyProject.WebSite\node_modules\gulp\bin\gulp.js --color --gulpfile J:\MyProject\MyProject.WebSite\gulpFile.js run-eslint
[19:28:51] Using gulpfile J:\MyProject\MyProject.WebSite\gulpFile.js
[19:28:51] Starting 'run-eslint'...
START Es Lint
[19:28:51] Finished 'run-eslint' after 229 ms
END Es Lint
[19:28:52] no problems
[19:28:52]
J:\MyProject\MyProject.WebSite\wwwroot\js\MyEventListener.js
  7:5  error  Parsing error: Unexpected character '#'

✖ 1 problem (1 error, 0 warnings)

package.json

{
  "version": "1.0.0",
  "name": "my-website",
  "private": true,
  "engines": {
    "node": ">=17"
  },
  "scripts": {
    
  },
  "devDependencies": {
    "fs": "^0.0.2",
    "glob": "^7.2.0",
    "gulp": "^4.0.2",
    "gulp-cli": "^2.3.0",
    "gulp-clean": "^0.4.0",
    "sass": "^1.44.0",
    "eslint": "^8.4.1",
    "gulp-eslint": "^6.0.0"
  },
  "dependencies": {

  }
}

.eslintrc.json

{
	"extends": "eslint:recommended",
	"globals": {},
	"env": {
		"browser": true,
		"commonjs": true,
		"es6": true,
		"jquery": true
	},
	"parserOptions":{
		"ecmaVersion": 2020  <--- I tried with multiple values (11, 13, 2018, 2020), but no one of them solved the problem
	},
	"rules": {
		"no-prototype-builtins": "off",
		"no-unused-vars": "off",
		"no-undef": "off"
	}
}

gulpFile.js

/// <binding AfterBuild='build-scss'/>
const gulp = require('gulp');
const clean = require('gulp-clean');
const glob = require("glob");
const fs = require("fs");
const eslint = require('gulp-eslint');

gulp.task("run-eslint", callback => {
    const options = {
        realpath: true,
        nodir: false
    };

    console.log('START Es Lint');

    glob("wwwroot/js/*.js", options, async (er, files) => {
        if (er) {
            console.error(er);
            callback(er);
        } else {
            for (const f of files) {
                if (!f.endsWith('.min.js')) {
                    runEsLint(f);
                }
            }
        }
        callback();
        console.log('END Es Lint');
    });
});

function runEsLint(filePath) {
    gulp.src(filePath). // get the target file
        pipe(eslint()). // attaches the lint output to the "eslint" property of the file object so it can be used by other modules.
        pipe(eslint.format()). // outputs the lint results to the console
        pipe(eslint.format('visualstudio')). // outputs the lint results formatted for Visual Studio
        pipe(eslint.failAfterError()) // To have the process exit with an error code (1) on lint error, return the stream and pipe to failAfterError last.
    ;
}

Any idea ?

[JLHwung]

@NinjaCross gulp-eslint pins eslint to v6, see adametry/gulp-eslint#250

[NinjaCross]

@NinjaCross gulp-eslint pins eslint to v6, see adametry/gulp-eslint#250

I see. Thank you, I wasn't aware of this.
I solved changing the parser.
Now with Babel it seems to work ok.