VSCode setup for web development: settings and extensions
Tags: vscode, webdev, devlive
Published: 2019-09-20 13:30:39

<!-- wp:paragraph -->
<p>Today's the day. Hello dear friends and welcome back to a new <a href="/developer-story/7-questions-from-a-beginner-developer/">article</a> written by me, your Boobo.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this article I want to present you my VSCode setup for web development. As a daily tool VSCode is exactly what I need to accomplish my tasks.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I mainly write JavaScript code these days, but I used to write code for Golang, PHP, bash scripts, SQL queries, Java or Python. I consider it very useful and very powerful text editor. But this is not about what VSCode is, but my setup so let's begin.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>VSCode settings</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The following JSON config is the configuration of my environment. You can simply paste this by pressing</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">MAC: CMD+SHIFT+P
Windows/Linux: CTRL+SHIFT+P</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Type in the opened window: <em><strong>Preferences: Open Settings(JSON)</strong></em> and there paste the following JSON object:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">{
    "editor.minimap.enabled": false,
    "explorer.openEditors.visible": 0,
    "git.autofetch": true,
    "window.zoomLevel": -1,
    "workbench.colorCustomizations": {},
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "vscode-icons",
    "editor.formatOnSave": true,
    "todo-tree.highlights.customHighlight": {
        "TODO": {
            "background": "#00b248",
            "foreground": "#66ffa6",
            "icon": "checklist",
            "type": "text"
        },
        "FIXME": {
            "background": "#c79400",
            "foreground": "#fff64f",
            "icon": "alert",
            "type": "text"
        }
    },
    "todo-tree.regex.regexCaseSensitive": false,
    "todo-tree.filtering.excludeGlobs": [
        "**/node_modules/**"
    ],
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading -->
<h2>Extensions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I used many extensions by time to time depending on my tasks, but this is what I like about VSCode setup instead of IDEs. You can configure it day by day without having the same configuration all the time. Because VSCode is very lite by default.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets">Rainbow Brackets</a></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It's a very cool tool, coloring the brackets and offering a good.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">code --install-extension 2gua.rainbow-brackets</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">GitLens</a></h3>
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>GitLens&nbsp;<strong>supercharges</strong>&nbsp;the Git capabilities built into Visual Studio Code. It helps you to&nbsp;<strong>visualize code authorship</strong>&nbsp;at a glance via Git blame annotations and code lens,&nbsp;<strong>seamlessly navigate and explore</strong>&nbsp;Git repositories,&nbsp;<strong>gain valuable insights</strong>&nbsp;via powerful comparison commands, and so much more.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>I like gitlens because it offers you a lot of cool features related to git. You can see all the branches, commits, tags. You can see who modified a line of code last time, what the latest changes of a file are and other cool stuff. Give it a try!</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">code --install-extension eamodio.gitlens</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory">Git History</a></h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://raw.githubusercontent.com/DonJayamanne/gitHistoryVSCode/master/images/gitLogv2.gif" alt="git history"/></figure>
<!-- /wp:image -->

<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">code --install-extension donjayamanne.githistory</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">EditorConfig for VS Code</a></h3>
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>This plugin&nbsp;<a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig#known-issues">attempts</a>&nbsp;to override user/workspace settings with settings found in&nbsp;<code>.editorconfig</code>&nbsp;files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if&nbsp;<code>root=true</code>&nbsp;is not specified, EditorConfig&nbsp;<a rel="noreferrer noopener" href="https://editorconfig.org/#file-location" target="_blank">will continue to look</a>&nbsp;for an&nbsp;<code>.editorconfig</code>&nbsp;file outside of the project.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">code --install-extension EditorConfig.EditorConfig</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier - Code formatter</a></h3>
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><a rel="noreferrer noopener" href="https://prettier.io/" target="_blank">Prettier</a>&nbsp;is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.<br><em>JavaScript · TypeScript · Flow · JSX · JSON&nbsp;</em><br><em>CSS · SCSS · Less&nbsp;</em><br><em>HTML · Vue · Angular&nbsp;</em><br><em>GraphQL · Markdown · YAML&nbsp;</em></p></blockquote>
<!-- /wp:quote -->

<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">code --install-extension esbenp.prettier-vscode</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree">Todo Tree</a></h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image">
<img src="https://raw.githubusercontent.com/Gruntfuggly/todo-tree/master/resources/screenshot.png" alt="vscode setup"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>I like Todo Tree very much because of its configuration. Is very simple to use, provides a very simple but very solid functionality. But the far away best feature of it is about highlighting todo or fixme keywords in code. Personally I opt for highlighting the whole line.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">code --install-extension Gruntfuggly.todo-tree</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode">Code Time</a></h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://s3-us-west-1.amazonaws.com/swdc-static-assets/vs-code-dashboard.gif" alt="vscode code time extension"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Offers daily and weekly reports of your programming activity right in your code editor.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">code --install-extension softwaredotcom.swdc-vscode</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons">vscode-icons</a></h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/images/screenshot.gif" alt="vscode icons"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>I really like this plugin because makes my text editor much friendly and offers me a good overview over file types. I suggest you to give it a try.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">code --install-extension vscode-icons-team.vscode-icons</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading -->
<h2>Theme</h2>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://camo.githubusercontent.com/48f39d862900e54913410490e566a9e761bc5ad5/68747470733a2f2f7773332e73696e61696d672e636e2f6c617267652f303036744e6252776779316676776b7236693139396a33316b7731366f7461742e6a7067" alt="vscode theme"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>OI don't know about you, but personally I really like dark screens. I love to see my computer dark and I love dark mode themes. Currently, I use <a href="https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme">One Dark Pro Theme</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">code --install-extension zhuangtongfa.Material-theme</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>I hope you enjoyed it. If you have more questions for me about my daily setup, don't wait after my articles, go to the contact form and write me directly. I'll write a whole article special for your question.<br><br>My name is Boobo from 94 <code>8-)</code> and you just catch the tiger out of the cage.</p>
<!-- /wp:paragraph -->