{"id":1543,"date":"2019-07-17T22:00:00","date_gmt":"2019-07-17T20:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/pragmatic-tip-22-use-a-single-editor-well\/"},"modified":"2025-11-28T13:31:44","modified_gmt":"2025-11-28T12:31:44","slug":"pragmatic-tip-22-use-a-single-editor-well","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/","title":{"rendered":"Pragmatic Tip #22 : Use A Single Editor Well"},"content":{"rendered":"<h1 id=\"getting-started\">Getting Started<\/h1>\n<pre><code class=\"language-bash\">choco install vscode\n<\/code><\/pre>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>K<\/kbd>, <kbd>Control<\/kbd> + <kbd>R<\/kbd>: Help: Keyboard Shortcuts Reference (pdf) <\/div>\n<p><\/p>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>P<\/kbd>: Show All Commands, and follow with: <\/div>\n<ul>\n<li><a href=\"https:\/\/code.visualstudio.com\/docs\"><code>Help: Documentation<\/code><\/a><\/li>\n<li><code>Help: Interactive Playground<\/code>: Learn about refactoring, formatting, snippets and more<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/introvideos\"><code>Help: Introductory Videos<\/code><\/a><\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/tips-and-tricks\"><code>Help: Tips and Tricks<\/code><\/a><\/li>\n<\/ul>\n<h1 id=\"configuration\">Configuration<\/h1>\n<h2 id=\"locations\">Locations<\/h2>\n<p>VSCode stores your configuration in <code>%APPDATA%CodeUser<\/code>:<\/p>\n<ul>\n<li><code>settings.json<\/code><\/li>\n<li><code>keybindings.json<\/code><\/li>\n<li><code>snippets<\/code><\/li>\n<\/ul>\n<p>Per workspace settings are stored in a <code>.vscode<\/code> folder:<\/p>\n<ul>\n<li><code>tasks.json<\/code>: Task Runner<\/li>\n<li><code>launch.json<\/code>: Debugger<\/li>\n<\/ul>\n<p><!-- TODO: Launch Settings --><!-- \"launch\": { \"configurations\": [], \"compounds\": [] }, --><\/p>\n<p>Extensions are stored in <code>%USERPROFILE%.vscodeextensions<\/code>.<\/p>\n<p>I\u2019ve got my own dotfiles that include settings but VSCode got you covered with a plugin that saves it as a <a href=\"https:\/\/gist.github.com\/Laoujin\/eb201494af87c818a3756206352d69ba\">Github GIST (example)<\/a>. <a href=\"https:\/\/github.com\/shanalikhan\/code-settings-sync\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/shanalikhan\/code-settings-sync.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/shanalikhan\/code-settings-sync\">shanalikhan\/code-settings-sync<\/a>: Synchronize your Settings using Github GIST<\/p>\n<h2 id=\"making-it-your-own\">Making it your own<\/h2>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>P<\/kbd>: Show All Commands <\/div>\n<ul>\n<li><strong>Preferences: Open Settings (UI)<\/strong>: A pretty UI for common settings (Control ,)<\/li>\n<li><strong>Preferences: Open Settings (JSON)<\/strong>: See all default settings and all your overrides (with intellisense!)<\/li>\n<li><strong>Preferences: Open Keyboard Shortcuts<\/strong>: Searchable list with very convenient UI to assign shortcuts (Control K, Control S)<\/li>\n<li><strong>Preferences: Open Keyboard Shortcuts (JSON)<\/strong>: See all possible shortcuts (with comments) and your overrides\n<ul>\n<li><a href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/keybindings\">Official Docs: Keybindings<\/a>: Solid article, gets to advanced customization pretty rapidly<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"settingsjson\">Settings.json<\/h4>\n<pre><code class=\"language-javascript\">{\n    \/\/ Your settings\n    \"files.encoding\": \"utf8\",\n    \"[ahk]\": {\n        \/\/ Your overrides for Authotkey\n        \"files.encoding\": \"utf8bom\"\n    },\n}\n<\/code><\/pre>\n<h1 id=\"starting-vscode\">Starting VSCode<\/h1>\n<p>List of the <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/command-line#_core-cli-options\">Core CLI options<\/a><\/p>\n<ul>\n<li><code>-n<\/code> or <code>--new-window<\/code>: Opens new instance instead of restoring previous session<\/li>\n<li><code>--add &lt;dir&gt;<\/code>: Add folder(s) to the last active window for a multi-root workspace<\/li>\n<li><code>-d<\/code> or <code>--diff<\/code>: Open diff view with two file paths as arguments<\/li>\n<li><code>-g file:line:column<\/code>: Open file optionally at specific line and column<\/li>\n<li><code>--install-extension<\/code>: Also uninstall, disable and list. <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/command-line#_working-with-extensions\">Whole list<\/a>.<\/li>\n<\/ul>\n<h4 id=\"start-from-powershell\">Start from PowerShell<\/h4>\n<pre><code class=\"language-powershell\">$ide = \"C:Users$($env:username)AppDataLocalProgramsMicrosoft VS CodebinCode.cmd\"\nfunction Start-VSCode {\n\tif ($args.length -eq 0 -or $null -eq $args[0]) {\n\t\t&amp; $ide --new-window\n\t\treturn\n\t}\n\n\t$folder = Resolve-Path $args\n\t&amp; \"$ide\" --new-window \"$folder\"\n}\nSet-Alias cde Start-VSCode\n<\/code><\/pre>\n<h4 id=\"start-from-windows-explorer-context-menu\">Start from Windows Explorer Context Menu<\/h4>\n<p>Available during installation but <a href=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-assets\/vscode-contextmenu.reg\">here is the reg file<\/a> if you want to add it later on (check the path inside the reg).<\/p>\n<h4 id=\"start-from-vscode\">Start from VSCode<\/h4>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>K<\/kbd>, <kbd>O<\/kbd>: Open active file in new instance <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>K<\/kbd>, <kbd>R<\/kbd>: Reveal active file in Windows explorer <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>K<\/kbd>, <kbd>P<\/kbd>: Copy path of active file <\/div>\n<h4 id=\"start-from-git\">Start from git<\/h4>\n<pre><code class=\"language-ini\"># ~\/.gitconfig\n[core]\n    editor = code --wait\n\n[merge]\n\ttool = vsc\n[mergetool \"vsc\"]\n\tcmd = code --wait $MERGED\n\n[diff]\n    tool = vsc\n[difftool \"vsc\"]\n    cmd = code --wait --diff $LOCAL $REMOTE\n<\/code><\/pre>\n<h1 id=\"layout\">Layout<\/h1>\n<p><img decoding=\"async\" src=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/vscode-window-layout.png\" alt=\"alt\" class=\"img-responsive\" \/><\/p>\n<div style=\"display: block\"><kbd>F11<\/kbd>: View: Toggle Full Screen <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Q<\/kbd>: View: Quick Open View <\/div>\n<p><\/p>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>K<\/kbd>, <kbd>Z<\/kbd>: View: Toggle Zen Mode (2xESC to exit) <\/div>\n<p>Some Zen Mode settings:<\/p>\n<pre><code class=\"language-javascript\">\/\/ settings.json\n{\n    \"zenMode.hideLineNumbers\": false,\n    \"zenMode.hideActivityBar\": false,\n    \"zenMode.hideStatusBar\": false,\n    \"zenMode.hideTabs\": true,\n}\n<\/code><\/pre>\n<h2 id=\"activity-bar\">Activity Bar<\/h2>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>E<\/kbd>: Explorer <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>G<\/kbd>: Source Control <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>D<\/kbd>: Debug <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>X<\/kbd>: Extensions <\/div>\n<p> Custom shortcut:<\/p>\n<ul>\n<li><code>Control K, Control A<\/code>: View: Toggle Activity Bar Visibility<\/li>\n<\/ul>\n<h2 id=\"side-bar\">Side Bar<\/h2>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>B<\/kbd>: View: Toggle Side Bar Visibility <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>\u00e0<\/kbd>: View: Focus into Side Bar <\/div>\n<pre><code class=\"language-javascript\">{\n    \/\/ By default VSCode tracks the current file in the Explorer.\n    \"explorer.autoReveal\": false,\n\n    \/\/ Drag &amp; Drop\n    \"explorer.enableDragAndDrop\": true,\n    \"explorer.confirmDragAndDrop\": false,\n    \"explorer.confirmDelete\": false,\n\n    \/\/ Hide from Explorer\n    \"files.exclude\": {\n        \"node_modules\/**\": true,\n        \".sass-cache\": true,\n    },\n}\n<\/code><\/pre>\n<p>Custom shortcuts:<\/p>\n<ul>\n<li><code>Shift Alt L<\/code>: File: Reveal Active File in Side Bar<\/li>\n<li><code>Control K, Control N<\/code>: View: Next Side Bar View<\/li>\n<li><code>Control K, Control B<\/code>: View: Previous Side Bar View<\/li>\n<li><code>Control E, Control F<\/code>: File: Collapse Folders in Explorer<\/li>\n<\/ul>\n<h2 id=\"panels\">Panels<\/h2>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>J<\/kbd>: View: Toggle Panel <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>Y<\/kbd>: View: Debug Console <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>\u00f9<\/kbd>: View: Toggle Integrated Terminal <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>U<\/kbd>: View: Toggle Output <\/div>\n<p> Custom shortcuts:<\/p>\n<ul>\n<li>Remapped: <code>Control Alt \u00f9<\/code>: View: Toggle Integrated Terminal (Conflicted with Cmder)<\/li>\n<li>View: Next Panel View<\/li>\n<\/ul>\n<h1 id=\"search\">Search<\/h1>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>F<\/kbd>: Find (Navigate with F3) <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>F<\/kbd>: View: Show Search (Navigate with F4) <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>H<\/kbd>: Replace <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>H<\/kbd>: Search: Replace in Files <\/div>\n<p> Once searching:<\/p>\n<ul>\n<li><code>Alt Enter<\/code>: Select all matches<\/li>\n<li><code>Control Alt Enter<\/code>: Replace all matches<\/li>\n<li><code>Control Shift 1<\/code>: Replace one<\/li>\n<li><code>Alt C<\/code>: Toggle Case Sensitive<\/li>\n<li><code>Alt R<\/code>: Toggle Regex<\/li>\n<li><code>Alt W<\/code>: Toggle Full Word<\/li>\n<\/ul>\n<p>Toggle files to include\/exclude (<code>Control Shift J<\/code>)<\/p>\n<ul>\n<li>Use <code>\/<\/code> slashes<\/li>\n<li>Separate paths with <code>,<\/code><\/li>\n<li>Prefix with <code>!<\/code> to negate<\/li>\n<li>Globbing\n<ul>\n<li><code>*<\/code>: Match x characters in path segment<\/li>\n<li><code>**<\/code>: Match 0..x path segments<\/li>\n<li><code>?<\/code>: Match one character<\/li>\n<li><code>{**\/*.css,**\/*.scss}<\/code>: Group conditions<\/li>\n<li><code>[0-9a-z]<\/code>: Match range of characters<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"settingsjson-1\">settings.json<\/h4>\n<pre><code class=\"language-javascript\">{\n    \"search.exclude\": {\n        \"**\/node_modules\": true,\n        \"**\/dist\": true,\n    },\n    \"search.location\": \"panel\", \/\/ or: sidebar\n    \"search.showLineNumbers\": true,\n    \/\/ Search case-insensitively if the pattern is all lowercase, otherwise, search case-sensitively.\n    \"search.smartCase\": false,\n    \"search.useGlobalIgnoreFiles\": true, \/\/ Use global .gitignore\n    \"search.usePCRE2\": true, \/\/ Use the PCRE2 regex engine (as supported by JavaScript)\n                             \/\/ Required for backreferences and lookarounds\n\n    \"editor.find.seedSearchStringFromSelection\": false,\n    \"editor.find.addExtraSpaceOnTop\": false,\n}\n<\/code><\/pre>\n<p>Custom shortcuts:<\/p>\n<ul>\n<li>Search: Collapse All<\/li>\n<li>Search: Toggle Search View Position (panel \/ sidebar)<\/li>\n<\/ul>\n<h1 id=\"terminal\">Terminal<\/h1>\n<p>I\u2019m still using <a href=\"https:\/\/cmder.net\/\">Cmder<\/a> for all my CLI needs so I haven\u2019t really configured the Terminal much. There is <a href=\"https:\/\/www.growingwiththeweb.com\/2017\/03\/mastering-vscodes-terminal.html\">this<\/a> pretty blog post for more Terminal info.<\/p>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>\u00f9<\/kbd>: View: Toggle Integrated Terminal <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>\u00f9<\/kbd>: Terminal: Create New Integrated Terminal <\/div>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>5<\/kbd>: Terminal: Split Terminal <\/div>\n<h4 id=\"integrate-cmder-into-vscode\">Integrate Cmder into VSCode<\/h4>\n<pre><code class=\"language-javascript\">\/\/ settings.json\n{\n    \"terminal.integrated.shell.windows\": \"cmd.exe\",\n    \"terminal.integrated.shellArgs.windows\": [\n        \"\/K\",\n        \"C:\\Cmder\\vendor\\init.bat\"\n    ],\n}\n<\/code><\/pre>\n<h1 id=\"tasks\">Tasks<\/h1>\n<p>Stored in <code>.vscodetasks.json<\/code> in your workspace path.<\/p>\n<p><code>Control+Shift+P<\/code> &gt; Tasks: Configure Task &gt; Create tasks.json file from template<\/p>\n<pre><code class=\"language-javascript\">{\n    \"tasks\": [{\n        \"label\": \"Compile Markdown\",\n        \"type\": \"shell\",\n        \"command\": \"markdown-it sample.md -o sample.html\",\n        \"group\": \"build\"\n    }]\n}\n<\/code><\/pre>\n<p>There are templates for: .NET Core, MSBuild and Maven.<br \/> And of course there are extensions for <a href=\"https:\/\/github.com\/nickdodd79\/vscode-gulptasks\">Gulp<\/a> , <a href=\"https:\/\/github.com\/cake-build\/cake-vscode\">Cake<\/a> , <a href=\"https:\/\/github.com\/microsoft\/vscode-cmake-tools\">CMake<\/a> , <a href=\"https:\/\/github.com\/lkytal\/quickTask\">etc<\/a><\/p>\n<h1 id=\"extensions\">Extensions<\/h1>\n<p>The main reason for the migration was the <a href=\"https:\/\/marketplace.visualstudio.com\/vscode\">VSCode Marketplace<\/a>. Sublime still can\u2019t handle the React Fragment <code>&lt;&gt;&lt;\/&gt;<\/code> syntax. And this one project I used Vue on, well\u2026 the VSCode plugins were just superb while ST3 failed me again.<\/p>\n<p>Usually all you have to do is open a new file extension and VSCode will jump to the opportunity to have you install yet a few more extensions \ud83d\ude03<\/p>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>Shift<\/kbd> + <kbd>X<\/kbd>: Search Extensions in Marketplace <\/div>\n<p>The builtin search functionality is pretty slick. You will usually be able to find what you want. Type a <code>@<\/code> to get a list of filters on category, enabled\/disabled, recommended, to sort etc.<\/p>\n<p>For example, <a href=\"https:\/\/github.com\/vuejs\/vetur\">Vetur<\/a> only comes up at #7 when searching for \u201cVue\u201d but soars the skies when searching for <code>vue @sort:installs<\/code>.<\/p>\n<p>Find your newly installed extension with <code>Control Shift P<\/code>. All its settings now show up in your <code>defaultSettings.json<\/code>. A \u2699 (Gears) appears in the Side Bar after installation below the \u2b50 (Stars) of the installed extension. Click to configure it \ud83d\ude42<\/p>\n<h4 id=\"themes\">Themes<\/h4>\n<div style=\"display: block\"><kbd>Control<\/kbd> + <kbd>K<\/kbd>, <kbd>Control<\/kbd> + <kbd>T<\/kbd>: Preferences: Color Theme (Search: @category:themes) <\/div>\n<p>Also: <code>Preferences: File Icon Theme<\/code><\/p>\n<h4 id=\"some-projects\">Some Projects<\/h4>\n<p>(that don\u2019t show up pretty instantaneously when opening a file)<\/p>\n<p><a href=\"https:\/\/github.com\/ritwickdey\/vscode-live-server\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/ritwickdey\/vscode-live-server.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/ritwickdey\/vscode-live-server\">ritwickdey\/vscode-live-server<\/a>: Launch a development local Server with live reload feature for static &amp; dynamic pages. <a href=\"https:\/\/github.com\/Huachao\/vscode-restclient\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/Huachao\/vscode-restclient.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/Huachao\/vscode-restclient\">Huachao\/vscode-restclient<\/a>: REST Client<\/p>\n<h4 id=\"for-the-web\">For The Web<\/h4>\n<p><a href=\"https:\/\/github.com\/ChristianKohler\/PathIntellisense\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/ChristianKohler\/PathIntellisense.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/ChristianKohler\/PathIntellisense\">ChristianKohler\/PathIntellisense<\/a>: Autocompletes filenames <a href=\"https:\/\/github.com\/ChristianKohler\/NpmIntellisense\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/ChristianKohler\/NpmIntellisense.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/ChristianKohler\/NpmIntellisense\">ChristianKohler\/NpmIntellisense<\/a>: Autocomplete npm modules in import statements <a href=\"https:\/\/github.com\/wix\/vscode-import-cost\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/wix\/vscode-import-cost.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/wix\/vscode-import-cost\">wix\/vscode-import-cost<\/a>: Display the import size of the package you are importing inside the code editor <a href=\"https:\/\/github.com\/lannonbr\/vscode-js-annotations\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/lannonbr\/vscode-js-annotations.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/lannonbr\/vscode-js-annotations\">lannonbr\/vscode-js-annotations<\/a>: Add parameter name annotations to function calls <a href=\"https:\/\/github.com\/britesnow\/vscode-toggle-quotes\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/britesnow\/vscode-toggle-quotes.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/britesnow\/vscode-toggle-quotes\">britesnow\/vscode-toggle-quotes<\/a>: Simple cycling quotes toggler<\/p>\n<p><a href=\"https:\/\/github.com\/vincaslt\/vscode-highlight-matching-tag\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/vincaslt\/vscode-highlight-matching-tag.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/vincaslt\/vscode-highlight-matching-tag\">vincaslt\/vscode-highlight-matching-tag<\/a>: Highlights matching opening or closing Html tags <a href=\"https:\/\/github.com\/zignd\/html-css-class-completion\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/zignd\/html-css-class-completion.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/zignd\/html-css-class-completion\">zignd\/html-css-class-completion<\/a>: CSS class name completion for the HTML class attribute based on the CSS files in your workspace <a href=\"https:\/\/github.com\/pranaygp\/vscode-css-peek\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/pranaygp\/vscode-css-peek.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/pranaygp\/vscode-css-peek\">pranaygp\/vscode-css-peek<\/a>: Peek at CSS definitions from a class or id tag in Html <a href=\"https:\/\/github.com\/leehooi\/vs-color-picker\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/leehooi\/vs-color-picker.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/leehooi\/vs-color-picker\">leehooi\/vs-color-picker<\/a>: Select any color on the screen<\/p>\n<p>And all linters, formatters etc you can think of\u2026<\/p>\n<h4 id=\"making-things-stand-out-more\">Making things stand out more<\/h4>\n<p><a href=\"https:\/\/github.com\/oderwat\/vscode-indent-rainbow\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/oderwat\/vscode-indent-rainbow.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/oderwat\/vscode-indent-rainbow\">oderwat\/vscode-indent-rainbow<\/a>: Show indentation with a faint rainbow colored background <a href=\"https:\/\/github.com\/aaron-bond\/better-comments\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/aaron-bond\/better-comments.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/aaron-bond\/better-comments\">aaron-bond\/better-comments<\/a>: Make TODO\u2019s really shout out \ud83d\ude03 <a href=\"https:\/\/github.com\/CoenraadS\/Bracket-Pair-Colorizer-2\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/CoenraadS\/Bracket-Pair-Colorizer-2.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/CoenraadS\/Bracket-Pair-Colorizer-2\">CoenraadS\/Bracket-Pair-Colorizer-2<\/a>: Bracket Colorizer <a href=\"https:\/\/github.com\/johnpapa\/vscode-peacock\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/johnpapa\/vscode-peacock.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/johnpapa\/vscode-peacock\">johnpapa\/vscode-peacock<\/a>: Subtly change the color of your Visual Studio Code workspace, ideal for multi VSCode instances. <a href=\"https:\/\/github.com\/IBM-Cloud\/vscode-log-output-colorizer\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/IBM-Cloud\/vscode-log-output-colorizer.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/IBM-Cloud\/vscode-log-output-colorizer\">IBM-Cloud\/vscode-log-output-colorizer<\/a>: Syntax colorization for both the output\/debug\/extensions panel and *.log files.<\/p>\n<pre><code class=\"language-javascript\">{\n    \"workbench.tree.indent\": 32,\n    \"workbench.editor.highlightModifiedTabs\": true,\n}\n<\/code><\/pre>\n<h1 id=\"conclusion\">Conclusion<\/h1>\n<p>Very glad I made the switch. It was quite the effort but I\u2019m pretty content already. Still need to configure linting, formatting, languages setup and also fix the occasional kink in my setup but the overall experience is already way beyond Sublime Text.<\/p>\n<p>Aside from being a pretty great IDE out of the box, it\u2019s the plugins that really make VSCode shine. Not only the quality offered but also the ease of actually finding them in the marketplace and their configuration afterwards.<\/p>\n<p style=\"text-align: center; margin-top: 32px; font-size: 23px;\"><strong>Final score<\/strong>: \ud83d\udc4d \ud83d\udc4d \ud83d\udc4d \ud83c\udf08 \ud83c\udf08<\/p>\n<p> Next up: <a href=\"\/blog\/blog\/dev-setup\/vscode-editor\">VSCode: Editor Configuration and Shortcuts<\/a><\/p>\n<hr \/>\n<h4 id=\"promise-to-self\">Promise to self<\/h4>\n<p>If I ever need to change again because of slowed down development or a dying community, it will be for an editor that will (hopefully!) outlive them all, you know, something like Vim.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/vscode-use-vim.jpg\" alt=\"Sublime Text? Real Americans Use Vim\" \/><\/p>\n<h1>Also in this series<\/h1>\n<ul>\n<li>This Part: Pragmatic Tip #22 : Use A Single Editor Well<\/li>\n<li>Part 2: <a href=\"\/dev-setup\/vscode-editor\/\">VSCode: Editor Settings and Shortcuts<\/a><\/li>\n<\/ul>\n<h1>Extras<\/h1>\n<p><b>Stuff that came into being during the making of this post<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/gist.github.com\/Laoujin\/eb201494af87c818a3756206352d69ba\">VSCode Settings Sync Gist<\/a><\/li>\n<\/ul>\n<p><b>Other interesting reads<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/viatsko\/awesome-vscode\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/viatsko\/awesome-vscode.svg?style=social&#038;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/viatsko\/awesome-vscode\">viatsko\/awesome-vscode<\/a>: A curated list of delightful VS Code packages and resources.<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/vscode\">VSCode Marketplace<\/a><\/li>\n<\/ul>\n<h1> Package Versions <i class=\"fa fa-info-circle\" style=\"float: right; color: cornflowerblue; font-size: 28px\" title=\"Package versions used for this post and in the accompanying code on Github\"><\/i><\/h1>\n<div><a href=\"https:\/\/github.com\/microsoft\/vscode\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/microsoft\/vscode.svg?style=social&#038;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/microsoft\/vscode\">microsoft\/vscode<\/a>: v1.36.0 <\/div>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/vscode-screenshot.png\" alt=\"VSCode Editor\" class=\"webfeedsFeaturedVisual\" \/><\/p>\n<blockquote>\n<p>Pragmatic Tip 22: The editor should be an extension of your hand; make sure your editor is configurable, extensible, and programmable.<\/p>\n<\/blockquote>\n<p>As a long time Sublime user, the infrequent updates and missing support for new-ish stuff started to become quite apparent. Like all plugin maintainers have turned to Visual Studio Code.<\/p>\n<p>And so I finally decided to leave Sublime Text 3 behind. Welcome Visual Studio Code, the new goto editor.<\/p>\n","protected":false},"author":1,"featured_media":2057,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[13,35,6],"class_list":["post-1543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev-setup","tag-cheat-sheet","tag-pragmatic-tips","tag-tutorial"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pragmatic Tip #22 : Use A Single Editor Well - Itenium<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pragmatic Tip #22 : Use A Single Editor Well - Itenium\" \/>\n<meta property=\"og:description\" content=\"Pragmatic Tip 22: The editor should be an extension of your hand; make sure your editor is configurable, extensible, and programmable.As a long time Sublime user, the infrequent updates and missing support for new-ish stuff started to become quite apparent. Like all plugin maintainers have turned to Visual Studio Code.And so I finally decided to leave Sublime Text 3 behind. Welcome Visual Studio Code, the new goto editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/\" \/>\n<meta property=\"og:site_name\" content=\"Itenium\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-17T20:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-28T12:31:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/vscode-screenshot.png\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"309\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Usdevelop\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Usdevelop\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/\",\"name\":\"Pragmatic Tip #22 : Use A Single Editor Well - Itenium\",\"isPartOf\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/vscode-screenshot.png\",\"datePublished\":\"2019-07-17T20:00:00+00:00\",\"dateModified\":\"2025-11-28T12:31:44+00:00\",\"author\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\"},\"breadcrumb\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#primaryimage\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/vscode-screenshot.png\",\"contentUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/vscode-screenshot.png\",\"width\":360,\"height\":309},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/demo.sidekick.be\/itenium\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pragmatic Tip #22 : Use A Single Editor Well\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/\",\"name\":\"Itenium\",\"description\":\"We build software. We build careers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\",\"name\":\"Usdevelop\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"caption\":\"Usdevelop\"},\"sameAs\":[\"https:\/\/demo.sidekick.be\/itenium\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pragmatic Tip #22 : Use A Single Editor Well - Itenium","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Pragmatic Tip #22 : Use A Single Editor Well - Itenium","og_description":"Pragmatic Tip 22: The editor should be an extension of your hand; make sure your editor is configurable, extensible, and programmable.As a long time Sublime user, the infrequent updates and missing support for new-ish stuff started to become quite apparent. Like all plugin maintainers have turned to Visual Studio Code.And so I finally decided to leave Sublime Text 3 behind. Welcome Visual Studio Code, the new goto editor.","og_url":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/","og_site_name":"Itenium","article_published_time":"2019-07-17T20:00:00+00:00","article_modified_time":"2025-11-28T12:31:44+00:00","og_image":[{"width":360,"height":309,"url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/vscode-screenshot.png","type":"image\/png"}],"author":"Usdevelop","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Usdevelop","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/","url":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/","name":"Pragmatic Tip #22 : Use A Single Editor Well - Itenium","isPartOf":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#website"},"primaryImageOfPage":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#primaryimage"},"image":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#primaryimage"},"thumbnailUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/vscode-screenshot.png","datePublished":"2019-07-17T20:00:00+00:00","dateModified":"2025-11-28T12:31:44+00:00","author":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022"},"breadcrumb":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#primaryimage","url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/vscode-screenshot.png","contentUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/vscode-screenshot.png","width":360,"height":309},{"@type":"BreadcrumbList","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demo.sidekick.be\/itenium\/"},{"@type":"ListItem","position":2,"name":"Pragmatic Tip #22 : Use A Single Editor Well"}]},{"@type":"WebSite","@id":"https:\/\/demo.sidekick.be\/itenium\/#website","url":"https:\/\/demo.sidekick.be\/itenium\/","name":"Itenium","description":"We build software. We build careers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022","name":"Usdevelop","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","caption":"Usdevelop"},"sameAs":["https:\/\/demo.sidekick.be\/itenium"]}]}},"_links":{"self":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/comments?post=1543"}],"version-history":[{"count":3,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1543\/revisions"}],"predecessor-version":[{"id":2287,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1543\/revisions\/2287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media\/2057"}],"wp:attachment":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media?parent=1543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/categories?post=1543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/tags?post=1543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}