{"componentChunkName":"component---src-templates-blog-post-js","path":"/vs-code-setup-guide/","result":{"data":{"site":{"siteMetadata":{"title":"Rope and Tire","author":"Suprada Urval"}},"markdownRemark":{"id":"7f7b7ffa-122a-5cf4-b062-67bd3d6fd1ad","excerpt":"Sublime Text as the text editor of my choice for Front End Web Dev work (and to draft these blog posts). I wanted to try a different text editor (FOMO, next cool thing, need more fun … whatever) and decided to try Visual Studio Code or VS Code. This…","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/20489b979452f6bd211b7ca82a579a1e/5a46d/vscode-300x155.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 51.35135135135135%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABeUlEQVQoz61SOU8CQRjlh1jYmKgox+4ieHApiRqixCMWeJDYWBmOXXYxuoDGqEiQIyaGWHA1aCOiNlpoY+NP0EIrE3/FMzMJi4tbUrzMm2/evHyXboQR0U3oVAFWxKglBisrqURWVpu3/mgaEiHBQN82GAOvEnGmqMJZowAbJ1G0zG1cTG1IMiJC1iAgk77F3OwRNbGSN0aCc3yPagg8riSM+jCMg2FYzFEaG+oPKuY6zijAbY/jsviE6/orvj5/sCPWaAaRYAkJuY5c5g6OsV3woTI2A+cIrBWwvJCGyFeodmM1r5SuI5lNOuKoVV7QbLzh4/0bSbmO3p4tpFMN8KES9hNX8K+cQRKqWPfnkM00kc/eo5B7QLX8jPTJzf+SafqMiOLFIxbnUzDpI3BNyLRcn/eY9sltl7HkO8WM5wBTzgS804fwuJOU0xaxUseUmfZQyCMREZiHeWU4hDMGgfac6MjJmYR2yZ3r8XdtWoPQundCew+7sNi/u5iQ9PGoWMwAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"VS Code Logo\"\n        title=\"VS Code Logo\"\n        src=\"/static/20489b979452f6bd211b7ca82a579a1e/5a46d/vscode-300x155.png\"\n        srcset=\"/static/20489b979452f6bd211b7ca82a579a1e/12f09/vscode-300x155.png 148w,\n/static/20489b979452f6bd211b7ca82a579a1e/e4a3f/vscode-300x155.png 295w,\n/static/20489b979452f6bd211b7ca82a579a1e/5a46d/vscode-300x155.png 300w\"\n        sizes=\"(max-width: 300px) 100vw, 300px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span>Sublime Text</a> as the text editor of my choice for Front End Web Dev work (and to draft these blog posts). I wanted to try a different text editor (FOMO, next cool thing, need more fun … whatever) and decided to try Visual Studio Code or VS Code. This post is my VS Code setup guide.</p>\n<p>VS Code is made by the makers of <a href=\"https://ropeandtire.com/onenote-my-cool-tools-1/\" target=\"_blank\" rel=\"noopener noreferrer\">OneNote</a> (which I adore), and it has good reviews from other dev folks. It is also free and has an <a href=\"https://marketplace.visualstudio.com/\" target=\"_blank\" rel=\"noopener noreferrer\">extensive extensions market</a>. In addition to the installation, in this guide, I list some of the many extensions to improve productivity from the get go and to try to replicate some features I loved in Sublime Text.</p>\n<p>Here is the set of links I followed for setup, configuration and customization.</p>\n<h3>Installation</h3>\n<ol>\n<li>Installation <a href=\"Install - https://code.visualstudio.com/docs/setup/setup-overview\" target=\"_blank\" rel=\"noopener noreferrer\">Link</a></li>\n<li>On Mac only: <a href=\"https://code.visualstudio.com/docs/setup/mac\" target=\"_blank\" rel=\"noopener noreferrer\">setup the command prompt</a> for command line invocation.</li>\n</ol>\n<h3>Customize the Look and Feel</h3>\n<ol>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-icontheme-nomo-dark\" target=\"_blank\" rel=\"noopener noreferrer\">Nomo Dark icon theme</a>: Icons in your explorer window to identify the files types / folders easily.After installing, enable the extension by going to <strong>File > Preferences > File Icon Theme > VSCode Icons</strong>. (On OSX it is <strong>Code > Preferences > File Icon Theme > VSCode Icons</strong>.)</li>\n<li><a name=\"karyFoundationTheme\"></a> <a href=\"https://marketplace.visualstudio.com/items?itemName=karyfoundation.theme-karyfoundation-themes\" target=\"_blank\" rel=\"noopener noreferrer\">Kary Foundation Theme Light theme</a>: I pretty much use light themes. I like the color scheme and the recommended typography. Out of the box, the fonts and text color in this theme isnt’t that great. You absolutely need need to install the recommended <a href=\"#haskligFont\">Hasklig font</a>, and then it becomes really good.After installing, enable the theme by going to <strong>File > Preferences > Color Theme</strong> and select “Kary Foundation Theme – Light”</li>\n<li><a name=\"haskligFont\"></a><a href=\"https://github.com/i-tu/Hasklig\" target=\"_blank\" rel=\"noopener noreferrer\">Hasklig Font</a>: A code font by Adobe Systems with monospaced ligatures, recommended for use with the <a href=\"#karyFoundationTheme\">Kary Foundation Theme</a>. After installing the theme on your OS, enable the font. Then go to <strong>File > Preferences > Settings</strong> and update your settings with the following:\n{<br>\n“workbench.iconTheme”: “vs-nomo-dark”,\n“workbench.colorTheme”: “Kary Foundation － Light”,\n“editor.fontFamily”: “Hasklig, Menlo, Monaco, ‘Courier New’, monospace”, “editor.fontWeight”: “500”,\n“editor.fontWeight”: “normal”,\n“editor.fontSize”: 15,\n“editor.fontLigatures”: true,\n“terminal.integrated.fontFamily”: “Hasklig, Menlo, Monaco, ‘Courier New’, monospace”,\n“terminal.integrated.fontLigatures”: true\n}</li>\n</ol>\n<h3>Set up the editor conveniences</h3>\n<ol>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense\" target=\"_blank\" rel=\"noopener noreferrer\">Path Intellisense Visual Studio Code</a>: Plugin that autocompletes filenames.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense\" target=\"_blank\" rel=\"noopener noreferrer\">NPM Intellisense Visual Studio Code</a>: Plugin that autocompletes npm modules in import statements.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag\" target=\"_blank\" rel=\"noopener noreferrer\">Auto Close Tag</a>: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag\" target=\"_blank\" rel=\"noopener noreferrer\">Auto Rename Tag</a>: Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=vittorioromeo.expand-selection-to-scope\" target=\"_blank\" rel=\"noopener noreferrer\">Expand Selection To Scope</a>: This extension introduces a command that incrementally expands the selection to the nearest outer scope (delimited by bracket pairs).</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=Rubymaniac.vscode-paste-and-indent\" target=\"_blank\" rel=\"noopener noreferrer\">Paste and Indent</a>: Paste some code with “correct” indentation.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=zovorap.ab-html-formatter\" target=\"_blank\" rel=\"noopener noreferrer\">AB HTML Formatter</a>: This tool is formatting / reindenting HTML code.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets\" target=\"_blank\" rel=\"noopener noreferrer\">Rainbow Brackets</a>: Provides rainbow colors for the round brackets, the square brackets and the squiggly brackets.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=spywhere.guides\" target=\"_blank\" rel=\"noopener noreferrer\">Guides</a>:Guides is simply an extension that add various indentation guide lines.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight\" target=\"_blank\" rel=\"noopener noreferrer\">Color Highlight</a>: Highlight web colors in your editor.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color\" target=\"_blank\" rel=\"noopener noreferrer\">Color Picker</a>: Helper with GUI to generate color codes such as CSS color notations.</li>\n</ol>\n<h3>Set up the development conveniences</h3>\n<ol>\n<li>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint\" target=\"_blank\" rel=\"noopener noreferrer\">ES Lint</a>: ESLint Integrates ESLint into VS Code. You need to have installed ESLint first.</p>\n<pre>npm install eslint\n\n</pre>\n</li>\n<li>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=sporiley.css-auto-prefix\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Auto Prefix</a>: Auto-prefixes certain attributes in CSS.</p>\n</li>\n<li>\n<p><a href=\" https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint\" target=\"_blank\" rel=\"noopener noreferrer\">Style Lint</a>: Modern CSS/SCSS/Less linter.Enable the linter, while disabling the built-in CSS and SCSS linter. Go to <strong>File > Preferences > Settings</strong> and add the following to settings.json:</p>\n<pre>{\n\"stylelint.enable\": true,\n\"css.validate\": false,\n\"scss.validate\": false\n}\n\n</pre>\n</li>\n<li>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css\" target=\"_blank\" rel=\"noopener noreferrer\">HTML CSS Support</a>: CSS support for HTML documents.</p>\n</li>\n<li>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets\" target=\"_blank\" rel=\"noopener noreferrer\">HTML Snippets</a>: Full HTML tags including HTML5 Snippets.</p>\n</li>\n<li>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate\" target=\"_blank\" rel=\"noopener noreferrer\">HTML Boilerplate</a>: A basic HTML5 boilerplate snippet generator.</p>\n</li>\n<li>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=tanato.vscode-gulpe\" target=\"_blank\" rel=\"noopener noreferrer\">Gulp Snippets</a>: Gulp JS Snippets for Visual Studio Code.</p>\n</li>\n</ol>\n<h3>Projects and versioning</h3>\n<ol>\n<li>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=donjayamanne.git-extension-pack\" target=\"_blank\" rel=\"noopener noreferrer\">Git Extension Pack</a>: Popular Visual Studio Code extensions for Git. Contains the following extensions:</p>\n<ol>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory\" target=\"_blank\" rel=\"noopener noreferrer\">Git History</a>: View git log, file or line History.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager\" target=\"_blank\" rel=\"noopener noreferrer\">Project Manager</a>: Easily switch between projects.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens\" target=\"_blank\" rel=\"noopener noreferrer\">Git Lens</a>: Provides Git CodeLens information (most recent commit, # of authors), on-demand inline blame annotations, status bar blame</li>\n</ol>\n<p>information, file &#x26; blame history explorers, and commands to compare changes.</p>\n<ol start=\"4\">\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore\" target=\"_blank\" rel=\"noopener noreferrer\">gitignore</a>: Language support for .gitignore files. Lets you pull .gitignore files from the <a href=\"https://github.com/github/gitignore\">https://github.com/github/gitignore</a> repository.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github\" target=\"_blank\" rel=\"noopener noreferrer\">Open in GitHub / Bitbucket / VisualStudio.com</a>: Jump to a source code line in Github / Bitbucket / VisualStudio.com.</li>\n</ol>\n</li>\n</ol>\n<h3>Measuring (for the dataphiles)</h3>\n<ol>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime\" target=\"_blank\" rel=\"noopener noreferrer\">Wakatime</a>: Metrics, insights, and time tracking automatically generated from your programming activity.</li>\n</ol>\n<h3>Debuggers</h3>\n<ol>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome\" target=\"_blank\" rel=\"noopener noreferrer\">Debugger for chrome</a>: Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug\" target=\"_blank\" rel=\"noopener noreferrer\">Debugger<br /> for firefox</a>: Debug your web application or browser extension in Firefox</li>\n</ol>\n<h3>Polymer Specific</h3>\n<p>These extensions are specific to <a href=\"https://www.polymer-project.org/\" target=\"_blank\" rel=\"noopener noreferrer\">Polymer</a> – a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable</p>\n<p>apps.</p>\n<ol>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=polymer.polymer-ide\" target=\"_blank\" rel=\"noopener noreferrer\">Polymer IDE</a>: Provides linting, autocompletion, and more for web components.</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=jonwolfe.language-polymer\" target=\"_blank\" rel=\"noopener noreferrer\">Polymer Syntax</a>: Polymer syntax highlighting for Atom &#x26; VS Code!</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=chimon2000.polymer-snippets\" target=\"_blank\" rel=\"noopener noreferrer\">Polymer Snippets</a>: Sublime snippets for Polymer and Web Components</li>\n</ol>\n<h3>Additional Settings</h3>\n<p>These are additional changes to the editor settings to make life easier. Go to <strong>File > Preferences > Settings</strong> and add the following lines to your settings.json file</p>\n<ol>\n<li>\n<p>Change tab size from 4 spaces (default) to 2 spaces.</p>\n<pre>{\n\"editor.tabSize\": 2\n}\n\n</pre>\n</li>\n<li>\n<p>Enable word-wrap – if you are crazy like me.</p>\n<pre>{\n\"editor.wordWrap\": \"on\"\n}\n\n</pre>\n</li>\n<li>\n<p>Enable the minimap to quickly navigate long files.</p>\n<pre>{\n\"editor.minimap.enabled\": true\n}\n\n</pre>\n</li>\n<li>\n<p>Show white spaces outside words</p>\n<pre>{\n\"editor.renderWhitespace\": \"boundary\"\n}\n\n</pre>\n</li>\n<li>\n<p>Enable formatting on typing and pasting.</p>\n<pre>{\n\"editor.formatOnType\": true,\n\"editor.formatOnPaste\": true\n}\n\n</pre>\n</li>\n<li>\n<p>Enable copying the current line when Ctrl+C is pressed without any selection. – Enabled by default!</p>\n</li>\n<li>\n<p>Enable Files Auto-Save</p>\n<pre>{\n\"files.autoSave\": \"afterDelay\",\n\"files.autoSaveDelay\": 8000\n}\n\n</pre>\n</li>\n<li>\n<p>Enable Polymer to analyze the whole package, though it’s slower:</p>\n<pre>{\n\"polymer-ide.analyzeWholePackage\": true\n}\n</pre>\n</li>\n</ol>\n<p>The settings.json file now looks like</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">// Place your settings in this file to overwrite the default settings\n{\n    &quot;workbench.iconTheme&quot;: &quot;vs-nomo-dark&quot;,\n    &quot;workbench.colorTheme&quot;: &quot;Kary Foundation － Light&quot;,\n    &quot;editor.fontFamily&quot;: &quot;Hasklig, Menlo, Monaco, &#39;Courier New&#39;, monospace&quot;,\n    &quot;editor.fontWeight&quot;: &quot;500&quot;,\n    &quot;editor.fontSize&quot;: 15,\n    &quot;editor.fontLigatures&quot;: true,\n    &quot;terminal.integrated.fontLigatures&quot;: true,\n    &quot;editor.tabSize&quot;: 2,\n    &quot;editor.wordWrap&quot;: &quot;on&quot;,\n    &quot;editor.minimap.enabled&quot;: true,\n    &quot;editor.renderWhitespace&quot;: &quot;boundary&quot;,\n    &quot;editor.formatOnType&quot;: true,\n    &quot;editor.formatOnPaste&quot;: true,\n    &quot;terminal.integrated.fontFamily&quot;: &quot;Hasklig, Menlo, Monaco, &#39;Courier New&#39;, monospace&quot;,\n    &quot;stylelint.enable&quot;: true,\n    &quot;css.validate&quot;: false,\n    &quot;scss.validate&quot;: false,\n    &quot;files.autoSave&quot;: &quot;afterDelay&quot;,\n    &quot;files.autoSaveDelay&quot;: 8000,\n    &quot;polymer-ide.analyzeWholePackage&quot;: true\n}</code></pre></div>","frontmatter":{"title":"VS Code Setup Guide","date":"May 10, 2017","url":"/vs-code-setup-guide/","tags":["web-development"]}}},"pageContext":{"slug":"/vs-code-setup-guide/","previous":{"fields":{"slug":"/2017-05-02-february-2017-reading-log/"},"frontmatter":{"title":"February 2017 Reading Log","url":"/february-2017-reading-log/","tags":["Books","reading-log"]}},"next":{"fields":{"slug":"/2017-09-07-vs-code-a-tool-for-writers/"},"frontmatter":{"title":"VS Code – A tool for writers","url":"/vs-code-a-tool-for-writers/","tags":["my-cool-tools","Thoughts"]}}}},"staticQueryHashes":["3128451518","426816048"]}