My VSCode setup for Front-End development

With time Visual Studio Code has evolved into the go to editor for almost all sorts of development activities. What makes it so successful is its bare bones nature coupled with its extremely rich extensions ecosystem.

These extensions might range from providing simple text transformations, to setting up very complex build systems. I am a Front-end developer, and here I share with you some extensions that I use on with my VSCode installation.

Disclaimer: This is a front end specific post and by no means a one size suits all list.

THEMES:

Here are some themes to jazz up your editor.

Beautiful UI

A set of 32 beautiful themes. My favourite is Eighties Dark. Find it here

Super One Dark

A simple dark theme with great syntax highlighting. No frills. Get it here.

Surprisingly, that is all in the themes category. I am not a theme junkie myself, and i’ve stuck with these two for a long time. However, themes are a very subjective topic and I encourage you to experiment. You can bet on these two if you’re looking to get setup quickly though.

EDITING / CODE :

Visual Studio Intellicode:

Microsoft built AI-Assisted coding. You’ll see a marked difference in the completions with this one installed. Find it here.

Lorem Ipsum:

Generates and inserts Lorem Ipsum texts. This is for when you want to insert text anywhere. It could be to test how paragraphs look, long texts or just fillers until you get the actual texts. It can generate lines and paragraphs. Check this one out here.

Live Server:

This one launches a development server for your static/dynamic sites. No setup needed. It has the auto refresh feature which makes development a breeze. This one is an absolute essential one to have. Find it here.

JavaScript (ES6) code snippets:

A snippet extension and in my opinion the best one. Get it here.

Import Cost:

This one is a very popular one and I’m sure a lot of you are already using this. It displays the size of your module imports right next to the import statements. This one enforces some good code practices implicitly because it encourages you to import specific functions ( and structure your library in that fashion ) rather than import a whole namespace, and only use one function. Pretty useful. Get it here.

ES Lint:

No development is complete without a good linter. Fortunately, ESLint and VSCode are a match made in heaven. It takes your project’s .eslintrc and displays squigglys everywhere there is a violation. In addition to that it is very highly configurable. Do take a look here.

EditorConfig for VSCode:

Every company, project and team has their own code style guide. Some use 2 spaces, some use tab characters, some have a newline at the end of the file, some don’t. The problem arises when you want to enforce this across the team. Fortunately, we have .editorconfig created by these awesome guys https://editorconfig.org/. Just have a .editorconfig file at the project root, and this extension and it will automatically enforce the code style in your editor of choice (in our case, VSCode). Get it here.

Bracket Pair Colorizer 2:

Navigating nested if-else, loops or functions? Your head hurts from trying to figure out where a block starts and where it ends? Fear not, Bracket pair colorizer 2 is here. It colours brackets from different blocks levels in the same colour, and joins them with an indent-guide so you can tell precisely what is inside these blocks. Check this out here.

Bookmarks:

As the name says this one is used to add landmarks in code. It makes jumping around a little more easier as you can move between precise lines / locations in the code with simple keystrokes. Get it here.

.gitignore Generator:

An absolute Godsend for working with git. As the name says, it generates .gitignore files. The differentiator however is that it has inbuilt templates for .gitignores; i.e you can generate for React projects, Angular, for Mac-OS etc ( remember those pesky .DS-Store files ? ). It automagically includes great default folders / files for each project type. You will love it. Find it here.

Gitlens — Git Supercharged:

Gitlens is that what is missing from the default VSCode git features. It has too many things going for it for me to list it down here. Check all of those out here.

Auto Import:

This works when you’re working with Typescript / TSX. It Automatically finds, parses and provides code actions and code completion for all available imports. Get this here.

Angular Language Service:

Indispensable if you’re working with Angular. It provides completions, Quick Info, Go to definition and much more for your angular projects. A must have. Find it here.

Angular Snippets by John Papa:

Another snippet extension. This time for angular projects. Has a ton of useful snippets. Take a look here.

FONTS:

Cascadia Code:

A monospaced font from Microsoft that looks absolutely fantastic. Take a look.

IBM Plex Mono:

Another monospaced font. It is not as curvy as the Cascadia. It does look fantastic while being very legible. Screenshot.

Others:

Some other fonts that I use are the following:

• Anonymous Pro
• Monoid
• Operator Mono
• PT Mono
• Space Mono
• Ubuntu Mono

All these fonts support ligatures.

BONUS:

If you work with Dart Lang, ( I work with Angular Dart a lot ) take a look at the Dart Extension.

CONCLUSION:

There it goes. Some stuff that I use on a daily basis with my favourite editor. This, however, is only half the picture. The other half is how you have your workflows set up, your custom snippets, custom key-bindings and editor settings. That is a whole another topic which I might tackle at a later point.

Do let me know if you think I missed a really awesome one.

Cheers !