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.
Related
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"
}
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"
],
}
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?
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.
I try to change line break with prettier, but vs code ignore my settings for this...
I try to put line-length: 140 but nothing happened.
I try this, but without success
// edit your tslint.json
"max-line-length": [
true,
{
"limit": 140,
"ignore-pattern": "^import |^export {(.*?)}"
}
],
I use
prettier: [3.18.0]
VS code: 1.41.1
here are my settings
{
"workbench.editor.highlightModifiedTabs": true,
"files.trimFinalNewlines": true,
"window.menuBarVisibility": "default",
"workbench.activityBar.visible": true,
"files.autoSave": "off",
"window.zoomLevel": 0,
"editor.rulers": [
140
],
"editor.wordWrapColumn": 140,
"[markdown]": {
"editor.wordWrap": "wordWrapColumn",
"editor.quickSuggestions": false
},
"diffEditor.ignoreTrimWhitespace": true,
"vsicons.projectDetection.autoReload": true,
"files.eol": "\n",
"editor.formatOnSave": true,
"editor.tabSize": 2,
"javascript.referencesCodeLens.enabled": true,
"cSpell.userWords": [
"dropdown",
"toastr"
],
"typescript.updateImportsOnFileMove.enabled": "always",
"terminal.integrated.rendererType": "dom",
"html.format.wrapLineLength": 140,
"editor.wordWrap": "bounded",
"prettier.jsxBracketSameLine": true,
"html.format.wrapAttributes": "preserve-aligned",
"prettier.printWidth": 140
}
Is there any another way to get this to work, because prettier always format my components or html file in a strange way...
let's say,
this
languageLocale: [null, [Validators.minLength(1), Validators.maxLength(255)]],
to this
languageLocale: [
null,
[Validators.minLength(1), Validators.maxLength(255)]
],
or html
<mat-form-field>
<input class="disabledInput" formControlName="id" matInput/>
</mat-form-field>
to this
<mat-form-field>
<input
class="disabledInput"
formControlName="id"
matInput
/>
</mat-form-field>
And this is terrible to read if we have multiple input fields
Need to put config to package.json
Refered to here https://prettier.io/docs/en/configuration.html
"prettier":{
"arrowParens": "avoid",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 140,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "none",
"useTabs": false,
"vueIndentScriptAndStyle": false,
"rangeStart": 0
}