DEV Community

Cover image for VS Code Setup for Frontend Devs
Ivan Simeonov
Ivan Simeonov

Posted on

VS Code Setup for Frontend Devs

Table of Contents

Introduction

In this article, we will explore my personal setup for Visual Studio Code, the popular open-source code editor. I will share the themes, icons, and extensions that I use on a daily basis to enhance my coding experience. Whether you are a seasoned developer or just starting out, this article will give you some insights and inspiration to optimize your own setup. So, let's dive in and see what makes my VS Code setup unique!

Theme

The VS Code theme I most often use is the Default Dark+ theme provided by VS Code default settings, but from time to time, I switch to the One Dark Pro. In general I prefer darker themes, so my eyes are not strained so much.

One Dark Pro

⬇️ Downlaod One Dark Pro

Icons

The icon pack that I use is the well-known Material Icon Theme. I love it because it supports almost every file extension and can be customized for everyone's needs.

Material Icon Theme

⬇️ Download Material Icon Theme

Extensions

Below, I will be discussing the various extensions that I utilize in Visual Studio Code to enhance my coding experience.

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Auto Rename Tag - Usage

⬇️ Download Auto Rename Tag

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

Auto Close Tag - Usage

⬇️ Download Auto Close Tag

Code Spell Checker

A basic spell checker that works well with code and documents.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Code Spell Checker - Usage

⬇️ Download Code Spell Checker

CSS Peek

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). This includes:

  • Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
  • Go To: jump directly to the css file or open it in a new editor (F12)
  • Hover: show the definition in a hover over the symbol (Ctrl+hover)

In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name

CSS Peek - Usage

⬇️ Download CSS Peek

DotENV

Syntax Highlighting support for Environment (.env) Files

DotENV - Usage

⬇️ Download DotENV

Error Lens

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Error Lens - Usage

⬇️ Download Error Lens

ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

ESLint is completely pluggable. Every single rule is a plugin and you can add more at runtime. You can also add community plugins, configurations, and parsers to extend the functionality of ESLint.

ESLint - Usage

⬇️ Download ESLint

GitLens

GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.

Commit Graph

GitLens Commit Graph - Usage

Worktrees

GitLens Worktrees - Usage

Git blame file

GitLens Git Blame 1 - Usage

Git blame current line

GitLens Git Blame 2 - Usage

Git blame status bar

GitLens Git Blame 3 - Usage

⬇️ Download GitLens

HTML Boilerplate

This extension provides the standard HTML boilerplate code used in all web applications.

HTML Boilerplate - Usage

⬇️ Download HTML Boilerplate

HTML CSS Support

HTML id and class attribute completion for Visual Studio Code.

  • HTML id and class attribute completion.
  • Supports linked and embedded style sheets.
  • Supports template inheritance.
  • Supports additional style sheets.
  • Supports other HTML like languages.
  • Validates CSS selectors on demand.

HTML CSS Support - Usage

⬇️ Download HTML CSS Support

Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

I"Import

⬇️ Download Import Cost

Live Server

Launch a local development server with live reload feature for static & dynamic pages.

Live Server - Usage

⬇️ Download Live Server

Markdown Preview Enhanced

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.

Markdown Preview Enhanced - Usage

⬇️ Download Markdown Preview Enhanced

Path Intellisense

Visual Studio Code plugin that autocompletes filenames.
To use Path Intellisense instead of the default autocompletion, the following configuration option must be added to your settings:



{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }


Enter fullscreen mode Exit fullscreen mode

Path Intellisense - Usage

⬇️ Download Path Intellisense

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.

Prettier - Usage

⬇️ Download Prettier - Code Formatter

Project Manager

It helps you to easily access your projects, no matter where they are located. Don't miss those important projects anymore.
You can define your own Projects (also called Favorites), or choose for auto-detect Git, Mercurial or SVN repositories, VSCode folders, or any other folder.

Project Manager - Usage

⬇️ Download Project Manager

REST Client

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

REST Client - Usage

⬇️ Download REST Client

Trailing Spaces

A VS Code extension that allows you to highlight trailing spaces and delete them in a flash!

Trailing Spaces - Usage

⬇️ Download Trailing Spaces

Turbo Console Log

This extension make debugging much easier by automating the operation of writing meaningful log message.

Turbo Console Log - Usage

⬇️ Download Turbo Console Log

Version Lens

This extension shows version information when opening a package or project.

Version Lens - Usage

⬇️ Download Version Lens

Angular Language Service

This extension provides a rich editing experience for Angular templates, both inline and external templates.

Angular Language Service - Usage

⬇️ Download Angular Language Service

ES7 React Redux React Native snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code.

