I think your vscode config and settings and .prettier are not the same.
try creating .prettierrc file in your project root and add a prettier config. vscode will automatically pick up the config.
Add all the format-related config in .prettierrc vscode should read the config and format. settings.json is not the right place to add all the prettier config. It'll also be helpful for other team members otherwise when someone commits it'll change the format.
.prettier
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"printWidth": 120,
"bracketSpacing": true,
"jsxBracketSameLine": true
}
.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
Answer from Rahul Sharma on Stack OverflowI think your vscode config and settings and .prettier are not the same.
try creating .prettierrc file in your project root and add a prettier config. vscode will automatically pick up the config.
Add all the format-related config in .prettierrc vscode should read the config and format. settings.json is not the right place to add all the prettier config. It'll also be helpful for other team members otherwise when someone commits it'll change the format.
.prettier
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"printWidth": 120,
"bracketSpacing": true,
"jsxBracketSameLine": true
}
.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
This seems to be an ESLint bug.
See https://github.com/prettier/prettier-vscode/issues/595#issuecomment-463762649.
Try disabling the ESLint extension and see if it works.
Need help with prettier and vscode
printWidth not working
`printWidth` not enforced on save
prettier does not seem to respect printWidth
Run prettier from the command line. If that does what you expect then you can narrow down from there by slowing removing parts of your neovim config.
More on reddit.comI need to update the .prettierrc in root directory, not the extension settings
{
"trailingComma": "none",
"overrides": [
{
"files": "**/lwc/**/*.html",
"options": { "parser": "lwc" }
},
{
"files": "*.{cmp,page,component}",
"options": { "parser": "html" }
}
],
"printWidth": 120
}
In .prettierrc file paste the following code and restart the VS code. it will work. You can change the printwidth from 80 to 120 as required.
{ "trailingComma": "none", "printWidth":120, "tabWidth":4, "overrides": [
{
"files": "**/lwc/**/*.html",
"options": { "parser": "lwc" }
},
{
"files": "*.{cmp,page,component}",
"options": { "parser": "html" }
} ] }
Hello, I am using
"prettier.printWidth": 80 but is not working correctly
The only way to fix it is by is using
"editor.wordWrap": "wordWrapColumn", and then I am getting
Is this a prettier bug ?
Prettier formatting does not seem to abide by the `printWidth` rule in my `.prettierrc`.
I have set `printWidth: 999` to demonstrate the issue clearly. Now,
<div class="flex min-w-[600px] h-full min-h-[800px] snap-start snap-always flex-col items-center justify-center gap-8 text-white"><h1>something</h1></div>
formats to
<div class="flex h-full min-h-[800px] min-w-[600px] snap-start snap-always flex-col items-center justify-center gap-8 text-white"> <h1>something</h1> </div>
as you can see, the formatter does work and even the classes get rearranged in the recommended tailwind order, the long class variable is moved to a new line even though the printWidth I have set should allow everything in that tag stay on the same line.
I use NvChad, here is my `conform.lua`
local options = {
formatters_by_ft = {
lua = { "stylua" },
css = { "prettier" },
html = { "prettier" },
javascript = { "prettier" },
typescript = { "prettier" },
svelte_fmt = {
command = "prettier",
args = { "--plugin", "prettier-plugin-svelte", "$FILENAME" },
},
},
format_on_save = {
-- These options will be passed to conform.format()
enabled = true,
timeout_ms = 2000,
lsp_fallback = true,
},
}
require("conform").setup(options)and here is the `.prettierrc` in the root of my svelte project
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 999,
"bracketSameLine": true,
"plugins": [
"prettier-plugin-svelte",
"prettier-plugin-tailwindcss"
],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}after running `:LspInfo`
What could be causing this?
The short answer is no, you cannot disable it entirely.
There are, however, a few workarounds, but they have caveats.
To quote an answer from this issue on github: https://github.com/prettier/prettier/issues/3468. printWidth is not a rule but an input into the algorithm they use to generate their output. Meaning, it is required to be there.
One workaround is to set printWidth to a really high number, but although this will prevent lines from breaking, changing this property will affect your entire codebase, causing other lines throughout it to combine into a single line, which is most likely not desired.
Your second option is to disable prettier for a block of code with the // prettier-ignore syntax. The downside to this is that you'll disable all prettier features for this section of the code. Also, I personally don't find it very "clean" to have comments like that all over your code.
You can read about how to use the ignore functionality here: https://prettier.io/docs/en/ignore.html
If you want to disable prettier rules once, just do:
// prettier-ignore
const date = new Date() // prettier disabled on this line
Find .editorconfig file in your project. If exists, add max_line_length = 120 to it.
See "Print Width" in Prettier document https://prettier.io/docs/en/options.html for details
- Did you consider the file extensions Prettier is actually supporting?
- If yes, when you have the file opened, is "Prettier" selected in the status bar on the bottom right?
- If yes, open the "Output" tab in VS Code and try to format the file. What do you see as output (you might need to select "Prettier" in the dropdown of the "Output" tab).