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?

Answer 1

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
}