6

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 ?

5
  • In fact, ESLint only admits one parser per file. But I don't see why you can't remove the existing rules of the angular-eslint plugin 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! ;-) Commented Sep 28, 2022 at 0:00
  • Thx for the response. It's not that I ça not remove the rules of angular-eslint, it's more that I won't because it has specific rules that I want to keep. Commented Sep 29, 2022 at 6:40
  • I didn't take notes of the errors at the time I tried to do this but if you're telling me that eslint does not support it, I will use à workaround. Do you have one in mind maybe ? Commented Sep 29, 2022 at 6:49
  • 1
    Not really. I would try to run ESLint two times with different configurations. Commented Sep 29, 2022 at 7:28
  • I ended up writing a script that checks the diff of the last 10 commits. I did not want to use a second eslint config only for one rule. Thanks anyway. Commented Oct 7, 2022 at 10:04

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.