Wk-notes-12-11-eslint-dive-vscode-debug

Pitfalls

• mixed content (http inside https website): Chrome allows localhost/127.0.0.1, Safari blocks all, Firefox allows 127.0.0.1

• After JSON.stringify(), remember to remove trailing and leading " !!!

• check npm install message to detect any abnomly, peer dependency

Eslint Dive 2 (!!)

vscode extension

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version.

how linter analyse ast

• sharedTraversalContext contains scope info

• scope analyzer is important for rules to check scope and variables

The issue

@babel/plugin-proposal-class-properties and eslint(no-undef) has conflicts, due to

Closing because class properties are an experimental proposal, and we don't support experimental proposals.

Ref :https://github.com/eslint/eslint/issues/8720#issuecomment-314305372

TL;DR

This should be solved by

{
    "eslint": ">=4.14.0",
    "babel-eslint": ">=8.1.0"
}

with fix from eslint/eslint PR#8755, and fix from babel/babel-eslint PR#542. Thanks to @mysticatea for the hard work.

--------

Explanation: This is a issue caused by the 'scope analyze' in eslint. In the older version (<4.14.0), eslint analyze the scope by its own without passing in the correct childVisitorKeys attribute.

// eslint.js
// gather scope data that may be needed by the rules
scopeManager = escope.analyze(ast, {
    ignoreEval: true,
    nodejsScope: ecmaFeatures.globalReturn,
    impliedStrict: ecmaFeatures.impliedStrict,
    ecmaVersion,
    sourceType: currentConfig.parserOptions.sourceType || "script",
    fallback: Traverser.getKeys
});

https://github.com/eslint/eslint/blob/421aab44a9c167c82210bed52f68cf990b7edbea/lib/eslint.js#L892

A correct scope after parser.parse() requires corresponding childVisitorKeys defined by different parser, as PR#8755 explains

After those two PRs, babel-eslint will generate the scopeManager with its own modification. eslint will consume the scopeManager (const scopeManager = parseResult.scopeManager;), and apply rules over it.

Take away: It costs time to locate the root cause for this kind of issue if you are not familiar with the massive project like eslint (or ast concept), not to mention it normally comes with several more issues together. If you really want to do the research, start from the rules folder and analyze specific rule to get two cents about what goes wrong, in this case, it's the scope. It would be much easier then to narrow down your research in scope-related logic in parse().

The easy way to 'just make things work' maybe is always upgrade version.