I was trying to save the following code:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,css,js,jsx,ts,tsx}'],
theme: {
extend: {},
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 768px) { ... }
'lg': '1024px',
// => @media (min-width: 1024px) { ... }
'xl': '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @media (min-width: 1536px) { ... }
},
},
plugins: [],
};
However, when saving this file, notice that the single quotes in sm, md, lg … 2xl is removed by Prettier. I am using Prettier to format my code but I hope you could help me with preventing Prettier from removing those single quotes. Thank you!
3
Answers
You can set the
--quote-props
argument to"preserve"
:(and set
--single-quote
totrue
)In addition to @jsejcksn’s Post, here’s a direction on how to set up a config as you probably are not manually running it from the Shell
Global Settings (VSCode)
I don’t use VSCode, but I presume you do:
"prettier.quote-props": "preserve",
in the dictonaryProject Based Settings (anything)
.prettierrc
at your project rootSee:
Yes, by default, Prettier replaces single quotes with double quotes when formatting JavaScript files. This behavior is based on the assumption that using double quotes for strings is more common in JavaScript than single quotes.
However, you can configure Prettier to use single quotes instead of double quotes if you prefer. You can do this by setting the singleQuote option to true in your Prettier configuration file.
Alternatively, you can pass the –single-quote option to Prettier on the command line to enable single quotes for a specific run. Here is the command: