像在 Atom 中一样在 VScode 中突出显示变量和函数的值

Question

我希望在 VScode 编辑器中实现此效果

ATOM 中的此效果

Answer 1

你的意思是这样吗？

在项目根目录下创建一个文件夹调用 .vscode 在里面添加一个文件调用 settings.json 并将其粘贴到 yow 文件中

{
  "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：您可能需要删除它们字体，否则它在您的计算机中看起来会很难看，除非您安装了它们