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
}
export default $1
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>
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)
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).
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,
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:
To explore more and download these extensions visit here:
Top comments (0)