prettier not working with JavaScript and CSS - visual-studio-code

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!

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

Prettier extension not working even after creating a config file

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?

In VS Code this line /** #format */ always appears at the top of my .js files on save

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.

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.

How to Change VS-Code Tab setting from "Change Focus" to "Add Spaces"?

After latest VS-Code update, tab feature changes to "focus change" instead of adding space or identation. i try change every setting in setting.json but it not wotrking. it is really annoying as i am use to it.
Any Help would be appreciated.
{
"workbench.iconTheme": "material-icon-theme",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"workbench.startupEditor": "newUntitledFile",
"window.zoomLevel": 0,
"indenticator.hover.peekBack": 0,
"indenticator.hover.peekForward": 1,
"indenticator.inner.hover.peekBack": 0,
"indenticator.inner.hover.peekForward": 1,
"indenticator.inner.showHighlight": true,
"html.format.endWithNewline": true,
"javascript.implicitProjectConfig.experimentalDecorators": true,
"prettier.printWidth": 110,
"html.format.indentHandlebars": true,
"html.format.indentInnerHtml": true,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Firefox Developer Edition\\firefox.exe",
"prettier.jsxBracketSameLine": true,
"prettier.trailingComma": "es5",
"prettier.useTabs": true,
"angular2-switcher.openSideBySide": true,
"editor.foldingStrategy": "indentation",
"editor.mouseWheelZoom": true,
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[less]": {
"editor.defaultFormatter": "michelemelluso.code-beautifier"
},
"workbench.statusBar.visible": true,
"workbench.activityBar.visible": true,
"editor.renderControlCharacters": false,
"editor.showFoldingControls": "always",
"editor.smoothScrolling": true,
"breadcrumbs.enabled": false,
"terminal.integrated.rendererType": "dom",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
}
This is my settings file. Extensions settings are same as before.
In the command palette, use Toggle Tab Key Moves Focus (Ctrl + M by default as of 1.36.0) to switch between these modes.
While backing up my VS-Code settings on cloud i found (in C:\Users\[username]\AppData\Roaming\Code\User > keybindings.json) that tab was assigned as -tab labeled to move-focus. which did'nt appear on UI settings on Vs-Code.
i dont know where it came from (after 2nd Last VS-Code Update):
{
"key": "tab",
"command": "-tab",
"when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus"
}
i just removed it . And it Works same as DEFAULT.
Sharing this as answer if anyone faces this problem from nowhere.
Thank You. :)