CODEWITHSUNDEEP
angularvisual-studio-code
DeborahK
DeborahK

Reputation: 60568

Is there a way to change from double quotes to single quotes in VS Code quick fix?

When using VSCode with Angular, I write my import statement list this:

import { AppComponent } from './app.component';

The VSCode Quick Fix adds them like this:

import { WelcomeComponent } from "app/home/welcome.component";

Is there a way to change the VS Code Quick Fix with a VS Code setting to use single instead of double quotes?

Upvotes: 12

Views: 32704

Answers (8)

Andrew E
Andrew E

Reputation: 8337

This works nice and simply...

Open settings in VSCode, e.g. Command + ',' and then filter for "typescript":

enter image description here

Look for "quote style" and change:

enter image description here

Upvotes: 7

Sebastian Castaldi
Sebastian Castaldi

Reputation: 9014

In tslint.json

quotemark should be set inside rules

{
    "defaultSeverity": "error",
    "extends": ["tslint:recommended"],
    "jsRules": {},
    "rules": {
      "quotemark": [true, "single", "avoid-escape", "avoid-template"],
      "no-console": false
    },
    "rulesDirectory": [],
    "compilerOptions": {
      "types": ["reflect-metadata", "jest"],
       "typeRoots": ["./types", "./node_modules/@types"]
     },
     "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
     "include": ["./**/*.tsx", "./**/*.ts"]
  }

Upvotes: 0

Nisanur
Nisanur

Reputation: 89

open the VS Code settings.json after change typescript setting to

 "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }

enter image description here

Upvotes: 3

David Long
David Long

Reputation: 678

If your project has a .editorconfig file, try adding the following line:

[*]
...
quote_type = single

I've found that the .editorconfig file seems to override any settings for vscode, prettier, tslint, etc. and it seems to default to something other than single quotes.

Deleting the file can work as well if you don't need it.

More info on editorconfig.

Upvotes: 19

VivekDev
VivekDev

Reputation: 25527

Press Ctrl + , for settings.

Then search for prettier. Find the setting Prettier: Single Quote

Set that to true.

You can set that in user settings or work space setting.

Upvotes: 4

gngchrs
gngchrs

Reputation: 478

You can use the Prettier Extension with the following settings (global/workspace).

"prettier.singleQuote": true

Upvotes: 14

Pengyy
Pengyy

Reputation: 38189

Check your tslint.json for the quotemark part.

If it's setted to use doublequote by 

"quotemark": [
  true,
  "double"   < ------mention here
]

then there will be warning at your typescript file while using singlequote. And this will lead VS Code's quick-fix(show fix option for me) to change singlequote to doublequote.

So the solution should be change double to single.

"quotemark": [
  true,
  "single"   < ------change here
]

Upvotes: 9

malux
malux

Reputation: 63

Have a look at this extension called "ECMAScript Quotes Transformer" that you can install by pressing : 

Ctrl/Cmd + P

and type

ext install es-quotes

ECMAScript Quotes Transformer on Visualstudio.com

Upvotes: 0

Related Questions