DEV Community

Cover image for Awesome VSCode extensions for a better coding experience [ Part 2 ]
Hyperloop007
Hyperloop007

Posted on

Awesome VSCode extensions for a better coding experience [ Part 2 ]

Imagine yourself typing all the HTML boilerplate code when you decided to make a new project or imagine not being able to recall the name of that single property in css and searching the web for it. Why am I talking about all this? It's obvious because this kind of stuff would really suck. So, that brings us to the wonderful extensions that we have in vscode made by a lot of people and you can use them for free.

What are vscode extensions anyway?

VSCode extensions let you add debuggers and various tools to your environment and works through various custom settings that the extensions bring with them.

VSCode extensions are a great way to reduce your workload and make it easy for you to write your code and format it. You can even create your own vscode extensions but we won't talk about it here. There are a lots of extensions available on vscode as of today but I will mention some of which I find really useful.

1. ES7 React/Redux/GraphQl/React-Native Snippets:

This extension right here is something else altogether 🤯, it consists of such a wide variety of code snippets, and yes for all the technologies mentioned in the title itself. If you really want to get all your work done quicker do check this one out.

Some snippets:

imp -> import moduleName from 'module'

imrse -> import React, { useState, useEffect } from 'react'

graphql -> import { compose, graphql } from react-apollo'

And not only these but it also provides snippets for react components:

rafce -> ( will give you 👇 )

import React from 'react'

const $1 = () => {
  return <div>$0</div>
}

export default $1
Enter fullscreen mode Exit fullscreen mode

and a lot lot more...
Check for the link at the end of the post.

2. HTML Snippets:

HTML snippets extensions is one of the most helpful extension as provides HTML5 tags, colorization to HTML tags and also various snippets. Noe it's functionality has been absorbed into the VSCode main HTML extension. But in any case this something really helpful.

You just have to type the tag name and press tab and it generates the tag for:

button (press tab) -> <button></button>

button.btn#btn-round (press tab) -> <button class="btn" id="btn-round"></button>

Image description

Check for the link at the end of the post.

3. JavaScript ES6 Code Snippets:

As we have been seeing above, this one is not any different other than the fact that extension provides snippets for javascript and some really helpful one's at that. Do check it out.

Here are some helpful snippets:

fre -> array.forEach(currentItem => {})

fof -> for(const item of object) {}

cas -> console.assert(expression, object)

clg -> console.log(object)

Image description

Check for the link at the end of the post.

4. Live Sass Compiler:

Here's a really amazing extension that can convert sass/scss into css and on top of that it even goes on and supports live browser reload. Generally there are other ways to compile sass/scss into css like:

sass --watch input.scss output.css

What the command above will do is, it will watch your sass/scss input file and convert into a css output file. Here, input.scss is the name of input file and output is the name of the resultant css file.

But Live Sass Compiler changes it all with just a single click sass/scss compiling initiation with custom settings. You just have to create a sass/scss file and click the button in bottom right saying (Watch Sass).

Image description

Here are my settings for scss compilation, open settings and paste this piece of code in settings.json file:

"liveSassCompile.settings.formats": [
    {
         "format": "expanded",
         "extensionName": ".css",
         "savePath": "/css"
    },
    {
         "format": "compressed",
         "extensionName": ".min.css",
         "savePath": "/css"
    }
],
"liveSassCompile.settings.generateMap": false,
Enter fullscreen mode Exit fullscreen mode

Check for the link at the end of the post.

5. Markdown Preview Enhanced:

Markdown Preview Enhanced is an extension that gives you the ability to look at the preview at your markdown code, and you don't even have to switch between vscode and browser for it. The preview window appears right beside the .md file with just a click or a shortcut ( cmd-k v or ctrl-k v ).

It looks something like this:

Image description

To explore more and download these extensions visit here:

<- Part 1 Visit part 1 of the post here.

Discussion (3)

Collapse
azlan_syed profile image
Azlan-Syed

well gonna learn js and become a web dev thanks for the extensions

Collapse
turry profile image
Turry

Maybe rephrase the title to “for web development” xD but very cool article, I’ll bookmark this for when I start learning web development

Collapse
hyperloop profile image
Hyperloop007 Author

Come to think of it, "for web development" makes more sense 😅