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 ?
angular-eslintplugin or how that relates to the new rule you are trying to add. To get better answers, it would help you to focus on one single problem per question and to show the error messages you get with each of your failing attempts. Never expect others to get the same errors as you! ;-)angular-eslint, it's more that I won't because it has specific rules that I want to keep.