When working with Javascript and TypeScript, arbitrary use of single quotes and double quotes may not cause errors but will result in a lack of consistency and readability. Therefore, choosing and going with a certain quote type is a good habit. This article shows you how to set the preferred quote for quick fixes and formatting in VS Code (Visual Studio Code). Just follow the steps listed below.
1. Navigate to the Settings page of VS Code:
- Windows: File > Preferences > Settings (hotkeys: Ctrl + ,)
- Mac: Code > Preferences > Settings (hotkeys: Command + ,)
2. Enter “single quote” into the search field. The search results will appear immediately. Head to the “Javascript > Preferences: Quote Style” section, click on the dropdown and select the quote style you like (“single” or “double”). See the screenshot for more clarity:
3. Do the same thing in the “TypeScript > Preference: Quote Style” section. Choose “single” or “double” from the dropdown menu:
4. If you’re using Prettier, check/uncheck the checkboxes in the “Prettier: Jsx Single Quote” and “Prettier: Single Quote” sections. I prefer single quotes to double quotes so that I will check these checkboxes:
From this time forward, you can change all double quotes to single quotes automatically in the blink of an eye by using the following shortcuts:
- Mac: Option + Shift + F
- Windows: Alt + Shift + F
For example
import axios from "axios"Will become:
import axios from 'axios'If you aren’t familiar with auto-formatting code in VS Code, see this article: How to Format Code in VS Code (Visual Studio Code).
That’s it. Further reading:
- VS Code: How to Position/Align the Bottom Panel
- VS Code: Quickly Move Focus between Code File and Terminal
- VS Code: How to Collapse/Expand Blocks of Code
- VS Code: How to Pin/Unpin a File (2 Approaches)
- VS Code & Javascript/TypeScript: Place Curly Braces on New Line
- React + TypeScript: Making a Reading Progress Indicator
You can also check out our Visual Studio Code topic page for more tips and tricks to improve your producibility and coding experience.
