prettier printWidth setting is not formatting correctly on save

Question

This workspace has two linting plugins(eslint and prettier):

My lint settings:

I can indeed see the default format document is set to prettier:

(The Problem) The format on save is still the following:

The format I'm expecting:

(line#8 has a total of 59 characters including whitespaces, which is under 120)

Note: on another project this is not an issue. But in that other project I also have linting files configured inside it.

Answer 1

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
    }
}