VSCode setup for web development: settings and extensions

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.

Comments

[Nipuna Weerasekara]

Can you tell me what is used for screen recording? I use recordit but it is little bit of pain. Any suggestions?

[Ante]

If you are on Windows 10, you can do Wkey + G. It will open up the Game bar where you will see a small window with 'Broadcast and capture'. This is what I use.

[Bogdan Alexandru Militaru]

nice Ante. thanks for your feedback :D

[Bogdan Alexandru Militaru]

I'm a MacBook user. I have screen recording by hitting CMD+Shift+5.

[Nipuna Weerasekara]

I am a noob windows user. Any suggestions?

[Bogdan Alexandru Militaru]

I don't know. But I searched and I found screentogif.com/

[Bogdan Alexandru Militaru]

Or superuser.com/questions/81826/how-...

[Nipuna Weerasekara]

Thanks big time...

[Bogdan Alexandru Militaru]

Happy to help. If you are curious to discover more articles for programmers, please check my blog boobo94.xyz/ and subscribe there. Thanks!

[Nipuna Weerasekara]

Done mate. Thank you...

[Nguyễn Trung Kiên]

try ShareX, it can record screen (gif, mp4) and capture screen too.

[MyKeg]

In addition to the Rainbow Brackets, I recommend the Indent-Rainbow extension (marketplace.visualstudio.com/items...). I adjust the two plugins colors to match at each indentation level so it's easy to see when I'm missing a closing bracket, or indentation is off.

Edit: I don't match the colors exactly, I set the Indent Rainbow is a very dark version of the corresponding Rainbow Bracket color. I also use a dark editor color theme, so adjust as necessary for your color theme.

[Bogdan Alexandru Militaru]

This is amazing. Thank you very much for this hint MyKeg.

[Felipe Bossolani]

Nice suggestions. For multi-project devs I would like to suggest Peacock: marketplace.visualstudio.com/items...

[Shua]

Yet another vscode web dev post light on process and heavy on color coding extensions.

I’m never going to get the last 60 seconds back. Think about how you can add value to the community rather than regurgitate content that is found in 20k other posts.

[Bogdan Alexandru Militaru]

Why did you clicked on it if you're not interested? This is my setup so I shared it with the community. I cannot see the point of your comment!