[Solved] VSCode Auto Replace Single Quotes with Double Quotes

👤 Diwas Poudel 🕒 23 Mar 2022 📁 FIX

Visual Studio Code is a fantastic code editor that everyone loves. However, bad experiences do occur from time to time. When you begin experimenting with extensions and settings, you may have a horrible experience and attempt to reset your vscode settings and sometimes reinstall vs code.

One of the problems most of the beginners developer-facing is their Single Quotes codes are automatically replaced by Double Quotes when you format the code (which is every time they save the code) and because of lack of experience with vs code, they start blaming vscode for the issue.

The actual cause of the problem was not VsCode, but rather the result of experimenting with various extensions and changing various VsCode settings.

The use of Prettier Extensions such as Prettier - Code formatter and Prettier - Javascript formatter is one of the issues with Auto Replace Single Quotes by Double Quotes in VSCode. And if you have TSLint installed, it will start complaining about a message like TSLint: "should be" (quotemark).

I had a similar problem with the Prettier -Code formatter extension and TSLint.I was working with React at the time, and when I executed Format Document on a React Component then your js file replaces all single quotes with double-quotes.

Is prettier Extension Faulty?

Ans: No, what they've done is correct, and they're formatting correctly. According to Prettier, he chooses the one that results in the fewest number of escapes. (read more)

If you want to have single quotes back and remaining settings of prettier as it is then here is the solutions:

Method 1: Using Prettier Extension Settings

The steps are as follow:

1 Click on File > Preferences > Settings

2 Search for the term " Prettier"

3 Click Prettier from the list and then at the right side make the following change.

Under Prettier: JSX Single Quote, Just check-in "use single quotes instead of double quotes in JSX"

Also under Prettier: Single Quote, Just check-in "If true, will use single instead of double quotes".

Also Read: How do I restore the default visual studio code settings?

Method 2: Using Settings.json

The steps are as follows:

1 Press Ctrl + Shift + P to open Command Palette, and then type open settings then just select "Preferences: Open Settings(JSON).

This will open the settings.json file.

2. Then inside settings.json, find the following "prettier.singleQuote" and "prettier.jsxSingleQuote", if exists then set the value to true. If it does not exists then just add these two-line.

"prettier.singleQuote": true,
"prettier.jsxSingleQuote": true

If you want typescript quote style to single and javascript quote style to single and set default editor as prettier then add the following code.

"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"editor.defaultFormatter": "esbenp.prettier-vscode"

Then complete code to add looks like this:

Also, you can add the following in your tslint.json (if you have )

Replace "quotemark": "double" to "quotemark": "single"

Also Read: Resolve IntelliSense Issue in Visual Studio Code [Fixed]

Conclusion:

Prettier - Code Formatter is a popular code formatter, and if you're having trouble with quotes in your code due to prettier, this solution is for you.