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.
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.
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:
Click on File > Preferences > Settings
Search for the term " Prettier"
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".
Method 2: Using Settings.json
The steps are as follows:
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.
. 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.
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"
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.