Prettier extension not working even after creating a config file - visual-studio-code

I have been trying to set up Prettier for VS Code globally so that I have all the basic features as well as single quotes. Before installing Prettier I uncommented VS Code's default Prettier configurations in settings.json file but it wasn't working.
Then I installed Prettier and enabled what I needed from VS Code's Settings > Extensions > Prettier tab but it still wasn't working. After that I created .prettierrc.json file and put it right beside where VS Code's settings.json file is, which is in c:\\Users\\Admin\\AppData\\Roaming\\Code\\User\\settings.json. Then I added this path in VS Code's Settings > Extensions > Prettier > Config Path field. And guess what, it is still not working.
What am I doing wrong here?
Here's how my settings.json file looks like:
{
"terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.autoClosingBrackets": "always",
"editor.bracketPairColorization.enabled": true,
"editor.maxTokenizationLineLength": 2000000,
"diffEditor.maxFileSize": 0,
"json.maxItemsComputed": 50000000,
"svelte.enable-ts-plugin": true,
"liveServer.settings.donotShowInfoMsg": true,
"bracketPairColorizer.depreciation-notice": false,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.colorTheme": "Community Material Theme Palenight High Contrast",
"reactSnippets.settings.importReactOnTop": false,
"reactSnippets.settings.prettierEnabled": true,
"html.completion.attributeDefaultValue": "singlequotes",
"html.format.indentInnerHtml": true,
"powermode.enabled": true,
"powermode.combo.counterEnabled": "hide",
"powermode.shake.enabled": false,
"powermode.combo.location": "off",
"powermode.presets": "flames",
// "prettier.jsxBracketSameLine": true,
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
// "prettier.tabWidth": 4,
// "prettier.useTabs": true,
"prettier.bracketSpacing": true,
"prettier.tabWidth": 4,
"prettier.useTabs": true,
"prettier.arrowParens": "avoid",
"prettier.configPath": "c:\\\\Users\\\\Admin\\\\AppData\\\\Roaming\\\\Code\\\\User\\\\.prettierrc.json"
// "prettier.bracketSameLine": true,
// "prettier.arrowParens": "avoid",
// "editor.wordWrapColumn": 120
}
And this is my .prettierrc.json file:
{
"arrowParens": "avoid",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": true,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5",
"useTabs": true,
"vueIndentScriptAndStyle": false,
"parser": "json",
"filepath": "c:\\Users\\Admin\\AppData\\Roaming\\Code\\User\\.prettierrc.json"
}
Any suggestions?

Related

Troubleshooting VS Code 'settings.json'?

