How to have prettier working with single quote in my angular files

Question

I just installed Prettier on my project as recommended by some fellow developers, but I've some issues configuring it.

When I installed it, on the first format, VS Code asked me which formater I wanted to use(between tslint and prettier), so I choose prettier.

But now, when I an .ts file, I get warning by tslint on things like:

@Injectable({
  providedIn: "root",
})

which is true, I want to have single quote in my project. And then when I change it to

@Injectable({
  providedIn: 'root',
})

It gets replaced again by double-quotes.

I've been to the settings and tried to change every reference of quote to single quote, in my settings file ends being this one:

{
    "git.autofetch": true,
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "git.enableSmartCommit": true,
    "workbench.iconTheme": "material-icon-theme",
    "git.postCommitCommand": "sync",
    "git.pruneOnFetch": true,
    "git.confirmSync": false,
    "files.autoSaveDelay": 2000,
    "workbench.colorTheme": "Atom One Light",
    "html.format.wrapAttributes": "force-aligned",
    "html.format.wrapAttributesIndentSize": 120,
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.singleQuote": true,
    "prettier.jsxSingleQuote": true,
}

But still, when I save, the single quotes get replaced by double ones.

What did I miss, why prettier keeps trying to use double quote?

https://stackoverflow.com/questions/48864985/vscode-single-to-double-quote-automatic-replace — Drashti Dobariya, Sep 02 '21 at 08:57
It may be a setting in your .editorconfig file. It happened to me before — shteeven, Sep 02 '21 at 08:57

score 2 · Answer 1 · answered Sep 02 '21 at 08:59

2

Maybe you have it configured that way in tslint.json. Check if this is present in tslink.json:

"quotemark": [true, "double"]

And change it with:

"quotemark": [true, "single"]

Also check if you have this in your .editorconfig:

quote_type = double

And change it with:

quote_type = single

answered Sep 02 '21 at 08:59

NeNaD

18,172
8
47
89

No, tslint was correctly proposing to use single quote, it's prettier that was reformating it. – J4N Sep 02 '21 at 11:07
1

The `.editorconfig` suggestion worked for me in Angular 13 and ESLint/Prettier. Thanks – Bicskei Tibor May 20 '22 at 12:19

score 2 · Answer 2 · answered Aug 22 '22 at 21:02

This question has already been answered; however, I just wanted to add that you can create a prettier configuration file using the following steps in vsCode:

Open the command pallet:

ctl + p (for windows -- mac option + p)

and type:

'Prettier Create Configuration File' (you can get away with 'pret cre conf fil' and it will display the option to select it in the dropdown).

The benefit to doing it this way is that it will give you a couple boilerplate config options:

{
  "tabWidth": 2,
  "useTabs": false
}

Then set the previously mentioned: "singleQuote": true

score 1 · Answer 3 · answered Sep 02 '21 at 09:01

You can add a file named .prettierrc and inside add this rule along with other rules you like:

{
  "singleQuote": true
}

More here.

Or if you're using eslint you can achieve the same outcome by adding this under your rules object in your eslint file.

    'prettier/prettier': [
      { singleQuote: true },
    ],

score 0 · Accepted Answer · answered Sep 02 '21 at 11:11

for some reason, it appears that my repo was having a .editorconfig file, which was having no quote settings specified.

I gave up the idea of having this specified as VS Code settings and created a .prettierrc file at the root of my project with the following content:

{
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true
}

How to have prettier working with single quote in my angular files

4 Answers4