inline template temp file created by angular-eslint causes error when prettier is also used about angular-eslint

[tbadlov]

As a workaround you can add the pattern *inline-template-*.component.html to your excludedFiles from .eslintrc.json file:

{
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
      ],
      "rules": {}
    }

That said, it should be looked at.

[NicholaAlkhouri]

I am also having this problem, basically in spec.ts files where we usually write some simple inline templates.
And it is only happening when applying the html rules

{
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:prettier/recommended"
      ],
      "rules": {}
    }

[JamesHenry]

Please can you try ignoring these "special files" (that are temporarily created behind the scenes by the processing logic within ESLint) within your prettier configs?

i.e. in .prettierignore something like:

inline-template-*.component.html

Or whatever the syntax would be to get them to ignore this pattern:

const inlineTemplateTmpFilename = `inline-template-${++id}.component.html`;

That is how we create those names. When this issue was first opened we didn't support multiple inline templates in a single file, but now we do which is why that incrementing id is in there.

If that is successful, then we can add it to the docs.

Thanks!

[NicholaAlkhouri]

Same here, ignoring the files didn't work, here is the stack:

[error] Error: ENOTDIR: not a directory, stat '*******/1_inline-template-1.component.html'
Occurred while linting ********/1_inline-template-1.component.html:2
    at Object.statSync (fs.js:1035:3)
    at isTypeSync (****/node_modules/prettier/third-party.js:9748:46)
    at getDirectorySync (****/node_modules/prettier/third-party.js:9802:62)
    at ExplorerSync.searchSync (****/node_modules/prettier/third-party.js:9950:66)
    at _resolveConfig (****/node_modules/prettier/index.js:25592:50)
    at Function.resolveConfig.sync (****/node_modules/prettier/index.js:25621:42)
    at Program ****/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js:167:40)
    at****/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (****/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

[JamesHenry]

I will add a section to the README which covers this case in order to formally close this issue

[JamesHenry]

I have had a look into this and @tbadlov answer is nearly correct.

eslint-plugin-prettier is separately doing some file resolution behind the scenes - that is not something we can control.

I believe In order to get the full range of options working, namely:

• ESLint + prettier together should work on Components with external templates
• ESLint + prettier together should work on the external template HTML files themselves
• ESLint + prettier together should work on Components with inline templates

...the key point is that if you want to use eslint-plugin-prettier in this way, you should have two overrides for HTML:

Here is a fully working (tested in VSCode and on the command line via ng lint) example:

.eslintrc.json

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json", "e2e/tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {}
    },
    // NOTE: I AM NOT APPLYING PRETTIER HERE
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    // NOTE: I AM NOT APPLYING ANGULAR-ESLINT TEMPLATE HERE
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        // NOTE: I AM OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO HTML
        "prettier/prettier": ["error", { "parser": "html" }]
      }
    }
  ]
}

I set the parser within the prettier/prettier rule config because in my testing the inference wasn't 100% accurate and we know based on our usage above that that override block will only ever be run on HTML files.

PS I am using the latest eslint-plugin-prettier and as of v8 it has changed its behaviour - you no longer need "prettier/@typescript-eslint" at all

Screenshots from testing in VSCode

[JamesHenry]

The README has been updated

[snebjorn]

@JamesHenry should the prettier parser be set to html regardless of the project type?

I was thinking it should be set to angular or vue for those projects

[JamesHenry]

I’m AFK at the moment, @snebjorn would you like to open a PR to adjust the README?

[JamesHenry]

Thank you for submitting the issue, please see #86 (comment) for a brief personal update. I will endeavour to review this in the near future, if one of my co-contributors does not get to it first.

[JakeFDev]

Still in issue as of 2021.

Luckily my project only had one inline template, so i've just added a rule to disallow inline templates and moved that one out.

[matusko89]

Same problem here, but funny enough somehow I am able to run lint fine but every other team member experiences this problem
my settings

{
    "root": true,
    "ignorePatterns": [
        "projects/**/*"
    ],
    "overrides": [
        {
            "files": [
                "*.ts"
            ],
            "parserOptions": {
                "project": [
                    "tsconfig.json",
                    "e2e/tsconfig.json"
                ],
                "createDefaultProgram": true
            },
            "extends": [
                "plugin:@angular-eslint/recommended",
                "plugin:@angular-eslint/template/process-inline-templates",
                "eslint:recommended",
                "plugin:@typescript-eslint/recommended",
                "plugin:@typescript-eslint/recommended-requiring-type-checking",
                "prettier/@typescript-eslint",
                "plugin:prettier/recommended"
            ],
            "rules": {
                "@angular-eslint/component-selector": [
                    "error",
                    {
                        "type": "element",
                        "prefix": "",
                        "style": "kebab-case"
                    }
                ],
                "@angular-eslint/directive-selector": [
                    "error",
                    {
                        "type": "attribute",
                        "prefix": "",
                        "style": "camelCase"
                    }
                ],
                "@typescript-eslint/explicit-member-accessibility": [
                    "off",
                    {
                        "accessibility": "explicit"
                    }
                ],
                "@typescript-eslint/no-floating-promises": [
                    "off"
                ],
                "arrow-parens": [
                    "off",
                    "avoid"
                ],
                "import/order": "off"
            }
        },
        {
            "files": [
                "*.html"
            ],
            "extends": [
                "plugin:@angular-eslint/template/recommended",
                "prettier/@typescript-eslint",
                "plugin:prettier/recommended"
            ],
            "rules": {}
        }
    ]
}

[matusko89]

Please can you try ignoring these "special files" (that are temporarily created behind the scenes by the processing logic within ESLint) within your prettier configs?

i.e. in .prettierignore something like:

inline-template-*.component.html

Or whatever the syntax would be to get them to ignore this pattern:

const inlineTemplateTmpFilename = `inline-template-${++id}.component.html`;

That is how we create those names. When this issue was first opened we didn't support multiple inline templates in a single file, but now we do which is why that incrementing id is in there.

If that is successful, then we can add it to the docs.

Thanks!

hmmm I tried to add .prettierignore, .eslintignore and also I tried adding it to ignorePatterns in .eslintrc with many different patterns for example **/*.ts/* witch should match the path I am receiving in the error output but with no result

 ENOTDIR: not a directory, stat '/srv/www/ipsom/mkopernicky/web-client/src/app/widget/widget-base/widget-base.component.ts/1_inline-template-1.component.html'

my dev deps

"devDependencies": {
    "@angular-devkit/build-angular": "0.1100.3",
    "@angular-eslint/builder": "1.1.0",
    "@angular-eslint/eslint-plugin": "1.1.0",
    "@angular-eslint/eslint-plugin-template": "1.1.0",
    "@angular-eslint/schematics": "^1.1.0",
    "@angular-eslint/template-parser": "1.1.0",
    "@angular/cli": "11.0.3",
    "@angular/compiler-cli": "11.0.3",
    "@angular/language-service": "11.0.3",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "12.11.1",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "eclint": "^2.8.1",
    "eslint": "^7.6.0",
    "eslint-config-prettier": "^7.0.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "eslint-plugin-prettier": "^3.2.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "^2.2.1",
    "protractor": "~7.0.0",
    "stylelint": "^13.8.0",
    "stylelint-config-sass-guidelines": "^7.1.0",
    "ts-node": "8.3.0",
    "typescript": "4.0.5"
  }

[JamesHenry]

Yes I think you are right, it should be “angular” in order to pretty print everything (html is powered by angular compiler internally so it won’t ever error, just won’t pretty print as many constructs AFAICT).