Angular default with single quote?

[cupidchan]

I follow the instruction to setup my Angular project with ESLint and Prettier:

# Install ESLint
npm install --save-dev eslint

# Install additional plugins
npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-prettier

# Install Prettier and Prettier-ESLint dependencies
npm install --save-dev prettier prettier-eslint eslint-config-prettier

And update the .eslintrc.json

{
  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
  "extends": [
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  "parserOptions": {
    "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
    "sourceType": "module" // Allows for the use of imports
  },
  "rules": {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
  }
}

However, I found out that Prettier will complain if it's double quote, which I think it should be Prettier default. I have another Node.js project which also take double quote as default unless I overwrite it. However, this Angular project is the other way around. Is this the expected behavior of Prettier for Angular project?

[lydell]

Hi!

I don’t think this has much to do with eslint-config-prettier (this repo), but I’ll try to help as good as I can.

The first problem I ran into is that your example code is an image so I couldn’t copy-paste it. Next time it would be very helpful if you had created a little repo out of your example instead of copy-pasting things into the issue!

I noticed your install commands mention prettier-eslint, but you don’t seem to use it?

When I finally managed to run eslint ., I got no errors. I suspect this is because you posted no Prettier config. Prettier uses double quotes by default.

Do you have some Prettier config lying around that has changed to single quotes? Maybe running this helps?

npx prettier --find-config-path web/src/app/app.component.ts

[cupidchan]

Thanks for your quick turnaround @lydell I have created a repo to reproduce the issue: https://github.com/cupidchan/angular-prettier

In the src/app/app.component.ts, I put a double quote for the package name "@angular/core" intentionally and it gives me and error

/Users/cupidchan/Documents/GitHub/cupidchan/angular-prettier/src/app/app.component.ts
  1:27  error  Replace `"@angular/core"` with `'@angular/core'`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Lint errors found in the listed files.

And you can also see that ESLint doesn't complain about the single quote for the other part on the same file.

Thanks a lot for checking this out for me! I spent quite some time but couldn't get any clue why is this happening.

[lydell]

Thanks!

It was not easy to find, but the issue is that .editorconfig contains this:

[*.ts]
quote_type = single

I had completely forgotten that Prettier looks at your .editorconfig file… 😵

[cupidchan]

@lydell , YOU ROCK!!! It is indeed the problem. I removed the following 2 lines in .editorconfig and Prettier starts picking up the work to format my code nicely! Maybe we can add this to some FAQ for Angular since this is the out of the box behavior which some people may stumble the same issue.

[*.ts]
quote_type = single

[qwoq17]

Simón De: Cupid Chan notifications@github.comEnviado: domingo, 17 de enero de 2021 17:03Para: prettier/eslint-config-prettierCc: SubscribedAsunto: [prettier/eslint-config-prettier] Angular default with single quote? (#171) I follow the instruction to setup my Angular project with ESLint and Prettier:

Install ESLint

npm install --save-dev eslint

Install additional plugins

npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-prettier

Install Prettier and Prettier-ESLint dependencies

npm install --save-dev prettier prettier-eslint eslint-config-prettier

And update the .eslintrc.json { "parser": "@typescript-eslint/parser", // Specifies the ESLint parser "extends": [ "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. ], "parserOptions": { "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features "sourceType": "module" // Allows for the use of imports }, "rules": { // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs } }

However, I found out that Prettier will complain if it's double quote, which I think it should be Prettier default. I have another Node.js project which also take double quote as default unless I overwrite it. However, this Angular project is the other way around. Is this the expected behavior of Prettier for Angular project?

—You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or unsubscribe. [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "https://github.com/prettier/eslint-config-prettier/issues/171", "url": "https://github.com/prettier/eslint-config-prettier/issues/171", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } } ]