DEV Community

Cover image for My VS Code Setup

My VS Code Setup

Ismile Hossain on February 20, 2020

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 ha...
Collapse
 
albertomontalesi profile image
AlbertoM

Ligatures ... Yuck!

Collapse
 
nerdharder615 profile image
Matt

I agree 100%. Ligatures remind me of having emojis in you code.

Collapse
 
antonmelnyk profile image
Anton Melnyk

As if it is something bad!

Thread Thread
 
iamismile profile image
Ismile Hossain

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.

Collapse
 
iamismile profile image
Ismile Hossain

😁😁... I like ligatures but I'm not fond of it.

Collapse
 
waylonwalker profile image
Waylon Walker

I've always felt alone on this

Collapse
 
iamismile profile image
Ismile Hossain • Edited

😄😄... But this time need not to be fell alone.

Collapse
 
iamismile profile image
Ismile Hossain

Don't you like ligatures?

Collapse
 
albertomontalesi profile image
AlbertoM

Personally, I like my code to look like code. I find => to be more readable then the equivalent with ligatures, for example.

Thread Thread
 
iamismile profile image
Ismile Hossain

Everyone has his own preference, I appreciate your preference. Thanks for your comment.🙂

Collapse
 
nitinreddy3 profile image
Nitin Reddy

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.

Collapse
 
iamismile profile image
Ismile Hossain • Edited

Yeah, It's an amazing extensions. It helped me so many times. Thanks for your comment.🙂

Collapse
 
fontsdiscord profile image
Discord fonts

Incredible post! It is some of the time helpful to utilize Unicode characters. They needn't bother with to be introduced and the selection of characters and letters is enormous. how to change font on twitter

Collapse
 
osde8info profile image
Clive Da • Edited

wow thanks so much for the "ligatures for code" graphics

without ligs
with ligs

with ligs
with ligs

Collapse
 
iamismile profile image
Ismile Hossain

It's my pleasure. Thanks for your comment.🙂

Collapse
 
nelson43520109 profile image
Nelson

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.

Collapse
 
fontchangerguru profile image
fontchangerguru

Thanks for your recommendation and help. It helped me to develop creepy text generator with the VS codes that you provide me.

I've also used some VS plugins that are working fine and are compatible with these VS codes.

Collapse
 
thekarel profile image
Charles Szilagyi

Auto Rename Tag is a nice one 👌

Collapse
 
iamismile profile image
Ismile Hossain

Happy to know that you find something that helps you.🙂

Collapse
 
tarifa10 profile image
tarifa-man

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

Collapse
 
iamismile profile image
Ismile Hossain

Sorry😞. I've no idea about it.

Collapse
 
devgrammer profile image
Abhinav Deep Rastogi

What do you think about extension name as "Prettier".

Collapse
 
iamismile profile image
Ismile Hossain

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

Collapse
 
devgrammer profile image
Abhinav Deep Rastogi

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.

Thread Thread
 
iamismile profile image
Ismile Hossain

At first I also used 'Beautify' but when I switched to 'Prettier', I'm happy with it.

Collapse
 
erikaraujo profile image
Erik Araujo

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.

Collapse
 
iamismile profile image
Ismile Hossain • Edited

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.

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio • Edited

Here my current setup.

demo image

demo image
You can try extension that i use here :
Gitlens
indent-rainbow
Visual Studio IntelliCode
ES6 Snippets
Vetur
Relative Path
Bracket Pair Colorizer 2
Live Server
Path Intellisense

REST Client

And for theme and font, i'm using Mayukai Theme and Iosevka Mayukai Font

Collapse
 
lostintangent profile image
Jonathan Carter • Edited

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 👍

Collapse
 
iamismile profile image
Ismile Hossain

Thanks🙂... It seems interesting and useful. I'll definitely try it.

Collapse
 
anthonywebdev profile image
Anthony R.

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.

Collapse
 
iamismile profile image
Ismile Hossain • Edited

Ohh. Our taste is almost same😊. I will try your mentioned extensions. Thanks to you also.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

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.

Collapse
 
iamismile profile image
Ismile Hossain

Thank you so much🙂

Collapse
 
tarifa10 profile image
tarifa-man

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

Thread Thread
 
iamismile profile image
Ismile Hossain

Sorry😞. I've no idea about it.

Collapse
 
alidhuniya profile image
Ali Hussain Dhuniya

side note: color highlight extension cause bug for live Sass compiler. Here is Github closed issue link: github.com/ritwickdey/vscode-live-...

