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…
🎠 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…
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, andHTMLin 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
- CSS support for HTML
- 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.
Top comments (1)
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.