Hello everyone!

In this article, I will talk about some super cool VS Code extensions related to frontend development. Of course, they are not necessary to write code but are extremely useful when used.

1- CSS Flexbox Cheatsheet

This extension lets you open a flexbox cheat sheet directly in the VS Code. You can open it in a different tab or just take a quick glance at the info while hovering. There is also an interactive playground that you can try different scenarios.

2- CSS Peek

The extension does symbol definition tracking for css selectors (classes, IDs and HTML tags).

You can load the CSS file inline and make quick edits right there, jump directly to the file, or see the definition in a hover over the symbol.

3- EJS language support

This extension provides syntax highlighting for EJS documents and includes javascript autocompletion. Very useful if working with EJS documents.

4- ES7 React/Redux/GraphQL/React-Native snippets

This VS Code extension provides a bunch of abbreviations for JavaScript and React/Redux code that we use all the time.

One of these are:

imp→ import moduleName from 'module'

nfn→ const functionName = (params) => { }

redux→ import { connect } from 'react-redux'

rafce→

import React from 'react'

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

export default $1

5- HTML CSS Support

With this extension, you can have HTML id and class attribute completion for Visual Studio Code. It supports linked and embedded style sheets and can validate CSS selectors on demand.

It is possible to see a list of id and class attribute suggestions via ctrl + space.

6- JSX HTML

This extension brings useful shortcuts for HTML tags while writing React applications.

article <article></article>

h3 <h3></h3>

div <div></div>

button <button></button>

7- Quokka.js

Quokka.js is a tool for JavaScript / TypeScript that lets you see the output of your code right next to your code.

8- Sass

This extension provides indented Sass syntax highlighting and autocompletion. It also enables you to format your Sass code easily.

9- Svg Preview

While working with SVG files, sometimes these files' names are vague and it is hard to decide which SVG file represents what. At this point, Svg Preview comes to your help. It helps us to see the shape of SVG right in VS Code and live edit them if that is what we want.

10- vscode-styled-components

Syntax highlighting and IntelliSense for styled-components.

Thanks for your time.

See you in another post!