VSCode setup for web development: settings and extensions — boobo94.xyz

4 min readSep 18, 2019

Today’s the day. Hello dear friends and welcome back to a new article written by me, your Boobo.

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.

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.

VSCode settings

The following JSON config is the configuration of my environment. You can simply paste this by pressing

MAC: CMD+SHIFT+P
Windows/Linux: CTRL+SHIFT+P

Type in the opened window: Preferences: Open Settings(JSON) and there paste the following JSON object:

{
    "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/**"
    ],
}

Extensions

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.

Rainbow Brackets

It’s a very cool tool, coloring the brackets and offering a good.

code --install-extension 2gua.rainbow-brackets

GitLens

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

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!

code --install-extension eamodio.gitlens

Git History

code --install-extension donjayamanne.githistory

EditorConfig for VS Code

This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.

code --install-extension EditorConfig.EditorConfig

Prettier — Code formatter

Prettier 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.
JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML

code --install-extension esbenp.prettier-vscode

Todo Tree

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.

code --install-extension Gruntfuggly.todo-tree

Code Time

Offers daily and weekly reports of your programming activity right in your code editor.

code --install-extension softwaredotcom.swdc-vscode

vscode-icons

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.

code --install-extension vscode-icons-team.vscode-icons

Theme

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 One Dark Pro Theme.

code --install-extension zhuangtongfa.Material-theme

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.

My name is Boobo from 94 8-) and you just catch the tiger out of the cage.

Originally published at https://whyboobo.com/tips/vscode-extensions/ on September 18, 2019.