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.
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 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'm a little confused as to why this line :
/** #format */
Always appears at the top of my .js files when i save. I have prettier globally installed as well as the prettier extension installed in vs code, I have it configured to auto format on save as well. I can't find any info on how to make that line go away or what caused it to start showing up in the first place.
Here is what my settings.json file looks like in vs code:
{
"editor.tabSize": 2,
"editor.insertSpaces": true,
"files.trimTrailingWhitespace": true,
"materialTheme.fixIconsRunning": false,
"workbench.colorTheme": "Winter is Coming (Dark Blue)",
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"workbench.iconTheme": "material-icon-theme",
"files.autoSave": "off",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[jsx]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[tsx]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[prisma]": {
"editor.defaultFormatter": "Prisma.prisma",
"editor.formatOnSave": true
},
"diffEditor.ignoreTrimWhitespace": true,
"liveshare.featureSet": "insiders",
"material-icon-theme.activeIconPack": "react",
"material-icon-theme.files.associations": {},
"workbench.startupEditor": "newUntitledFile",
"editor.snippetSuggestions": "bottom",
// "editor.quickSuggestions": null
"editor.quickSuggestionsDelay": 500,
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"mssql.connections": [
{
"server": "{{put-server-name-here}}",
"database": "{{put-database-name-here}}",
"user": "{{put-username-here}}",
"password": "{{put-password-here}}"
}
],
"window.zoomLevel": -2,
"cSpell.userWords": [
"Signup",
"formik"
],
"prettier.insertPragma": true,
"settingsSync.ignoredExtensions": [
"esbenp.prettier-vscode"
]
}
For anyone running into the same issue, in the settings.json file, I changed this:
"prettier.insertPragma": true,
to false
"prettier.insertPragma": false,
that resolves the issue.
My settings.json file shows 3 problems with my settings but I can't find it. My settings is below -
{
"telemetry.enableTelemetry": false,
"window.zoomLevel": 1,
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Community Material Theme Ocean",
"explorer.confirmDelete": false,
"javascript.validate.enable": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.js": "javascriptreact"
},
"editor.formatOnSave": true,
"git.enableSmartCommit": true,
"liveServer.settings.https": {
"enable": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
so I just removed this part
"liveServer.settings.https": {
"enable": true
},
and now no problem is showing. but don't know why
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!