{"id":26485,"date":"2016-05-19T21:01:34","date_gmt":"2016-05-19T13:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26485"},"modified":"2017-11-23T19:29:11","modified_gmt":"2017-11-23T11:29:11","slug":"customizing-visual-studio-code","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/","title":{"rendered":"How to Customize Visual Studio Code"},"content":{"rendered":"<p><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\">Visual Studio Code<\/a>, Microsoft\u2019s new open-source code editor provides developers with many <a href=\"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/\" target=\"_blank\">awesome features<\/a> that significantly <strong>facilitate the process of source code editing<\/strong>. Besides, Visual Studio Code also makes sure users won\u2019t be bored when they work with it, as it allows them to <strong>customize several parts of its appearance<\/strong>, such as colours, fonts, spacing, and text formatting, just like many functionalities, such as <strong>linting<\/strong> and <strong>validaton rules<\/strong>.<\/p>\n<p>In this post, at first we will have a look at <strong>how to change the looks of the Visual Studio Code workspace<\/strong>, then I will show you how to customize the default settings with the help of two <code>JSON<\/code>-formatted configuration files.<\/p>\n<h2>How to Set a Colour Theme on VS Code<\/h2>\n<p>Visual Studio Code allows you to <strong>set a custom colour theme<\/strong> for your editor.<\/p>\n<p>To put a pre-made theme into use, click on the <code>File &gt; Preferences &gt; Color Theme<\/code> menu in the top menu bar. When you hit \u201cEnter\u201d, the Command Palette pops up, and displays a dropdown list of the themes you can choose from.<\/p>\n<p>You can achieve the same effect if you press <code>F1<\/code> to open the Command Palette, and type the <code>Preferences: Color Theme<\/code> command into the input field.<\/p>\n<p>As you roll over the options in the dropdown list, <strong>the appearance of the workspace changes real-time,<\/strong> so you can quickly see which theme fits your needs the best.<\/p>\n<p>I chooe the \u201cHigh Contrast\u201d colour theme, as my eyes are not the best. Here\u2019s what my view looks like.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/high-contrast.jpg\" alt=\"High Contrast Colour Scheme\" width=\"700\" height=\"372\"><\/figure>\n<h2>How to Install a Theme from VS Code Marketplace<\/h2>\n<p>If you don\u2019t like any of the colour themes VS Code offers by default, you can download many others from the <a href=\"https:\/\/marketplace.visualstudio.com\/VSCode\" target=\"_blank\">VS Code Marketplace<\/a>.<\/p>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/vscode\/Themes?sortBy=Downloads\" target=\"_blank\">Here<\/a> you can take a look at the themes the Marketplace currently has. If you want to install a theme from the Marketplace, hit <code>F1<\/code> right inside your VS Code editor in order to open the Command Palette, then type the <code>ext install<\/code> command into the input field, finally choose the <code>Extensions: Install Extension<\/code> option from the list that pops up.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/install-extension.jpg\" alt=\"Install Exstension for VS Code\" width=\"700\" height=\"373\"><\/figure>\n<p>When you click on this option, a new instance of Command Palette pops up. Type the <code>\"ext install theme\"<\/code> command into the new input field, and you will <strong>get a list of all the themes<\/strong> that are available from the VS Code Marketplace.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/install-theme.jpg\" alt=\"Install Theme for VS Code\" width=\"700\" height=\"373\"><\/figure>\n<p>I choose the theme called \u201cMaterial Theme Kit\u201d, and install it by clicking on it. To have the new theme in the Color Theme list, in the same place where the other default themes are, you need to <strong>restart VS Code<\/strong>. After restarting, the new theme appears in the theme list, and you can set it from the Command Palette.<\/p>\n<p>With the new Material Theme, my editor now looks like this:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/material-theme.jpg\" alt=\"Install Material Theme from VS Code Marketplace\" width=\"700\" height=\"372\"><\/figure>\n<p>You can go back to the previous theme (like I did, because I still prefer that theme) or you can play around some more with other themes to see which is the most suitable for you.<\/p>\n<p>If you want, you can also <strong>create your custom theme<\/strong>, and publish it on VS Code Marketplace by using the <a href=\"https:\/\/code.visualstudio.com\/docs\/tools\/vscecli\" target=\"_blank\">vsce<\/a> extension manager tool.<\/p>\n<h2>Change User and Workspace Settings<\/h2>\n<p>VS Code doesn\u2019t only allow you to set a custom theme, but you can also <strong>configure many other settings<\/strong>, such as formatting rules, usage of different features, crash reports, HTTP settings, file associations, linting rules, and more.<\/p>\n<p>You can do this by editing two configuration files, both in <a href=\"https:\/\/www.json.org\/\" target=\"_blank\">JSON<\/a> format. Don\u2019t worry, you don\u2019t need to be a pro, as VS Code offers a pretty straightforward and intuitive way to quickly add your customizations.<\/p>\n<p>At first, let\u2019s see what is the difference between the two configuration files. VS Code has two scopes (<strong>global<\/strong> and <strong>local<\/strong>) for settings, hence the two separate files:<\/p>\n<ol>\n<li>the global <code>settings.json<\/code>, in which the configuration rules are valid for each workspace<\/li>\n<li>the workspace-related <code>.vscode\/settings.json<\/code>, that\u2019s only related to an individual workspace<\/li>\n<\/ol>\n<p>The <strong>global<\/strong> <code>settings.json<\/code> file can be found in the folder where your operating system stores every other app-related configuration files, respectively:<\/p>\n<ul>\n<li>on Windows: <code>%APPDATA%\\Code\\User\\settings.json<\/code><\/li>\n<li>on Linux: <code>$HOME\/.config\/Code\/User\/settings.json<\/code><\/li>\n<li>on Mac: <code>$HOME\/Library\/Application Support\/Code\/User\/settings.json<\/code><\/li>\n<\/ul>\n<p>The <strong>workspace-related<\/strong> <code>settings.json<\/code> file is stored in the folder of your current project. By default, this file doesn\u2019t exist, but as soon as you add a custom Workspace Setting, VS Code creates a <code>.vscode\/settings.json<\/code> file at once, and places custom workspace-specific configurations into it.<\/p>\n<p><strong>So when do you use the <code>settings.json<\/code> files?<\/strong><\/p>\n<p>If you want VS Code to use your custom configuration rules in <em>all<\/em> your projects, put them into the global <code>settings.json<\/code> file.<\/p>\n<p>If you want your settings to only be valid in your <em>current project<\/em>, place them into the workspace-related <code>settings.json<\/code> file.<\/p>\n<p><strong>Workspace settings override the global settings<\/strong>, so be careful.<\/p>\n<p>Global settings are called \u201cUser Settings\u201d in VS Code. Open them either by clicking on the <code>File &gt; Preferences &gt; User Settings<\/code> menu, or by beginning to type the expression \u201cUser Settings\u201d into the Command Palette (open it with F1).<\/p>\n<p>VS Code opens two panes next to each other: the left one contains all the options that are possible to configure, and the right one displays the global <code>settings.json<\/code> file. You need to place your custom configuration rules into this file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/user-settings.jpg\" alt=\"User Settings in VS Code\" width=\"700\" height=\"373\"><\/figure>\n<p>As you can see, you don\u2019t need to do anything else, just copy-paste the settings you want to change from the left side to the right, and add the modified values.<\/p>\n<p>Let\u2019s have a look at a short example (but you can make any other modifications according to your individual needs). I will change the font family, reduce the length of a <code>tab<\/code> from the default four spaces to two, reduce the maximum number of working files from nine to five, and change one of the CSS linting rules concerning duplicate styles from <code>\"ignore\"<\/code> to <code>\"warning\"<\/code>.<\/p>\n<p>After copy-pasting, my global <code>settings.json<\/code> file looks like this:<\/p>\n<pre>\r\n\/\/ Place your settings in this file to overwrite the default settings\r\n{\r\n  \"editor.fontFamily\": \"Courier New\",\r\n  \"editor.tabSize\": 2,\r\n  \"explorer.workingFiles.maxVisible\": 5,\r\n  \"css.lint.duplicateProperties\": \"warning\"\r\n}<\/pre>\n<p>After saving the modified <code>settings.json<\/code> file, the looks of my editor change at once (on the screenshot below only the change of the font family is visible):<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/add-custom-settings.jpg\" alt=\"Custom Configuration in VS Code\" width=\"700\" height=\"373\"><\/figure>\n<p>You can change the Workspace Settings similarly. Now you need to click on the <code>File &gt; Preferences &gt; Workspace Settings<\/code> in the top menu bar to access the workspace-related <code>.vscode\/settings.json<\/code> file.<\/p>\n<p>Workspace Settings have exactly the same configuration options as User Settings, and you can use the same copy-pasting technique. There are only two differences, the scope (local instead of global), and the <code>settings.json<\/code> file into which your custom configurations will be saved.<\/p>","protected":false},"excerpt":{"rendered":"<p>Visual Studio Code, Microsoft\u2019s new open-source code editor provides developers with many awesome features that significantly facilitate the process of source code editing. Besides, Visual Studio Code also makes sure users won\u2019t be bored when they work with it, as it allows them to customize several parts of its appearance, such as colours, fonts, spacing,&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[55,3772,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Customize Visual Studio Code - Hongkiat<\/title>\n<meta name=\"description\" content=\"Visual Studio Code, Microsoft&#039;s new open-source code editor provides developers with many awesome features that significantly facilitate the process of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize Visual Studio Code\" \/>\n<meta property=\"og:description\" content=\"Visual Studio Code, Microsoft&#039;s new open-source code editor provides developers with many awesome features that significantly facilitate the process of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-19T13:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-23T11:29:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/high-contrast.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"How to Customize Visual Studio Code\",\"datePublished\":\"2016-05-19T13:01:34+00:00\",\"dateModified\":\"2017-11-23T11:29:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/\"},\"wordCount\":1035,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/customizing-visual-studio-code\\\/high-contrast.jpg\",\"keywords\":[\"Microsoft\",\"visual studio code\",\"Web Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/\",\"name\":\"How to Customize Visual Studio Code - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/customizing-visual-studio-code\\\/high-contrast.jpg\",\"datePublished\":\"2016-05-19T13:01:34+00:00\",\"dateModified\":\"2017-11-23T11:29:11+00:00\",\"description\":\"Visual Studio Code, Microsoft's new open-source code editor provides developers with many awesome features that significantly facilitate the process of\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/customizing-visual-studio-code\\\/high-contrast.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/customizing-visual-studio-code\\\/high-contrast.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customizing-visual-studio-code\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Customize Visual Studio Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Customize Visual Studio Code - Hongkiat","description":"Visual Studio Code, Microsoft's new open-source code editor provides developers with many awesome features that significantly facilitate the process of","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/","og_locale":"en_US","og_type":"article","og_title":"How to Customize Visual Studio Code","og_description":"Visual Studio Code, Microsoft's new open-source code editor provides developers with many awesome features that significantly facilitate the process of","og_url":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-05-19T13:01:34+00:00","article_modified_time":"2017-11-23T11:29:11+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/high-contrast.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"How to Customize Visual Studio Code","datePublished":"2016-05-19T13:01:34+00:00","dateModified":"2017-11-23T11:29:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/"},"wordCount":1035,"commentCount":8,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/high-contrast.jpg","keywords":["Microsoft","visual studio code","Web Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/","url":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/","name":"How to Customize Visual Studio Code - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/high-contrast.jpg","datePublished":"2016-05-19T13:01:34+00:00","dateModified":"2017-11-23T11:29:11+00:00","description":"Visual Studio Code, Microsoft's new open-source code editor provides developers with many awesome features that significantly facilitate the process of","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/high-contrast.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/customizing-visual-studio-code\/high-contrast.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Customize Visual Studio Code"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Tb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26485"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26485\/revisions"}],"predecessor-version":[{"id":41930,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26485\/revisions\/41930"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26485"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}