I was trying to add a new eslint rule (here is a link to the rule I'm trying to use) to my angular project and stumbled on an issue that I can't overcome. Eslint does not seem to handle two different parsers for two groups of files and I cannot remove the existing rules brought by the angular-eslint plugin. Here is a part of the .eslintrc that I'm trying to have:
module.exports = {
root: true,
env: {
node: false,
jest: true,
},
ignorePatterns: ['frontend/src/assets/**/*.js', 'frontend/src/stories'],
overrides: [
{...},
{
files: ['*.html'],
parser: '@angular-eslint/template-parser',
extends: [
'plugin:@angular-eslint/template/recommended'
],
rules: {
'@angular-eslint/template/no-negated-async': 'warn',
}
},
{
files: ['*.html'],
parser: '@html-eslint/parser',
plugins: ['@html-eslint'],
extends: ['plugin:@html-eslint/recommended'],
rules: {
'@html-eslint/indent': 'off',
'@html-eslint/element-newline': 'off',
'@html-eslint/require-doctype': 'off',
'@html-eslint/require-li-container': 'off',
'@html-eslint/quotes': 'off',
'@html-eslint/require-img-alt': 'warn',
'@html-eslint/no-restricted-attrs': ['error', {
tagPatterns: ['^div$', '^p$', '^h*$', '^button$', '^span$', '^strong$', '^b$', '^li$', '^a$', '^i$'],
attrPatterns: ['innerHTML'],
message: 'innerHTML directive is not allowed, please use padoaSafeInnerHtml instead'
}],
}
},
{...},
],
};
When I use both rules, the first one gets overridden by the second and when I try to use one parser to the other rule I get an error telling me that the parser is not compatible.
You're my last chance, my other solution is to write a script to do the same thing as the rule (forbids the use of the attribute innerHtml) and make it run as pre-commit hook and on the CI.
Does anyone have an idea ?