Setup VS Code for Designer and Front-end Developers

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

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

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.

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 ==>

Looks great, isn't it?

The other color themes which I liked…

• 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.

Fira Code Installation

• 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(Ctrl + ,) and in the search section enter Editor: Font Family and add the first value as ‘Fira Code’ inside the family list.

• You can also set the font family 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

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

"editor.fontLigatures": true,

Here is my settings.json 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 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 development speed and performance.

• 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 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

You can also configure the settings text file.

🌈 Myy configuration

• 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)**

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

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

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.

Comments

[Martin]

Very interesting, thank you. One aspect that was truly notable was the level of transparency in pricing. digital design agency fivecube.agency/ offers detailed and specific information about the cost of their service, which led to a sense of trust. Having a comprehensive understanding of what to expect regarding pricing helped me to plan and budget effectively, which is important to any business endeavor.