highlight values ​of variables and functions in VScode like in Atom [duplicate] - visual-studio-code

Question

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

Answer 1

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