VS Code Setup for Frontend Devs

Introduction
Theme
Icons
Extensions
Settings
Conclusion
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.

⬇️ 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.

⬇️ 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.

⬇️ Download Auto Rename Tag

Auto Close Tag

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

⬇️ 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.

⬇️ 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

⬇️ Download CSS Peek

DotENV

Syntax Highlighting support for Environment (.env) Files

⬇️ 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.

⬇️ 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.

⬇️ 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

Worktrees

Git blame file

Git blame current line

Git blame status bar

⬇️ Download GitLens

HTML Boilerplate

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

⬇️ 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.

⬇️ 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.

⬇️ Download Import Cost

Live Server

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

⬇️ 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.

⬇️ 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 }

⬇️ 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.

⬇️ 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.

⬇️ Download Project Manager

REST Client

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

⬇️ Download REST Client

Trailing Spaces

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

⬇️ Download Trailing Spaces

Turbo Console Log

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

⬇️ Download Turbo Console Log

Version Lens

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

⬇️ Download Version Lens

Angular Language Service

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

⬇️ Download Angular Language Service

ES7 React Redux React Native snippets

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

⬇️ 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.

⬇️ 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!).

⬇️ 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

}

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.