VS Code: Replace Double quotes with Single or vice versa

avatar
Borislav Hadzhiev

Last updated: Apr 6, 2024
4 min

banner

# Table of Contents

  1. VS Code: Replace Double quotes with Single or vice versa
  2. Setting your preferred quote style in settings.json
  3. Replace Double quotes with Single when using Prettier in VS Code
  4. A Prettier configuration file takes precedence over VS Code settings
  5. A .editorconfig file takes precedence over VS Code settings

# VS Code: Replace Double quotes with Single or vice versa

To replace double quotes with single or vice versa in VS Code:

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings and select Preferences: Open User Settings.

open user settings

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

  1. Type single quote in the search field.

replace double quotes with single

  1. Set the JavaScript Preferences: Quote Style and TypeScript Preferences: Quote Style settings to single or double.

The JavaScript and TypeScript Quote style settings have 3 possible values:

  • auto - the quote style is inferred from the existing code.
  • double - double " quotes are always used.
  • single - single ' quotes are always used.

If you only want to use single quotes in your files, set the following settings to single.

  • JavaScript Preferences: Quote Style
  • TypeScript Preferences: Quote Style

Conversely, if you only want to use double quotes in your code, set the properties to double.

Note: If you use Prettier in VS Code, click on the following subheading:

# Setting your preferred quote style in settings.json

You can also set your preferred quote style in your settings.json file.

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings json.

  2. Click on Preferences: Open User Settings (JSON)

preferences open user settings

  1. Add the following properties to your settings.json file.
settings.json
"javascript.preferences.quoteStyle": "single", "typescript.preferences.quoteStyle": "single",

set preferred quote type in settings json

Make sure to remove the trailing comma if the property comes last.

You can set the properties to double if you'd rather use double quotes.

settings.json
"javascript.preferences.quoteStyle": "double", "typescript.preferences.quoteStyle": "double",

# Replace Double quotes with Single when using Prettier in VS Code

If you use the Prettier extension to format your code, you have to edit your prettier-specific settings to make the change.

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings and select Preferences: Open User Settings.

open user settings

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

  1. Type prettier quote and check the following 2 checkboxes:
  • Prettier: JSX Single Quote
  • Prettier: Single Quote

automatically replace single with double quotes vscode

When the Prettier: JSX Single Quote setting is enabled, single quotes are used instead of double quotes in JSX (React.js) files.

When the Prettier: Single Quote setting is enabled, single quotes are used instead of double quotes everywhere (except for JSX files).

# A Prettier configuration file takes precedence over VS Code settings

If you have a .prettierrc, prettierrc.json or .prettierrc.js file, it takes precedence over your VS Code settings.

The same is the case if you have a prettier in your package.json file.

You have to make the change directly in your prettier config file as the VS Code Prettier settings won't be read.

If you have a .prettierrc file, set the following properties.

.prettierrc
{ "singleQuote": true, "jsxSingleQuote": true }

replace double with single quotes in prettierrc

If you manage your prettier configuration in your package.json file, you have to add the following properties to your prettier object.

package.json
"prettier": { "singleQuote": true, "jsxSingleQuote": true }

update prettier configuration in package json

# A .editorconfig file takes precedence over VS Code settings

If you have a .editorconfig file, you have to make the change in your .editorconfig as your VS Code settings won't be read.

Add the following line to your .editorconfig file to replace single quotes with double.

.editorconfig
quote_type = single

If you only want to use double quotes, set the quote_type to double.

.editorconfig
quote_type = double

If the changes have no effect, restart VS Code.

I've also written an article on how to find and replace with a newline in VS Code.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.