AST analysis cannot be performed with a properly configured parser when the imported file type is inconsistent with the current lint file type
#2719 opened on Feb 16, 2023
Description
AST analysis cannot be performed with a properly configured parser when the imported file type is inconsistent with the current lint file type
index.ts
import foo from 'foo.js';
import bar from 'bar.ts';
index.ts is the file I want to lint, It imports a js file and a ts file respectively
.eslintrc.js
module.exports = {
plugins: ['import'],
settings: {
'import/resolver': [
require.resolve('eslint-import-resolver-typescript'),
require.resolve('eslint-import-resolver-node'),
],
'import/extensions':['.js', '.jsx', '.ts', '.tsx'],
'import/parsers': {
[require.resolve('@typescript-eslint/parser')]: ['.ts', '.tsx'],
[require.resolve('@babel/eslint-parser')]: ['.js', 'jsx'],
},
},
},
rules: {
'import/no-cycle': 1,
},
overrides: [
{
files: ['*.ts', '*.tsx'],
parser: require.resolve('@typescript-eslint/parser'),
parserOptions: tsParserOptions,
},
{
files: ['*.js', '*.jsx'],
parser: require.resolve('@babel/eslint-parser'),
parserOptions: jsParserOptions,
},
],
}
@typescript-eslint/parser is used on index.ts when linting, but it is still used in imported foo.js even though my intention is to use @babel/eslint-parser. This may result in the following error
Error while xxx/foo.js
Line 24, column 24: Property or signature expected.
`parseForESLint` from parser `xxx/node_modules/@typescript-eslint/parser/dist/index.js` is invalid and will just be ignored
I found out that the root cause is in src/ExportMap.js
function childContext(path, context) {
const { settings, parserOptions, parserPath } = context;
return {
settings,
parserOptions,
parserPath,
path,
};
}
Because the parser is only obtained based on the first lint file, and cannot be replaced dynamically later
In the future, is it considered to support the dynamic use of the configured parser according to the type of file to be parsed? Can it also support dynamic parser options?
for example:
function childContext(path, context) {
let {
settings,
parserOptions: finalParserOptions,
parserPath: finalParserPath,
} = context;
const parsers = settings['import/parsers'];
const parserOptions = settings['import/parser-options'];
if (parsers != null) {
const extension = _path.extname(path);
for (const p in parsers) {
if (parsers[p].indexOf(extension) > -1) {
finalParserPath = p;
if (parserOptions != null && parserOptions[p] != null) {
finalParserOptions = parserOptions[p]
}
break;
}
}
}
return {
settings,
parserOptions: finalParserOptions,
parserPath: finalParserPath,
path,
};
}
eslintrc.js
const tsParserOptions = {
ecmaFeatures: {
jsx: true,
generators: false,
globalReturn: false,
},
sourceType: 'module',
ecmaVersion: 9,
};
const jsParserOptions = {
requireConfigFile: false,
ecmaVersion: 9,
babelOptions: {
plugins: [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-syntax-flow',
[
'@babel/plugin-proposal-decorators',
{
decoratorsBeforeExport: true,
legacy: false,
},
],
],
},
};
module.exports = {
plugins: ['import'],
settings: {
'import/resolver': [
require.resolve('eslint-import-resolver-typescript'),
require.resolve('eslint-import-resolver-node'),
],
'import/extensions':['.js', '.jsx', '.ts', '.tsx'],
'import/parsers': {
[require.resolve('@typescript-eslint/parser')]: ['.ts', '.tsx'],
[require.resolve('@babel/eslint-parser')]: ['.js', 'jsx'],
},
/**
* Added configuration option
*/
'import/parser-options': {
[require.resolve('@typescript-eslint/parser')]: tsParserOptions,
[require.resolve('@babel/eslint-parser')]: jsParserOptions,
},
},
overrides: [
{
files: ['*.ts', '*.tsx'],
parser: require.resolve('@typescript-eslint/parser'),
parserOptions: tsParserOptions,
},
{
files: ['*.js', '*.jsx'],
parser: require.resolve('@babel/eslint-parser'),
parserOptions: jsParserOptions,
},
],
};