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

Question

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