ES7+ React/Redux/React-Native snippets - Usage

⬇️ Download ES7+ React/Redux/React-Native snippets

Docker

The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.

Docker - Usage

⬇️ Download Docker

Kubernetes

The extension for developers building applications to run in Kubernetes clusters and for DevOps staff troubleshooting Kubernetes applications.
Works with any Kubernetes anywhere (Azure, Minikube, AWS, GCP and more!).

Kubernetes - Usage

⬇️ Download Kubernetes

Settings

The JSON code below, shows my current VS Code settings:



// settings.json

{
"breadcrumbs.enabled": true,
"breadcrumbs.icons": true,
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.fontSize": 14,
"editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
"editor.fontWeight": "normal",
"editor.wordWrap": "on",
"editor.autoClosingBrackets": "always",
"editor.autoClosingQuotes": "always",
"editor.autoClosingDelete": "always",
"editor.codeLens": true,
"editor.codeLensFontSize": 12,
"editor.bracketPairColorization.enabled": true,
"editor.guides.highlightActiveBracketPair": true,
"editor.guides.bracketPairs": "active",
"editor.minimap.size": "fit",
"editor.minimap.scale": 1,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.tabSize": 2,
"editor.fastScrollSensitivity": 6,
"editor.renderWhitespace": "none",
"editor.accessibilitySupport": "off",
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact"
},
"errorLens.enabled": true,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 500,
"files.defaultLanguage": "${activeEditorLanguage}",
"git.autofetch": true,
"html.format.indentInnerHtml": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"keyboard.touchbar.enabled": true,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.port": 4201,
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"terminal.integrated.fontSize": 14,
"workbench.colorTheme": "Default Dark+",
"workbench.iconTheme": "material-icon-theme",
"workbench.editor.enablePreview": false,
"workbench.startupEditor": "newUntitledFile",
"workbench.editor.wrapTabs": true,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"redhat.telemetry.enabled": false,
"typescript.suggest.paths": false,
"javascript.suggest.paths": false
}

Enter fullscreen mode Exit fullscreen mode




Conclusion

In conclusion, I shared my personalized Visual Studio Code setup, including the themes, icons, and extensions that I use on a daily basis. These tools help me to streamline my workflow, increase productivity, and provide a visually appealing interface. The combination of these elements is tailored to meet my specific needs and enhance my overall experience with the code editor. By sharing this setup, I hope to inspire others to customize their own VS Code environment and find the tools that work best for them.

Contact Me

Top comments (17)

Collapse
 
marblewraith profile image
Matthew Rath • Edited
  • ENV instead of DotENV gives you more features.

  • Console Ninja display console output inline.

  • Nested Comments fixes some weird default behaviour.

  • Highlight Counter does what it says, tells you how many instances of a highlighted selection are present (default only tells you how many chars selected).

  • File Utils is a better workflow by rebinding some keys. Instead of creating an untitled file and then having to save it (ctrl+s) and give it a location / name. You can do it all in one step, which means autosave / format also starts working immediately.

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

Thanks, for your suggestions. I will definitely try them out and update the post with the ones that I will be using in the following days!!

Collapse
 
chaudharidevam profile image
Devam Chaudhari

Vscode Extensions that i used:
- Autoprefixer.
- Code spell checker.
- Css peek.
- ES7+ React/Redux/React-Native snippets
- EsLint
- Git Graph
- Git history.
- Git lens.
- Indent rainbow.
- Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, R
- Total typescript.

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

I will definitely check the ones that are not already included in the article. Thanks for your input!

Collapse
 
chaudharidevam profile image
Devam Chaudhari

Also, thanks to you sharing vscode extension :-)

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Nice setup

Collapse
 
bretbernhoft profile image
Bret Bernhoft

This is the kind of IDE walkthrough I wish I had when I first started learning to be a Frontend Web Developer. This is succinct and straight-to-the-point. Thank you for the information.

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov • Edited

I hope the others will also find it so useful! 🔥

Collapse
 
juliocamposswork profile image
Julio Campos

Nice setup for basic usage, my suggest is "Color Highlight" nice for large code

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

Thanks for the suggestion. I like the default color preview but I will give this one a try!

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

Thank you 🔥 🙏

Collapse
 
websitevikreta profile image
Website Vikreta

Good one. Thanks for sharing this.

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Very detailed explanation. Thanks

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

I am glad you liked it and I hope you've found something useful. Feel free to share your most used extensions, theme or icons, so we can improve our dev environment.

Collapse
 
haimoudmustapha profile image
mustapha hmd

there is another extension that i start used recently is like the github autopilot but free, called : CODEIUM.

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

I will definitely check it out, thanks for the suggestion!