Collapse
 
iamismile profile image
Ismile Hossain

Thanks for letting us know about this.🙂

Collapse
 
dpashutskii profile image
Dmitrii Pashutskii

It also crushes a lot with .erb files in Rails. I disabled it, at least for Rails development.

Collapse
 
iamismile profile image
Ismile Hossain

I have changed the extensions link and info. Please check again. Thanks for your comment.🙂

Thread Thread
 
dpashutskii profile image
Dmitrii Pashutskii

Cool, thanks!

Thread Thread
 
iamismile profile image
Ismile Hossain

Welcome🙂

Collapse
 
sourishkrout profile image
Sebastian Tiedtke

Would love to get your feedback on marquee.activecove.com/blog/2/

Collapse
 
iamismile profile image
Ismile Hossain • Edited

I never realized that it causes high cpu load. If you didn't tell me, I might not be know about that. Thanks man.🙂

Collapse
 
waylonwalker profile image
Waylon Walker

Thanks for sharing, I always like seeing other peoples setup.

I made a post about my keyboard shortcut setup a few months back.

Collapse
 
iamismile profile image
Ismile Hossain

I also like seeing other peoples setup. Sometimes I spend long time on it. Thanks for your feedback and your post.🙂

Collapse
 
coolscratcher profile image
CoolScratcher

Seconded. Hey, I'm a KID CODER who's quite an idiot when it comes to web dev, and even I recognized the problem :)

Collapse
 
mdhesari profile image
Mohammad Fazel

Very insightful article but overusing extensions may not be a good choice for everyone as it makes vs code heavy to run!

Collapse
 
iamismile profile image
Ismile Hossain

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

Collapse
 
aftabksyed profile image
Aftab Syed

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?

Collapse
 
iamismile profile image
Ismile Hossain • Edited

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

Collapse
 
dpashutskii profile image
Dmitrii Pashutskii

Thanks for "Material Theme Icons"! It's so much compact than "Material Icon Theme", love this!

Collapse
 
iamismile profile image
Ismile Hossain

Welcome. Thanks for your comment.🙂

Collapse
 
sirseanofloxley profile image
Sean Allin Newell

Adding the rainbow today 🌈

Collapse
 
iamismile profile image
Ismile Hossain

☺☺... Thanks for your comment.🙂

Collapse
 
elehas profile image
Lee Sonnenburg

Nothing on testing? I'm surprised.

Collapse
 
iamismile profile image
Ismile Hossain

I'm not familiar with testing that's why may be. Thanks for your comment.🙂

Collapse
 
adisreyaj profile image
Adithya Sreyaj

Agree on this one...

Collapse
 
imthenachoman profile image
IMTheNachoMan

Great write-up. Thank you so much for sharing.

Collapse
 
iamismile profile image
Ismile Hossain

Welcome. Thanks for your comment.🙂

Collapse
 
iamismile profile image
Ismile Hossain

Check this link:- github.com/formulahendry/vscode-au...
He fixed some issues.

Collapse
 
clippingpathexc profile image
Clipping Path exc

Thank you so much.

Collapse
 
iamismile profile image
Ismile Hossain

Welcome🙂

Collapse
 
kingnathanal profile image
William Britton

Some really good stuff here, thanks for sharing

Collapse
 
iamismile profile image
Ismile Hossain

Welcome. Thanks for your comment.🙂

Collapse
 
brandbedesign profile image
Roman Polishuck

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/

Collapse
 
c0dz2r20 profile image
c0dz@r20

the font is really refreshing, thanks for letting us know that.

Collapse
 
iamismile profile image
Ismile Hossain

It's my pleasure. Thanks for your comment.🙂

Collapse
 
victorioberra profile image
Victorio Berra • Edited
Collapse
 
iamismile profile image
Ismile Hossain

Thanks🙂... I will try both.

Collapse
 
nmtriet2007 profile image
MInhTriet

Do you use any AI intelligent to code ? ( I use kite engine to code javascript )

Collapse
 
iamismile profile image
Ismile Hossain

No. I don't.

Collapse
 
lwpthemes profile image
Jimmy Cross

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

 
iamismile profile image
Ismile Hossain

Welcome🙂

 
iamismile profile image
Ismile Hossain

Googled your problem, It is because of Color Highlight extension.

Collapse
 
csquishmallow profile image
Cow Squishmallow

Squishmallows plush toys are here to fill your hearts with love and affection. Squishmallows are cute, cuddly, and ready to join your squad. Made with. squishmallow cow