
I copied it from Wes Bos in one of his React & GraphQL lessons. If you wish yours to look like this example, copy and paste the following snippet in your settings.json "lors":, 5. I however customized my own to follow different shades of grey. The default indentation setting colors the indentation following a rainbow scheme. This extension colorizes the indentation in front of your text alternating four different colors on each step. However, if you are a big fan of ligatures, you can add them using this library. The well renowned font Operator Mono does not come with native support for ligatures. "editor.fontFamily": "Fira Code","editor.fontLigatures": true Source: This is how you change font in VSCode after installing it. You can try Fira Code, it’s just awesome and open source.


Here are 6 of the best fonts that support ligatures (according to Coding with Ligatures You can make your editor look better with awesome fonts along with ligatures. Writing style makes reading easy and convenient. Did you know you could center the layout to help you read your code as if you were in a PDF viewer? This will really help you focus on a function or study someone else’s code. You may already know the Zen Mode View, also known as Distraction Free View (for those coming from Sublime Text) where everything (except code) is removed to give you real intimacy with your code editor. This will help you find your files easily in the explorer. The big catalog of icons designed integrates smoothly with the theme making it more beautiful. Material Theme Icons are just an awesome alternative to replace the default VSCode icons. Imagine an epic theme coupled with epic icons. Your editor almost looks flat and seamless, going from the integrated tools to the text editor. I think the material theme is the closest thing to writing with a pen and a paper within the editor (especially when using the no contrast variant theme). This is straight up the beast in VS Code themes. The following Visual Studio Code tips will help you walk out of all your coding sessions looking like this: Making it beautiful and friendly If it really looks good and friendly, you’ll love the time spent with it. For this reason, I’ll try to be unbiased as much as possible. As we know the JavaScript ecosystem is very big and still growing bigger.

I’ve curated a little collection of tips, tricks and extensions, and filtered them to keep only both the most rare and most useful ones to a modern web developer. By Dylan Tientcheu Here are some super secret VS Code hacks to boost your productivityĬoding as a hobbyist, professional or even a once-in-a-month developer, you must know that having smart and sharp tools is vital to anyone willing to put in maximum productive hours while working.
