Mastering VS Code Setup: Optimizing VS Code Configuration for Designers and Front-End Developers

Optimizing Vs Code: Essential tools, extensions, themes, and plugins to elevate speed, productivity, and user experience in VS Code.


Mastering VS Code Setup: Optimizing VS Code Configuration for Designers and Front-End Developers

Visual Studio Code (VS Code) is a leading, free, and preferred code editor in the market. Its extensive feature set, customizable options, and numerous extensions make it a top choice for developers.

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

According to the Stack Overflow Developer Survey of 2019, VS Code is recognized as the most popular and widely used code editor.

In this article, we’ll explore how to customize VS Code specifically for front-end developers and designers. Let’s dive into the steps:

Steps:

Installation

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

The default appearance of VS Code is clean and straightforward.

Opening Projects:

Next, we’ll set up the color theme, fonts, and icon theme.

🎨 Color Theme:

Selecting a color theme is matter of choise. Some of the recommendations are:

Theme Installation:

Screenshot shows Atom’s One Dark Pro customized configurations:

Material Theme(Palenight)

Dracula Theme

🚀 Fonts

I recommend using Fira Code font / monospaced fonts, which supports ligatures. In your settings (press Ctrl + ,), find Editor: Font Family and add ‘Fira Code’ as the first value in the family list.

Enable Ligatures:

Ligatures convert font characters into symbols, enhancing code readability. Enable ligatures by adding “editor.fontLigatures”: true in your settings.json file. Here’s an example of settings.json:

"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
"editor.fontLigatures": true,

Default fonts

Default Symbols

Font ligatures

Sample 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

Utilize file icons to distinguish between files and folders. I recommend using the Material Theme Icons / vscode-icons extension. Install it using Ctrl + P and typing ext install Equinusocio.vsc-material-theme-icons.

Some of the other file icons are:

Tools and Languages

  1. Tools and Languages:

Enhance your productivity by installing these extensions:

Install Extensions/Plugins

Install these useful plugins to boost your productivity:

Bracket Pair Colorizer

🌈 Sample 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,
}

Keyboard Shortcuts for Efficiency: Boost your efficiency with these handy shortcuts:

** More frequent and useful shortcuts(keybinding)

Key binding / ShortcutsFunction / Actions
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

By personalizing your Visual Studio Code environment with these recommendations, you’ll enjoy an optimized coding experience for front-end development and design tasks. Thanks for reading. Happy coding!



Back to guides