Setup VS Code for Designer and Front-end Developers

Visual Studio Code is one of the most popular, free, and favorite code editor among all the other available in the market.

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

According to Stack-overflow survey 2019 VS Code is the most popular and used code editor.

I will show you my 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
• Setup Color theme & Font & File Icon Theme
• Tools & Languages(Lang Highlighter and Autocomplete)
• Install extensions/plugins
• Keybindings & Shortcuts

Installation

Download and install Visual Studio Code from Official website: https://code.visualstudio.com/Download

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

How to open a project in VS Code.

• Open the terminal/cmd
• Navigate to 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 theme is Atom's One Dark Pro.

Installation:

• Press Ctrl + P and type 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 ==>

Looks great, isn't it?

The other color themes which I personally like…

• Material Theme Palenight
• Dracula Official Dracula

Material Theme(Palenight)

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.

First, install the Fira Code font

• Download the font family from Google Fonts: https://fonts.google.com/specimen/Fira+Code extract and install it.

Now, set the Fira Code as VS Code font.

• Open the settings(press ctrl + ,) find the Editor: Font Family and add the first value ‘Fira Code’ inside the family list.

• You can also set the font in the settings.json

"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

Default Symbols

Font ligatures

ligatures supported symbols

By default, VS Code disabled the ligatures support. To enable ligatures you need to edit Settings JSON file.

Press the ctrl + p & type settings.json and open the file.

Then add this line

"editor.fontLigatures": true,

Here is my settings.json file (press ctrl + p and type settings.json to open the file)

{
    "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
• Hasklig
• JetBrains Mono
• Victor Mono
• 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

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.

Other beautiful file icon themes are…

• vscode-icons
• Material Icon Theme
• VSCode Great Icons

Tools and Languages

VSCode has varieties of tools, compilers, Highlighting, Formatters, etc…

We will install some of them to enhance the speed.

• SASS (**Ctl + P & type command ext install Syler.sass-indented)**
  Useful for SASS syntax highlighting, Autocomplete & formatter.
• Live Sass Compiler
  Compile Sass or Scss to CSS in realtime with a live browser reload.

• language-stylus
  Language Highlighting for Stylus, Color preview,
  Syntax highlighting
  Symbols provider
  Completion for selectors, properties, values, variables, functions, etc.

• ES7 React/Redux/GraphQL/React-Native snippets
  ES7 syntax and JS/React Snippets
• VUE
  Syntax Highlighting for Vue js
• Vutur
  Vue tooling for VS Code

Install Extensions/Plugins

We will install the most useful and popular plugins alphabetically.

• Auto Rename Tag (**3M+ downloads)**
  Auto rename paired HTML/XML tag
  Commnd: ext install formulahendry.auto-rename-tag

• 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

• AutoFileName
  Autocomplete file names
  command: ext install JerryHong.autofilename

• Beautify(**5M+ downloads)**
  Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.
  command: ext install HookyQR.beautify
• Bracket Pair Colorizer(**3.4M+ downloads)**
  Colorize the matching brackets.
  command: ext install CoenraadS.bracket-pair-colorizer

Bracket Pair Colorizer

• Bookmarks (**1M+ downloads)**
  This extension is used to mark the point on the file and jump to them.
  command: ext install alefragnani.Bookmarks

• Color Highlight (**1.1M+ downloads)**
  Highlight colors in VSCode
  command: ext install naumovs.color-highlight

• Color Info (**320k+ downloads)**
  Provides quick information about CSS colors
  command: ext install bierner.color-info
• 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

• DotENV(**1.1M+ downloads)**
  Syntax for .env files
  command: ext install mikestead.dotenv
• ESLint (**10M+ downloads)**
  Integrates ESLint JavaScript into VS Code.
  command: ext install dbaeumer.vscode-eslint
• HTML CSS Support
  • CSS support for HTML
    command: ext install ecmel.vscode-html-css
• htmltagwrap
  Wraps selected code with HTML tags
  command: ext install bradgashler.htmltagwrap

• 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

• IntelliSense for CSS class names in HTML
  CSS classname auto completion
  command: ext install Zignd.html-css-class-completion

• Import Cost
  Display import/require file size in the editor itself.
  command: ext install wix.vscode-import-cost

• indent-rainbow
  Colorize indentation
  command: ext install oderwat.indent-rainbow

• Image Preview
  Show image preview in CSS file on hover
  command: ext install kisstkondoros.vscode-gutter-preview
• JavaScript (ES6) code snippets (3.8M+ downloads)
  Code snippets for ES6
  command: ext install xabikos.JavaScriptSnippets
• Live Server
  Launch local dev server files in browser with live reload & update the content without manual refreshing
  command: ext install ritwickdey.LiveServer

• Prettier - Code formatter(**7.7M+ downloads)**
  Code formatter
  command: ext install esbenp.prettier-vscode
• Peacock
  Customize workspace color
  command: ext install johnpapa.vscode-peacock

• Path Intellisense(**3.3M+ downloads)**
  File name Autocompletes
  command: ext install christian-kohler.path-intellisense

• Settings Sync
  Sync settings, plugins, keybindings, themes, icons, etc… using Github gist.
  command: ext install Shan.code-settings-sync
• Turbo Console Log
  Write meaningful log messages easily and fast.
  command: ext install ChakrounAnas.turbo-console-log

• TabNine
  All language auto compiler
  command: ext install TabNine.tabnine-vscode

More configuration to increase the development speed.

🌈 Best of my config

• settings.json

{
    "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)**

VSCode Keyboard shortcuts for Linux ==> https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

VSCode Keyboard shortcuts for Windows ==> https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

VSCode Keyboard shortcuts for MacOS ==> https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Thanks for reading. I hope this will help you to increase your speed and productivity.