Setup VS Code for Designer and Front-end Developers

A set of tools, extension/plugins, themes that you can use setup in VS code to increase your speed, productivity and user experience.

 Yogesh    05 Aug, 2020    71

IMG: 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 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… 

 

🎠 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…

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.

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
    Highlight opening and closing brackets.
    command: ext install vincaslt.highlight-matching-tag
  • 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)

Alt + ZToggle Word Wrap
Ctrl + DSelect the Word and matched words
Ctrl + ,Open Settings
Ctrl + `Open Terminal
Ctrl + POpen file explorer/Execute commands
Ctrl + Shift + PCommand Palette
Ctrl + Shift + (Left/Right) ArrowSelect the Word 
Alt + Arrow(up/down)Move the line to up or bottom
Alt + Shift + (Up/Down) ArrowCopy the lines for multiple edits.
Ctrl + /To comment uncomment
Ctrl + NNew tab
Ctrl + FFind
Ctrl + Shift + TReopen the previous tab
Ctrl + Tab & Ctrl + Shift + TabSwitch the tab

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.


Credits / Resources

  • Marketplace Visual Studio Code: https://marketplace.visualstudio.com/