There are a lot of Code Editors, some are free and some are paid. Among all of them my favorite Code Editor is Visual Studio Code. It's free and has amazing features. I'm using it from the beginning of my web development journey.
Today I'm going to share my favorite Code Editor settings, using for my web development. And I'm going to start with my Code Editor looks. After all look matters.
π¨ Theme:
My most used VS Code theme is Snazzy Operator, currently I'm using this.
This theme is based on hyper-snazzy and optimized for used with the Operator Mono font. I just loveπ this theme.
β Some other themes I used before:
- Oceanic Next - I used Oceanic Next (dimmed bg).
- Remedy - I used Remedy Dark (straight).
β Font:
Another important things for my Code Editor looks. The font I'm using for my Code Editor is JetBrains Mono. It's a free font with ligatures support.
The font ligatures are a new format for fonts that support symbol decorations instead of normal characters like =>, <=.
Before JetBrains Mono, I used Operator Mono. It's also a nice font.
β Some other fonts I used before:
- Operator Mono - Supports ligatures.
- Fira Code - Free & supports ligatures.
- Dank Mono - Paid & supports ligatures.
πππ Do you want to use my settings, I use for my VS Code fonts? In your VS Code press Ctrl + p, type settings.json and open that file. Now replace below properties values with my given values.
{
"workbench.colorTheme": "Snazzy Operator",
"editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 22,
"editor.letterSpacing": 0.5,
"editor.fontWeight": "400",
"editor.cursorStyle": "line",
"editor.cursorWidth": 5,
"editor.cursorBlinking": "solid"
}
π Icons:
File Icons enhance our VS Code Editor looks. Mainly it helps us to differentiate between different files & folders by their given icons. For my VS Code I use two file icons :-
- Material Icon Theme - One of the most popular icon theme for VS Code.
- Material Theme Icons - Currently using this. And I'm using Material Theme Icons Light variant.
π Extensions I Use:
πΉ Auto Rename Tag
Automatically rename paired HTML/XML tag, also works in JSX.
Add entry into auto-rename-tag.activationOnLanguage
, in your settings.json file to set the languages that the extension will be activated. By default, it is ["*"] and will be activated for all languages.
"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
πΉ Bracket Pair Colorizer 2
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
πΉ Color Highlight
This extension styles css/web colors, found in your document.
πΉ CSS Peek
- Peek: Load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
- Go To: Jump directly to the css file or open it in a new editor (F12)
- Hover: Show the definition in a hover over the symbol (Ctrl+hover)
πΉ DotENV
Highlight key, value pairs in .env file.
πΉ ES7 React/Redux/GraphQL/React-Native snippets
This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.
πΉ ESLint
'Linting' tool for VS Code - or Code checking tool.
"Lint, or a Linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs." Wikipedia
πΉ Highlight Matching Tag
Highlight matching opening or closing tags.
Styles I use for this extension:
"highlight-matching-tag.styles": {
"opening": {
"left": {
"custom": {
"borderWidth": "0 0 0 1.5px",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
},
"right": {
"custom": {
"borderWidth": "0 1.5px 0 0",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
}
}
}
πΉ Image preview
Shows image preview in the gutter and on hover.
πΉ Indent Rainbow
This extension colorizes the indentation in front of your text alternating four different colors on each step.
πΉ Live Server
Launch a local development server with live reload feature for static & dynamic pages.
πΉ Prettier
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Set below property value to be true
or add this property into your settings.json file to format code on save.
"editor.formatOnSave": true
πΉ Pug beautify
Pug beautify plugin for VS Code. Press F1 and run the command named Beautify pug/jade to beautify your pug file.
πΉ REST Client
REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
πΉ Settings Sync
Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
πΉ TODO Highlight
Highlight TODO, FIXME and other annotations within your code.
πΉ Version Lens
Shows the latest version for each package in your package.json file.
π Terminal Setup:
I use Windows Operating System. Since I use Git via the command line, I have Git Terminal. And I use this terminal as my integrated terminal. My terminal settings are given below:
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.fontFamily": "FuraMono Nerd Font",
"terminal.integrated.fontSize": 12,
"terminal.integrated.rightClickCopyPaste": true
β Useful VS Code Keyboard Shortcuts:
There are some important keyboard shortcuts, I use in my day to day coding life. These shortcuts enhance my productivity with Visual Studio Code.
Keybinding | Action |
---|---|
Ctrl + P | Go to File, You can move to any file of open solution/folder in Visual Studio code |
Ctrl + ` | Open terminal in VS Code |
Alt + Down | Move Line Down |
Alt + Up | Move Line Up |
Ctrl + D | Move Last Selection To Next Find Match |
Ctrl + Space | Trigger Suggest |
Ctrl + F | Find |
Ctrl + / | Toggle Line Comment |
Ctrl + C | Copy line |
Ctrl + X | Cut line |
Ctrl + V | Paste |
Ctrl + Z | Undo |
Ctrl + Y | Redo |
Shift + Alt + Down | Copy Line Down |
Shift + Alt + Up | Copy Line Up |
Ctrl + Shift + T | Reopen the latest closed window |
Thanks for reading and stay tuned.ππ
Discussion (77)
Ligatures ... Yuck!
I agree 100%. Ligatures remind me of having emojis in you code.
As if it is something bad!
Not like that. If you don't like it then set "editor.fontLigatures": false. It's a personal preference, some people like it, some people not.
ππ... I like ligatures but I'm not fond of it.
I've always felt alone on this
ππ... But this time need not to be fell alone.
Don't you like ligatures?
Personally, I like my code to look like code. I find => to be more readable then the equivalent with ligatures, for example.
Everyone has his own preference, I appreciate your preference. Thanks for your comment.π
Avoid the Auto Rename Tag extension! It is horrific for performance and is definitely slowing everything down on your machine!
Agree on this one...
It also crushes a lot with .erb files in Rails. I disabled it, at least for Rails development.
I have changed the extensions link and info. Please check again. Thanks for your comment.π
Cool, thanks!
Welcomeπ
I have an i7 so it hasn't been a problem for me xD, that extension rules but it needs a bit of optimization.
Check this link:- github.com/formulahendry/vscode-au...
He fixed some issues.
Nice.
Me too, but whenever I tried to save an format an SVG file it crashed every single other extension in VS code.
Googled your problem, It is because of Color Highlight extension.
I appreciate the help, but it was definitely solely because of the auto-rename-tag extension. Even just disabling it on/off was able to reproduce my problem exactly. I may try it again in the future after seeing your link about him addressing the concerns, but for now I'm fine without it.
Thanks!
Welcomeπ
Seconded. Hey, I'm a KID CODER who's quite an idiot when it comes to web dev, and even I recognized the problem :)
I never realized that it causes high cpu load. If you didn't tell me, I might not be know about that. Thanks man.π
One of the best extensions I have used is "Settings sync", this tool is amazing. Now I don't have to worry about which machine I am working on, I can sync all my VS Code extensions via Gist.
Yeah, It's an amazing extensions. It helped me so many times. Thanks for your comment.π
wow thanks so much for the "ligatures for code" graphics
without ligs

with ligs

It's my pleasure. Thanks for your comment.π
What do you think about extension name as "Prettier".
To me it's an important extensions. It's make my code more readable, enforces to a consistent style which helps me not to think about my code to write a particulars way. I missed it out from my extensions list. I'm going to add this now. Thank you.π
Yeah because I use beautify from past but due to certain recommendation i switched to Prettier though I can say my decision is not wrong in any way for choosing prettier over beautify because where beautiful fails Prettier work with full efficiency.
At first I also used 'Beautify' but when I switched to 'Prettier', I'm happy with it.
hello dear Ismile Hossain, great and overwhelming - i appreciate your text it is very very good .
i am happy to read your text - i like it very much. Can you give us more hints to run VSCode or VSCodium on mx-linux:
cf : I use VSCode daily and it is widely used, i am shocked it is not in stable repo. Please add VSCode to the package list.
forum.mxlinux.org/viewtopic.php?f=...
we look forward to hear form you -regards tarifa
Sorryπ. I've no idea about it.
Auto Rename Tag is a nice one π
Happy to know that you find something that helps you.π
These are a good collection of the plugin, which are very useful. I think having more plugin in VS code would hit the performance of the editor, especially when project size is large. I prefer using ES lint and Prettier.
Weird Text Generator was build using the VS code editor. The script file had a lot of Unicode text, ES lint and the Prettier plugin was quite useful.
I tried to use AutoRenameTag, but in a lot of situations it was renaming the wrong closing tag break my code.
And getting it to rename the right tags, when that happened, without disabling the extension was really hard, so I just gave up on it and uninstalled.
Shame, because I really like the concept.
Recently I'm also facing some problems. I don't know why this is happening. Check this link :- github.com/formulahendry/vscode-au...
I don't know it's gonna help you or not.
This is an awesome list! π
After having used Settings Sync for a while (which is based on GitHub Gists), and then deciding to use GitHub Gists for more things in my workflow (managing code snippets, reference notes, etc.), I ended up creating GistPad to make it super easy to create/view/edit/fork gists entirely within VS Code. Iβd be interested to hear if it looks useful for how you use gists as well π
Thanksπ... It seems interesting and useful. I'll definitely try it.
side note: color highlight extension cause bug for live Sass compiler. Here is Github closed issue link: github.com/ritwickdey/vscode-live-...
Thanks for letting us know about this.π
Great setup! I too use JetBrains Mono and the first time I applied it in VS Code I fell in love with it. What a beautiful type it has.
Thank you so muchπ
mille grazie - this is great. AT the moment i am trying to install VSCode into MX-Linux.
I appreciate any and all help.
love to hear from you
Sorryπ. I've no idea about it.
My setup is very close to yours. Would add npm & npm intellissense plugins. And also formatting toggle & gitlens.
Thanks for sharing, didn't know highlight matching tag.
Ohh. Our taste is almost sameπ. I will try your mentioned extensions. Thanks to you also.
Would love to get your feedback on marquee.activecove.com/blog/2/
Thank Ismile Hossain!
That font is really refreshing, thanks for letting us know that.
I love this font too: fontsio.com/winnie-the-pooh-font-f...
Do you use any AI intelligent to code ? ( I use kite engine to code javascript )
No. I don't.
Great post! It is sometimes useful to use Unicode characters. They do not need to be installed and the choice of characters and letters is huge exoticfonts.com/font-changer/
Great write-up. Thank you so much for sharing.
Welcome. Thanks for your comment.π
Adding the rainbow today π
βΊβΊ... Thanks for your comment.π
Nothing on testing? I'm surprised.
I'm not familiar with testing that's why may be. Thanks for your comment.π
Thanks for sharing, I always like seeing other peoples setup.
I made a post about my keyboard shortcut setup a few months back.
Keyboard Driven VSCode
Waylon Walker γ» Nov 19 '19 γ» 3 min read
I also like seeing other peoples setup. Sometimes I spend long time on it. Thanks for your feedback and your post.π
Very insightful article but overusing extensions may not be a good choice for everyone as it makes vs code heavy to run!
Yes, You told an important thing. More extensions make vs code heavy to run, which is not a good choice. We have to always think about it before installing any extensions. Thanks for your valuable comment.π
Nice article. What's the shortcut key to format the file. For example, from plain text to JavaScript format. The shortcut doesn't work.
Has anyone tried?
Are you trying to say "Select language mode"? For select language mode first press 'Ctrl + K' at the same time then press 'M' to see the drop down. (For Windows)
For Mac :- 'Cmd + K' then 'M'. Thanks for your comment.π
Thanks for "Material Theme Icons"! It's so much compact than "Material Icon Theme", love this!
Welcome. Thanks for your comment.π
Thank you so much.
Welcomeπ
Some really good stuff here, thanks for sharing
Welcome. Thanks for your comment.π
the font is really refreshing, thanks for letting us know that.
It's my pleasure. Thanks for your comment.π
best theme IMO marketplace.visualstudio.com/items...
best font IMO github.com/microsoft/cascadia-code
Thanksπ... I will try both.