Hi guys I'm getting a message from VS Code that says "Unable to sync settings because the content in the file is not valid. Please open the file and correct it."
Why is it saying that and how could I fix it. I'm pasting my settings.json
{
"editor.fontSize": 16,
"editor.fontFamily": "Cascadia Code",
"editor.formatOnSave": true,
"terminal.integrated.fontSize": 16,
"terminal.integrated.fontWeight": 500,
"terminal.integrated.lineHeight": 1.1,
"prettier.tabWidth": 3,
"terminal.integrated.tabs.enableAnimation": false,
"workbench.iconTheme": "material-icon-theme",
"editor.guides.bracketPairs": true,
"editor.bracketPairColorization.independentColorPoolPerBracketType": true,
"workbench.colorCustomizations": {},
"editor.inlineSuggest.enabled": true,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode", // worked!
"editor.defaultFormatter": "vscode.typescript-language-features" //Not worked?
}
"security.workspace.trust.untrustedFiles": "open", // expected comma error, but👈 has a comma. Where is the comma supposed to go?
"[css]": {
"editor.defaultFormatter": "aeschli.vscode-css-formatter"
},
"git.autofetch": true,
"editor.formatOnType": true,
"css.lint.emptyRules": "error",
"html-css-class-completion.enableEmmetSupport": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "AndersEAndersen.html-class-suggestions",
"html.format.templating": true,
"emmet.triggerExpansionOnTab": true,
"workbench.colorTheme": "Brogrammer Plus",
"editor.fontWeight": "normal",
"eslint.codeActionsOnSave.rules": null
"editor.wordWrap" : "wordWrapColumn", // expected comma error, but👈 has a comma. Where is the comma supposed to go?
}
Where do the commas go for:
"editor.wordWrap" : "wordWrapColumn",
&
"security.workspace.trust.untrustedFiles": "open",
They 👆have commas?
You are missing some commas in the file.
Next time, you can verify that your settings.json file is valid by creating a new file in VSCode, setting its language to JSON (Select a language -> JSON) and pasting the content of your settings.json file - VSCode will mark any errors.
You were missing a comma after "eslint.codeActionsOnSave.rules": null and "editor.defaultFormatter": "vscode.typescript-language-features"}.
Here's a working version of your settings.json file, I checked it on my VSCode:
{
"editor.fontSize": 16,
"editor.fontFamily": "Cascadia Code",
"editor.formatOnSave": true,
"terminal.integrated.fontSize": 16,
"terminal.integrated.fontWeight": 500,
"terminal.integrated.lineHeight": 1.1,
"prettier.tabWidth": 3,
"terminal.integrated.tabs.enableAnimation": false,
"workbench.iconTheme": "material-icon-theme",
"editor.guides.bracketPairs": true,
"editor.bracketPairColorization.independentColorPoolPerBracketType": true,
"workbench.colorCustomizations": {},
"editor.inlineSuggest.enabled": true,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"security.workspace.trust.untrustedFiles": "open",
"[css]": {
"editor.defaultFormatter": "aeschli.vscode-css-formatter"
},
"git.autofetch": true,
"editor.formatOnType": true,
"css.lint.emptyRules": "error",
"html-css-class-completion.enableEmmetSupport": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "AndersEAndersen.html-class-suggestions",
"html.format.templating": true,
"emmet.triggerExpansionOnTab": true,
"workbench.colorTheme": "Brogrammer Plus",
"editor.fontWeight": "normal",
"eslint.codeActionsOnSave.rules": null,
"editor.wordWrap": "wordWrapColumn"
}

VS code indentation mode changes from spaces to tab

I am using VS code with a number of extensions, including pylance , editorconfig, prettier, . No matter how many times I change the insertSpaces to true for the different languages or any indentation related settings to spaces mode, at some point (sometimes after a couple of minutes of usage, sometimes after reopening VS code) the tab key starts indenting with tab. I notice this mostly by pressing enter. How can I figure out which extension is doing overriding the spaces indentation mode? I don't want to go through the exercise of testing them one by one. Here's my settings.json that I have pruned down to remove nonrelevant settings.
{
"workbench.statusBar.visible": true,
"editor.insertSpaces": true,
"editor.tabSize": 4,
//"shellformat.useEditorConfig": true,
"editor.fontSize": 10,
"editor.tabCompletion": "on",
"editor.renderWhitespace": "all",
"editor.suggestSelection": "first",
"editor.codeLens": true,
// Generic
"cSpell.enabled": true,
"cSpell.language": "en",
"python.linting.enabled": true,
"python.linting.pylintArgs": [
"--disable=C0303",
"--indent-string=\" \""
],
"python.linting.pylintEnabled": true,
"python.autoComplete.addBrackets": true,
"python.terminal.activateEnvironment": true,
"[python]": {
"editor.defaultFormatter": "ms-python.vscode-pylance",
"editor.tabSize": 4,
"editor.autoClosingBrackets": "always",
"editor.insertSpaces": true,
},
"prettier.useEditorConfig": true,
"prettier.tabWidth": 4,
"python.linting.pylintCategorySeverity.convention": "Hint",
"python.linting.pylintCategorySeverity.refactor": "Warning",
"python.linting.maxNumberOfProblems": 200,
"python.linting.pycodestyleArgs": [
"--max-line-length=100"
],
"python.jediEnabled": false,
"vsintellicode.python.completionsEnabled": true,
"[json]": {
"editor.insertSpaces": true
},
// R
"[r]": {
"editor.autoClosingBrackets": "always",
"editor.defaultFormatter": "Ikuyadeu.r",
"editor.comments.insertSpace": true,
},
"r.interpreter": 0,
"r.linting.enable": true,
"r.lsp.debug": true,
"r.linting.maxLineLength": 105,
"r.editor.tabSize": 2,
"r.linting.noTabs": true,
"editor.detectIndentation": false,
"editor.comments.insertSpace": true,
"prettier.useTabs": false,
"editor.useTabStops": true,
"editor.stickyTabStops": false,
"update.enableWindowsBackgroundUpdates": false,
"breadcrumbs.enabled": true,
// REMOTE connection
"remote.SSH.showLoginTerminal": true,
"remote.SSH.lockfilesInTmp": true,
"window.openFoldersInNewWindow": "on",
"search.showLineNumbers": true,
"r.lsp.diagnostics": false,
"diffEditor.ignoreTrimWhitespace": false,
"workbench.iconTheme": "vscode-icons",
"material-icon-theme.showUpdateMessage": false,
"window.zoomLevel": 3,
"sync.removeExtensions": true,
"sync.syncExtensions": true,
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"python.analysis.extraPaths": [],
"python.terminal.activateEnvInCurrentTerminal": true,
"python.workspaceSymbols.enabled": true,
"python.analysis.completeFunctionParens": true,
"python.languageServer": "None",
"gitlens.currentLine.enabled": false,
"gitlens.hovers.currentLine.over": "line",
"gitlens.statusBar.enabled": false,
"jupyter.askForKernelRestart": false,
"[ignore]": {
"editor.defaultFormatter": "foxundermoon.shell-format"
},
"editor.autoIndent": "brackets",
"formattingToggle.affects": [
"editor.formatOnPaste",
"editor.formatOnSave",
"editor.formatOnType"
],
}

