VS Code Setup for Frontend Devs
Tags: vscode, productivity, javascript, tutorial
Published: 2023-02-09 18:35:52

# Table of Contents
- [Introduction](#introduction)
- [Theme](#theme)
- [Icons](#icons)
- [Extensions](#extensions)
   - [Auto Rename Tag](#auto-rename-tag)
   - [Auto Close Tag](#auto-close-tag)
   - [Code Spell Checker](#code-spell-checker)
   - [CSS Peek](#css-peek)
   - [DotENV](#dotenv)
   - [Error Lens](#error-lens)
   - [ESLint](#eslint)
   - [GitLens](#gitlens)
   - [HTML Boilerplate](#html-boilerplate)
   - [HTML CSS Support](#html-css-support)
   - [Import Cost](#import-cost)
   - [Live Server](#live-server)
   - [Markdown Preview Enhanced](#markdown-preview-enhanced)
   - [Path Intellisense](#path-intellisense)
   - [Prettier - Code Formatter](#prettier-code-formatter)
   - [Project Manager](#project-manager)
   - [REST Client](#rest-client)
   - [Trailing Spaces](#trailing-spaces)
   - [Turbo Console Log](#turbo-console-log)
   - [Version Lens](#version-lens)
   - [Angular Language Service](#angular-language-service)
   - [ES7 React Redux React Native snippets](#es7-react-redux-react-native-snippets)
   - [Docker](#docker)
   - [Kubernetes](#kubernetes)
- [Settings](#settings)
- [Conclusion](#conclusion)
- [Contact Me](#contact-me) 

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4g77q0ro47jaem5n1e5w.png)

:arrow_down: [Downlaod One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)


## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/redpgz387pv9m8ikhfhu.png)

:arrow_down: [Download Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.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.

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/f3039ed7263c5ab94c6e2fa9995d3ad265ebc822/images/usage.gif" alt="Auto Rename Tag - Usage" >

:arrow_down: [Download Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

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

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/formulahendry/vscode-auto-close-tag/492b13866690b3ef54518d8c0ca99754556f78c6/images/usage.gif" alt="Auto Close Tag - Usage" >

:arrow_down: [Download Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.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.

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/main/images/example.gif" alt="Code Spell Checker - Usage" >

:arrow_down: [Download Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.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


<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/pranaygp/vscode-css-peek/master/readme/working.gif" alt="CSS Peek - Usage" >

:arrow_down: [Download CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

### DotENV
Syntax Highlighting support for Environment (.env) Files

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/mikestead/vscode-dotenv/master/images/screenshot.png" alt="DotENV - Usage" >

:arrow_down: [Download DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.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.

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/usernamehw/vscode-error-lens/master/img/demo.png" alt="Error Lens - Usage" >

:arrow_down: [Download Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

### 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.

<img width="100%" style="width:100%" src="https://blog.logrocket.com/wp-content/uploads/2021/10/eslint-quick-fix.gif" alt="ESLint - Usage" >

:arrow_down: [Download ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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
<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/commit-graph-illustrated.png" alt="GitLens Commit Graph - Usage" >

#### Worktrees
<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/worktrees-illustrated.png" alt="GitLens Worktrees - Usage" >

#### Git blame file 
<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/code-lens.png" alt="GitLens Git Blame 1 - Usage" >

#### Git blame current line
<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/current-line-blame.png" alt="GitLens Git Blame 2 - Usage" >

#### Git blame status bar
<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/status-bar.png" alt="GitLens Git Blame 3 - Usage" >

:arrow_down: [Download GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

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

<img width="100%" style="width:100%" src="https://i.postimg.cc/8cSYsX41/html-boilerplate-1-0-3.gif" alt="HTML Boilerplate - Usage" >

:arrow_down: [Download HTML Boilerplate](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0imnpm1svuyfwytp9nvq.png)

:arrow_down: [Download HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

### 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.

<img width="100%" style="width:100%" src="https://citw.dev/_next/image?url=%2fposts%2fimport-cost%2f1quov3TFpgG2ur7myCLGtsA.gif&w=1080&q=75" alt=I"Import Cost - Usage" >

:arrow_down: [Download Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

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

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/ritwickdey/vscode-live-server/428e01caf02bfa7ee75741df0f02fc9d2b5b0999/images/Screenshot/vscode-live-server-animated-demo.gif" alt="Live Server - Usage" >

:arrow_down: [Download Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

### 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.

<img width="100%" style="width:100%" src="https://user-images.githubusercontent.com/1908863/28495106-30b3b15e-6f09-11e7-8eb6-ca4ca001ab15.png" alt="Markdown Preview Enhanced - Usage" >

:arrow_down: [Download Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.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 }
```

<img width="100%" style="width:100%" src="https://i.giphy.com/iaHeUiDeTUZuo.gif" alt="Path Intellisense - Usage" >

:arrow_down: [Download Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98op25c50q91ochd9w65.png)

:arrow_down: [Download Prettier - Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

### 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](https://raw.githubusercontent.com/alefragnani/vscode-project-manager/61579bc1f6ceb0c9f6232f7c77b248c19bf98dc5/images/vscode-project-manager-side-bar.png)

:arrow_down: [Download Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

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

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/Huachao/vscode-restclient/master/images/usage.gif" alt="REST Client - Usage" >

:arrow_down: [Download REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)

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

<img width="100%" style="width:100%" src="https://user-images.githubusercontent.com/16381287/27996497-05825060-64b1-11e7-8f1c-7a827b9f0a6f.gif" alt="Trailing Spaces - Usage" >

:arrow_down: [Download Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

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

<img width="100%" style="width:100%" src="https://image.ibb.co/dysw7p/insert_log_message.gif" alt="Turbo Console Log - Usage" >

:arrow_down: [Download Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)

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

<img width="100%" style="width:100%" src="https://gitlab.com/versionlens/vscode-versionlens/-/raw/master/images/faq/show-releases.gif" alt="Version Lens - Usage" >

:arrow_down: [Download Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)

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

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/angular/vscode-ng-language-service/main/demo.gif" alt="Angular Language Service - Usage" >

:arrow_down: [Download Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)

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

<img width="100%" style="width:100%" src="https://miro.medium.com/max/1400/1*nSYdau-OFSbwL2XV3q1QHA.gif" alt="ES7+ React/Redux/React-Native snippets - Usage" >

:arrow_down: [Download ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-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.

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/microsoft/vscode-docker/22ac7d0af4fd2ce572ee7e87bde125733add42f8/resources/readme/docker-view-context-menu.gif" alt="Docker - Usage" >

:arrow_down: [Download Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-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!).

<img width="100%" style="width:100%" src="https://code.visualstudio.com/assets/docs/azure/kubernetes/create-manifest.gif" alt="Kubernetes - Usage" >

:arrow_down: [Download Kubernetes](https://marketplace.visualstudio.com/items?itemName=ms-kubernetes-tools.vscode-kubernetes-tools)

## 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
}

```


## 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
- :computer: [GitHub](https://github.com/IvanSimeonov)
- :iphone: [LinkedIn](https://www.linkedin.com/in/ivannicksimeonov/)
- :coffee: [Buy Me A Coffee](https://www.buymeacoffee.com/ivssim)