Prettier in VS Code uses the wrong indentation, even after I changed all the places I can think of to a width of "4".
Here are my file contents (some are maybe not necessary, but I added them while trying to fix it):
c:\Users\jp\Documents\Repositories\Game\Client\.prettierrc.js
module.exports = {
semi: true,
trailingComma: "none",
singleQuote: false,
printWidth: 120,
tabWidth: 4,
endOfLine: "auto",
trailingComma: "none"
};
c:\Users\jp\Documents\Repositories\Game\Client\.editorconfig
indent_size = 4
c:\Users\jp\Documents\Repositories\Game\Client\.eslintrc.js
module.exports = {
parser: "@typescript-eslint/parser", // Specifies the ESLint parser
parserOptions: {
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
sourceType: "module", // Allows for the use of imports
ecmaFeatures: {
jsx: true // Allows for the parsing of JSX
}
},
settings: {
react: {
version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
}
},
extends: [
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
"plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
"plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
"prettier"
],
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
"no-var": "error", // preference for let and const only
"prefer-const": "error",
"react/react-in-jsx-scope": "off",
"@typescript-eslint/no-empty-function": "off",
"react/prop-types": "off",
"prettier/prettier": [
"warn",
{
semi: true,
trailingComma: "none",
singleQuote: false,
printWidth: 120,
tabWidth: 4,
endOfLine: "auto",
trailingComma: "none"
}
]
}
};
c:\Users\jp\Documents\Repositories\Game\Client\.vscode\settings.json
{
"editor.formatOnSave": true,
"editor.formatOnType": true,
"prettier.tabWidth": 4,
"editor.tabSize": 4,
"jestrunner.jestCommand": "npm run test -- --watchAll=false"
}
My VS Code configuration is set to "4,", and in the bottom bar in VS Code it's set to "4". I also set "detect indendation" to false.
Here is what the Prettier extension output says when I format the document:
["INFO" - 17:18:30] Formatting file:///c%3A/Users/jp/Documents/Repositories/Game/Client/src/App.tsx
["INFO" - 17:18:30] Using config file at 'c:\Users\jp\Documents\Repositories\Game\Client\.prettierrc.js'
["INFO" - 17:18:30] Using ignore file (if present) at c:\Users\jp\Documents\Repositories\Game\Client\.prettierignore
["INFO" - 17:18:30] File Info:
{
"ignored": false,
"inferredParser": "typescript"
}
["INFO" - 17:18:30] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 17:18:30] Prettier Options:
{
"filepath": "c:\\Users\\jp\\Documents\\Repositories\\Game\\Client\\src\\App.tsx",
"parser": "typescript",
"semi": true,
"trailingComma": "none",
"singleQuote": false,
"printWidth": 120,
"tabWidth": 3,
"endOfLine": "auto"
}
["INFO" - 17:18:30] Formatting completed in 0.027ms.
It even says it found the right configuration file, yet uses the wrong indentation. I restarted VS Code while making the changes to make sure nothing was cached. In the parent path no .editorconfig is present.
I just don't have any idea where Prettier may take the wrong indentation from...
Edit: When I use the "Quick Fix" with "Fix all prettier/prettier problems", it uses the correct indentation. Formatting on save or Using "Format document" uses the wrong one. Output of the extension output window is the same.