VSCode Prettier Extension vs Prettier CI (Svelte)

For some reason, my format-on-save is giving me different results than when I run the following command:
prettier --write src/pages/file.svelte`
The difference between formats is a new line being inserted with the --write command. Is there anyway to check why this is happening?
.vscode/settings.json
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
.prettierrc
{
"arrowParens": "always",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": true,
"jsxSingleQuote": false,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"singleQuote": false,
"useTabs": true,
"tabWidth": 2,
"printWidth": 120,
"semi": true,
"trailingComma": "all",
"svelteSortOrder": "styles-scripts-markup",
"svelteStrictMode": false,
"svelteBracketNewLine": true,
"svelteAllowShorthand": false,
"plugins": ["./node_modules/prettier-plugin-svelte"]
}
Thanks to #dummdidumm for the answer
Prettier did a breaking change to the library and prettier-plugin-svelte had to work around that in a newer version.
Updating prettier-plugin-svelte to ^2.4.0 fixed the issue.

Formatting .dart files (flutter) in vsCode

I can't seem to set the automatic formatter up.
I have both the Dart and Flutter vsCode extensions.
Here is my settings.json file:
{
"workbench.iconTheme": "material-icon-theme",
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"debug.openDebug": "openOnDebugBreak",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"explorer.confirmDelete": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [80],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false,
"editor.defaultFormatter": "Dart-Code.flutter",
},
"dart.flutterHotReloadOnSave": "always",
"editor.defaultFormatter": "Dart-Code.dart-code",
"editor.formatOnSave": true,
}
I want the formatter to add ; and , at the end of lines and also to add/remove spacing and indenting where needed. Is there anything I'm missing?
"editor.defaultFormatter": "Dart-Code.flutter",
Formatting is done by the Dart extension (since it's not specific to Flutter), so this should be set to Dart-Code.dart-code rather than Dart-Code.flutter.

prettier not working with JavaScript and CSS

I've installed prettier in my code but it is not working in my javascript and CSS. I've also set the default formatter to prettier. but nothing happened. please tell me what's going on
try adding this in settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Here is what I did :
Search for 'Prettier Path' in settings > select 'Edit in settings.json' and add the following config :
{
"editor.minimap.enabled": false,
"editor.fontSize": 12,
"editor.formatOnSave": true,
"editor.tabSize": 2,
"liveServer.settings.donotShowInfoMsg": true,
"editor.wordWrap": "on",
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top",
"[javascript]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true
},
"workbench.colorTheme": "Monokai",
"window.zoomLevel": 0,
"editor.columnSelection": false,
"explorer.compactFolders": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"liveServer.settings.donotVerifyTags": true,
"prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
}
Make sure prettier is installed at the given path : "prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
You can make prettier the default also by uncommenting the code : "editor.defaultFormatter": "esbenp.prettier-vscode"
It has my custom settings of visuals, so review those and then set, for beginners try pasting as-is!