VS Code Removing Spaces Inside Parenthesis - visual-studio-code

In VS Code, if I type:
function fname( $var ) {
}
It gets converted to:
function fname($var) {
}
Is there a setting that will work for ALL languages, like:
"format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParentheses": false
Here are my relevant VS Code settings:
{
"[js]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[php]": {
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
"format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false
"editor.insertSpaceBeforeFunctionParenthesis": true
},
"editor.detectIndentation": false,
"editor.find.loop": false,
"editor.formatOnSave": true,
"editor.insertSpaces": false,
"editor.minimap.enabled": false,
"editor.renderWhitespace": "none",
"editor.tabSize": 4,
"editor.trimAutoWhitespace": true
}
Please note: I know if I remove "editor.formatOnSave": true, it'll stop, but I don't want to do that since I'll lose all my other formatting. I need a solution that works with "editor.formatOnSave": true.

Related

VS Code adding an extra "}" on save of a liquid file

In VS Code if I save my liquid file every time it adds an extra "}" on the end. I have disabled all other extensions.
Basically, my code looks like this in the end:
{% schema %}
{}
{% endschema %}}}}}}}}}
My settings are as follows for user:
{
"terminal.integrated.env.osx": {
"FIG_NEW_SESSION": "1"
},
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.accessibilitySupport": "off",
"[liquid]": {
"editor.bracketPairColorization.enabled": true,
"editor.defaultFormatter": "sissel.shopify-liquid",
"editor.formatOnSave": true,
"liquid.format.enable": true
},
"liquid.format.enable": true,
"editor.formatOnPaste": true,
"explorer.confirmDelete": false,
"files.associations": {
"*.liquid": "liquid"
},
"workbench.colorTheme": "Dracula Soft"
}
and workspace:
{
"liquid.format.enable": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.accessibilitySupport": "off",
"[liquid]": {
"editor.bracketPairColorization.enabled": true,
"editor.defaultFormatter": "sissel.shopify-liquid",
"editor.formatOnSave": true,
"liquid.format.enable": true
},
"editor.formatOnPaste": true,
"explorer.confirmDelete": false,
"files.associations": {
"*.liquid": "liquid"
}
}
In settings.json file, include the following:
"[liquid]": {
"editor.autoClosingBrackets": "never"
}
This issue was addressed in the latest release of the extension. See https://github.com/panoply/vscode-liquid/issues/120

highlight values ​of variables and functions in VScode like in Atom [duplicate]

This question already has answers here:
Does anybody know the name of this setting inside of VS Code Insiders? For grayed out parameter and variable annotations
(2 answers)
Closed 12 months ago.
I want this effect in my VScode editor
this effect in ATOM
you mean like this ?
create a folder call .vscode at the root of your project inside add a file call settings.json and paste this in yow file
{
"editor.suggestSelection": "first",
// Configures font ligatures or font features. Can be either a boolean to enable/disable ligatures or a string for the value of the CSS 'font-feature-settings' property.
"editor.fontLigatures": false,
// Controls the font size in pixels.
// Controls the font weight. Accepts "normal" and "bold" keywords or numbers between 1 and 1000.
"editor.fontWeight": "300",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[css]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"window.zoomLevel": 0,
"git.confirmSync": false,
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[handlebars]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.fontSize": 16,
"editor.fontFamily": "'Operator Mono',Menlo, Monaco, 'Courier New', monospace",
"editor.autoClosingBrackets": "always",
"editor.autoClosingDelete": "always",
"editor.autoClosingOvertype": "always",
"editor.autoClosingQuotes": "always",
"editor.bracketPairColorization.enabled": true,
"editor.codeLensFontFamily": "'SF Pro'",
"editor.defaultFormatter": "vscode.typescript-language-features",
"editor.definitionLinkOpensInPeek": true,
"editor.gotoLocation.alternativeDefinitionCommand": "editor.action.goToImplementation",
"editor.gotoLocation.alternativeReferenceCommand": "editor.action.goToImplementation",
"editor.gotoLocation.alternativeTypeDefinitionCommand": "editor.action.peekTypeDefinition",
// Controls whether bracket pair guides are enabled or not.
// - true: Enables bracket pair guides.
// - active: Enables bracket pair guides only for the active bracket pair.
// - false: Disables bracket pair guides.
"editor.guides.bracketPairs": true,
// Defines the bracket symbols that increase or decrease the indentation.
// Defines the bracket pairs that are colorized by their nesting level if bracket pair colorization is enabled.
"editor.language.colorizedBracketPairs": true,
"editor.hideCursorInOverviewRuler": true,
"editor.hover.delay": 500,
"editor.inlayHints.fontFamily": "'Operator Mono'",
"editor.linkedEditing": true,
"editor.parameterHints.cycle": true,
"editor.renderControlCharacters": true,
"editor.renderLineHighlightOnlyWhenFocus": true,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features",
"editor.autoClosingBrackets": "always",
"editor.acceptSuggestionOnEnter": "on",
},
"javascript.suggestionActions.enabled": true,
"javascript.inlayHints.parameterNames": "all",
"javascript.inlayHints.variableTypes.enabled": true,
"javascript.inlayHints.parameterTypes.enabled": true,
"javascript.inlayHints.functionLikeReturnTypes.enabled": true,
"javascript.autoClosingTags": true,
"javascript.format.enable": true,
"javascript.format.insertSpaceAfterCommaDelimiter": true,
"javascript.format.insertSpaceAfterConstructor": true,
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
"javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
"javascript.format.insertSpaceAfterSemicolonInForStatements": true,
"javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
"javascript.format.placeOpenBraceOnNewLineForFunctions": false,
"javascript.format.semicolons": "insert",
"javascript.format.quoteStyle": "double",
"javascript.inlayHints.enumMemberValues.enabled": true,
"javascript.inlayHints.parameterNames.enabled": "all",
"javascript.inlayHints.propertyDeclarationTypes.enabled": true,
"javascript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true,
"javascript.preferences.importModuleSpecifier": "shortest",
"javascript.preferences.importModuleSpecifierEnding": "auto",
"javascript.preferences.jsxAttributeCompletionStyle": "auto",
"javascript.preferences.quoteStyle": "double",
"javascript.preferences.useAliasesForRenames": true,
"javascript.referencesCodeLens.enabled": true,
"javascript.suggest.completeJSDocs": true,
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[json]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true,
"fixAll.eslint": true,
"addMissingImports": true
},
"editor.showUnused": true
}
PS: you might want to remove them fonts or it will look ugly in your computer unless of course you have them install

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.

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!