yeonjuan
commented
3 months ago hi @Maweypeyyu Try this :)
module.exports = {
root: true,
env: { browser: true, es2020: true },
ignorePatterns: ['dist', '.eslintrc.cjs'],
plugins: ['react-refresh', 'prettier', 'html', '@html-eslint', '@typescript-eslint'],
overrides: [
{
files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended-type-checked',
'plugin:@typescript-eslint/stylistic-type-checked',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:react/jsx-runtime',
'prettier',
],
parser: '@typescript-eslint/parser',
rules: {
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
'prettier/prettier': 'error',
},
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
settings: {
react: {
createClass: 'createReactClass', // Regex for Component Factory to use,
// default to "createReactClass"
pragma: 'React', // Pragma to use, default to "React"
fragment: 'Fragment', // Fragment to use (may be a property of <pragma>), default to "Fragment"
version: 'detect', // React version. "detect" automatically picks the version you have installed.
// You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
// It will default to "latest" and warn if missing, and to "detect" in the future
flowVersion: '0.53', // Flow version
},
propWrapperFunctions: [
// The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
'forbidExtraProps',
{ property: 'freeze', object: 'Object' },
{ property: 'myFavoriteWrapper' },
// for rules that check exact prop wrappers
{ property: 'forbidExtraProps', exact: true },
],
componentWrapperFunctions: [
// The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
'observer', // `property`
{ property: 'styled' }, // `object` is optional
{ property: 'observer', object: 'Mobx' },
{ property: 'observer', object: '<pragma>' }, // sets `object` to whatever value `settings.react.pragma` is set to
],
},
},
{
files: ['**/*.html'],
extends: ['plugin:@html-eslint/recommended'],
parser: '@html-eslint/parser',
parserOptions: {
project: false, // Disable type information for HTML files
},
},
],
};
I have the following
.eslintrc.cjsfile:With these package versions:
As soon as I try to use html-eslint in my project, I get the following error in VSCode from the eslint language server (or via eslint CLI command):
The error occurs in any files I tested: tsx, ts, html.
Do you see anything wrong with my config? Is there a known incompatibility? Is it a version issue? I tried multiple different overrides (see one above), but nothing changed. Any pointers would be greatly appreciated!