Setup VS Code for Designer and Front-end Developers
Tags: vscode, productivity, performance
Published: 2021-08-30 04:11:27

**VS Code** is one of the most popular, free, and favorite code editors among all the others available in the market.

VS Code has a vast set of features and customization options and tons of extensions.

I will present to you my code editor configuration and settings for the work.

In this article, I will share with you how to customize the VS Code for Front-end developers and designers.

`Steps:`

-   Installation
-   Set Color theme, Font and File Icon Theme
-   Tools & Languages(Lang Highlighter and Autocomplete)
-   Install extensions/plugins
-   Keybindings & Shortcuts

## **Installation**

Download and install VS Code from Official website: [https://code.visualstudio.com/Download](https://code.visualstudio.com/Download)

The default VS Code looks simple, neat, and clean.

![](https://designdrastic.com/uploads/cke/default_1596691559.png)

**How to open a** **project in VS Code.**

-   Open the terminal/cmd
-   Navigate to the project directory
-   Run command `code .`

Next, we'll set up the color theme, font, and theme icons.

## 🎨 **Color Theme**

One of my all-time favorite color themes is [Atom's One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme).

**Installation:**

-   Press Ctrl + P and type the command `ext install zhuangtongfa.Material-theme`
-   Or press the Ctrl + Shift + X and search for the color theme **One Dark Pro**

My VS Code One Dark Pro theme Screenshot ==>

![](https://designdrastic.com/uploads/cke/colortheme_1596692958.png)

Looks great, isn't it?

The other color themes which I liked…

-   [**Material Theme**](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) **Palenight**
-   [**Dracula Official**](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula) **Dracula**

![](https://designdrastic.com/uploads/cke/material-theme_1596716507.png)

Material Theme(Palenight)

![Dracula theme](https://designdrastic.com/uploads/cke/dracula-theme_1596716532.png)

Dracula Theme

## 🚀 **Fonts**

The most important thing after the theme is font. The proper selection of font will give you a more decent, elegant & modern look and feel.

Use the **Programming Monospaced** fonts(which supports ligatures) for development purposes.

Currently, I am using **Fira Code** which also supports the ligatures.

Fira Code Installation

- Download the font family from Google Fonts: [https://fonts.google.com/specimen/Fira+Code](https://fonts.google.com/specimen/Fira+Code) extract and install it.

Now, set the Fira Code as VS Code font.

-   Open the settings(Ctrl 	+ ,) and in the search section enter **Editor: Font Family** and add the first value as ‘Fira Code’ inside the family list.

![](https://designdrastic.com/uploads/cke/firacode_1596694925.png)

-   You can also set the font family in the **settings.json**


```javascript
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
```

Next, we will enable ligatures.

`ligatures supports will convert the fonts into symbols`

**Default fonts**

![](https://designdrastic.com/uploads/cke/font-symbols_1596694343.png)

Default Symbols

**Font ligatures**

![](https://designdrastic.com/uploads/cke/font-ligatures_1596694511.png)

ligatures supported symbols

To enable ligatures you need to enable the settings from the settings.json file.

Open the settings(ctrl + p) & search settings.json and open the file.

Then add this line

```javascript
"editor.fontLigatures": true,
```

Here is my **settings.json** file

```javascript
{
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "eq-material-theme-icons",
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "workbench.tree.indent": 16,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.tabSize": 2,
    "editor.lineHeight": 26,
    "explorer.confirmDragAndDrop": false,
    "editor.fontSize": 15,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.cursorBlinking": "smooth",
    "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.fontLigatures": true,
    "sync.gist": "",
    "sync.autoUpload": true,
    "sync.autoDownload": true,
    "sync.removeExtensions": false,
}
```

The other monospace programming fonts you can use that supports the ligatures are…

-   [**Cascadia Code**](https://github.com/microsoft/cascadia-code)
-   [**Hasklig**](https://github.com/i-tu/Hasklig)
-   [**JetBrains Mono**](https://www.jetbrains.com/lp/mono/)
-   [**Victor Mono**](https://rubjo.github.io/victor-mono/)
-   [**Iosevka**](https://github.com/be5invis/Iosevka)

## 🎠 **File Icons**

File icons are great. Using file icons to identify & differentiate between the file and folders and file types.

Currently, I am using the [**Material Theme Icons**](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons)

To install the File icon(material theme icons)

-   Press the ctrl + p and type command `ext install Equinusocio.vsc-material-theme-icons`
-   Also, you can search and install the File icon theme from extensions.

![](https://designdrastic.com/uploads/cke/file-icons_1596697500.png)

Other file icon themes are…

-   [**vscode-icons**](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
-   [**Material Icon Theme**](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
-   [**VSCode Great Icons**](https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons)

### **Tools and Languages**

VSCode has varieties of tools, compilers, highlighting, formatters, etc…

We will install some of them to enhance the development speed and performance.

-   [**SASS**](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented) **(**Ctl + P & type command `ext install Syler.sass-indented`**)**  
    Useful for SASS syntax highlighting, Autocomplete & formatter.
-   [**Live Sass Compiler**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)  
    Compile Sass or Scss to CSS in realtime with a live browser reload.

![](https://designdrastic.com/uploads/cke/sass-compiler_1596699536.gif)

-   [**language-stylus**](https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus)  
    Language Highlighting for Stylus, Color preview,  
    Syntax highlighting  
    Symbols provider  
    Completion for selectors, properties, values, variables, functions, etc.

![](https://designdrastic.com/uploads/cke/stylus_1596699095.gif)

-   [**ES7 React/Redux/GraphQL/React-Native snippets**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)  
    ES7 syntax and JS/React Snippets
-   [**VUE**](https://marketplace.visualstudio.com/items?itemName=jcbuisson.vue)  
    Syntax Highlighting for Vue js
-   [**Vutur**](https://marketplace.visualstudio.com/items?itemName=octref.vetur)  
    Vue tooling for VS Code

### **Install Extensions/Plugins**

We will install the most useful and popular plugins alphabetically.

-   [**Auto Rename Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) **(**3M+ downloads**)**  
    Auto rename paired HTML/XML tag  
    `Commnd: ext install formulahendry.auto-rename-tag`

![](https://designdrastic.com/uploads/cke/autorenametag_1596699932.gif)

-   [**Auto Close Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)**(**3M+ downloads**)**  
    Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text  
    `command: ext install formulahendry.auto-close-tag`  
    

![](https://designdrastic.com/uploads/cke/autoclose_1596700177.gif)

-   [**AutoFileName**](https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename)  
    Autocomplete file names  
    `command: ext install JerryHong.autofilename`

![](https://designdrastic.com/uploads/cke/autocomplete_1596705331.gif)

-   [**Beautify**](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)**(**5M+ downloads**)**  
    Beautify `javascript`, `JSON`, `CSS`, `Sass`, and `HTML` in Visual Studio Code.  
    `command: ext install HookyQR.beautify`
-   [**Bracket Pair Colorizer**](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)**(**3.4M+ downloads**)**  
    Colorize the matching brackets.  
    `command: ext install CoenraadS.bracket-pair-colorizer`

![](https://designdrastic.com/uploads/cke/bracketpair_1596704889.png)

Bracket Pair Colorizer

-   [**Bookmarks**](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) **(**1M+ downloads**)**  
    This extension is used to mark the point on the file and jump to them.  
    `command: ext install alefragnani.Bookmarks`

![](https://designdrastic.com/uploads/cke/bookmark_1596705530.png)

-   [**Color Highlight**](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) **(**1.1M+  downloads**)**  
    Highlight colors in VSCode  
    `command: ext install naumovs.color-highlight`

![](https://designdrastic.com/uploads/cke/color-highlight_1596705850.png)

-   [**Color Info**](https://marketplace.visualstudio.com/items?itemName=bierner.color-info) **(**320k+ downloads**)**  
    Provides quick information about CSS colors  
    `command: ext install bierner.color-info`
-   [**CSS Peek**](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) **(**1M+ downloads**)**  
    Allow peeking to CSS ID and class strings as definitions from Html files to respective CSS. Allows peek and goto definition.  
    Hover over the class name to display the CSS properties.  
    `command: ext install pranaygp.vscode-css-peek`

![](https://designdrastic.com/uploads/cke/css-peek_1596706314.gif)

-   [**DotENV**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)**(**1.1M+ downloads**)**  
    Syntax for .env files  
    `command: ext install mikestead.dotenv`
-   [**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) **(**10M+ downloads**)**  
    Integrates ESLint JavaScript into VS Code.  
    `command: ext install dbaeumer.vscode-eslint`
-   [**HTML CSS Support**](https://marketplace.visualstudio.com/search?term=html&target=VSCode&category=All%20categories&sortBy=Relevance)  
    - CSS support for HTML  
    `command: ext install ecmel.vscode-html-css`
-   [**htmltagwrap**](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)  
    Wraps selected code with HTML tags  
    `command: ext install bradgashler.htmltagwrap`

![](https://designdrastic.com/uploads/cke/htmltagwrap_1596712676.gif)

-   [**HTML snippets**](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)  
    HTML5 tag snippets  
    `command: ext install abusaidm.html-snippets`
-   [**Highlight Matching Tag**](https://designdrastic.com/article/ext install vincaslt.highlight-matching-tag)  
    Highlight opening and closing brackets.  
    `command: ext install vincaslt.highlight-matching-tag`

![](https://designdrastic.com/uploads/cke/highlight_1596707500.gif)

-   [**IntelliSense for CSS class names in HTML**](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)  
    CSS classname auto completion  
    `command: ext install Zignd.html-css-class-completion`

![](https://designdrastic.com/uploads/cke/intellisensecss_1596708540.gif)

-   [**Import Cost**](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)  
    Display import/require file size in the editor itself.  
    `command: ext install wix.vscode-import-cost`

![](https://designdrastic.com/uploads/cke/importcost_1596707748.png)

-   [**indent-rainbow**](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)  
    Colorize indentation  
    `command: ext install oderwat.indent-rainbow`

![](https://designdrastic.com/uploads/cke/indent-rainbow_1596707878.png)

-   [**Image Preview**](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)  
    Show image preview in CSS file on hover  
    `command: ext install kisstkondoros.vscode-gutter-preview`
-   [**JavaScript (ES6) code snippets**](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) (3.8M+ downloads)  
    Code snippets for ES6  
    `command: ext install xabikos.JavaScriptSnippets`
-   [**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)  
    Launch local dev server files in browser with live reload & update the content without manual refreshing  
    `command: ext install ritwickdey.LiveServer`

![](https://designdrastic.com/uploads/cke/live-serve_1596708927.gif)

-   [**Prettier - Code formatter**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)**(**7.7M+ downloads**)**  
    Code formatter  
    `command: ext install esbenp.prettier-vscode`
-   [**Peacock**](https://marketplace.visualstudio.com/search?term=peaco&target=VSCode&category=All%20categories&sortBy=Relevance)  
    Customize workspace color  
    `command: ext install johnpapa.vscode-peacock`

![](https://designdrastic.com/uploads/cke/peacock_1596710143.png)

-   [**Path Intellisense**](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)**(**3.3M+ downloads**)**  
    File name Autocompletes  
    `command: ext install christian-kohler.path-intellisense`

![](https://designdrastic.com/uploads/cke/path-intellisense_1596710319.gif)

-   [**Settings Sync**](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)  
    Sync settings, plugins, keybindings, themes, icons, etc… using Github gist.  
    `command: ext install Shan.code-settings-sync`
-   [**Turbo Console Log**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)  
    Write meaningful log messages easily and fast.  
    `command: ext install ChakrounAnas.turbo-console-log`

![](https://designdrastic.com/uploads/cke/turbo-console-log_1596712204.gif)

-   [**TabNine**](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)  
    All language auto compiler  
    `command: ext install TabNine.tabnine-vscode`

**You can also configure the settings text file.**

### 🌈 **Myy configuration**

- **settings.json**

```javascript
{
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "eq-material-theme-icons",
    "workbench.editor.highlightModifiedTabs": true,
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "workbench.tree.indent": 16,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.tabSize": 2,
    "editor.lineHeight": 26,
    "explorer.confirmDragAndDrop": false,
    "editor.fontSize": 15,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.cursorBlinking": "smooth",
    "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.fontLigatures": true,
    "sync.gist": "",
    "sync.autoUpload": true,
    "sync.autoDownload": true,
    "sync.removeExtensions": false,
}
```

**** More frequent and useful shortcuts(**keybinding**)**

| Key binding / Shortcuts | Function / Actions |
| -------- | -------- |
| Alt + Z | Toggle Word Wrap |
| Ctrl + D | Select the Word and matched words |
| Ctrl + , | Open Settings |
| Ctrl + \` | Open Terminal |
| Ctrl + P | Open file explorer/Execute commands |
| Ctrl + Shift + P | Command Palette |
| Ctrl + Shift + (Left/Right) Arrow | Select the Word |
| Alt + Arrow(up/down) | Move the line to up or bottom |
| Alt + Shift + (Up/Down) Arrow | Copy the lines for multiple edits. |
| Ctrl + / |To comment uncomment |
| Ctrl + N | New tab |
| Ctrl + F | Find |
| Ctrl + Shift + T | Reopen the previous tab |
| Ctrl + Tab & Ctrl + Shift + Tab | Switch the tab |

**VSCode Keyboard shortcuts for Linux ==>** [https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)

**VSCode Keyboard shortcuts for Windows ==>** [https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)

**VSCode Keyboard shortcuts for MacOS ==>** [https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)

Design drastic post => https://designdrastic.com/article/setup-vs-code-for-designer-and-front-end-developers

**Thanks for reading. I hope this will help you to improve the performance, speed, and productivity of your editor.**