VS CODE SETUP

EXTENSIONS

Auto Rename Tag

Auto rename paired HTML/XML tag

Bracket Pair Colorizer

A customizable extension for colorizing matching brackets

ES7 React/Redux/GraphQL/React-Native snippets

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

Highlight Matching Tag

Highlights matching closing or opening tag

"highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 3px",
          "borderStyle": "solid",
          "borderColor": "yellow",
          "borderRadius": "5px"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 3px 0 0",
          "borderStyle": "solid",
          "borderColor": "yellow",
          "borderRadius": "5px"
        }
      }
    }
  }

indent-rainbow

Makes indentation easier to read

Live Server

Launch a development local Server with live reload feature for static & dynamic pages

MDX

Provides syntax highlighting and bracket matching for MDX (JSX in Markdown) files.

Prettier - Code formatter

VS Code plugin for prettier/prettier

"editor.formatOnPaste": true,
  "editor.formatOnSave": true,

Preview on Web Server

Preview Web Page on Web Server.

Quokka.js

Live Scratchpad for JavaScript.

Svelte

Svelte language support for VS Code

Svelte 3 Snippets

Svelte 3 Snippets for VS Code

Svelte Intellisense

Provides intellisense for data, events, slots etc. in components.

vscode-styled-components

Syntax highlighting for styled-components