Skip to content

Latest commit

 

History

History
112 lines (89 loc) · 5.27 KB

vscode-extensions.md

File metadata and controls

112 lines (89 loc) · 5.27 KB
Raw

VS Code Extensions

List of my favorite VS Code extensions for React and Javascript.

Prettier

Prettier is a JavaScript, TypeScript and CSS formatting for VSCode with ESLint integration.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Reactjs Code Snippets

This extension contains code snippets for Reactjs and is based on the awesome babel-sublime-snippets package.

  • rcc: creates a new react class component

ES7 React/Redux/GraphQL/React-Native snippets

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

  • cp → const { } = this.props
  • cs → const { } = this.state
  • imr → import React from 'react'
  • imrd → import ReactDOM from 'react-dom'
  • imrc → import React, { Component } from 'react'
  • imrcp → import React, { Component } from 'react' & import PropTypes from 'prop-types'
  • imrpc → import React, { PureComponent } from 'react'
  • imrpcp → import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'
  • imrm → import React, { memo } from 'react'
  • imrmp → import React, { memo } from 'react' & import PropTypes from 'prop-types'
  • impt → import PropTypes from 'prop-types'
  • imrr → import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'
  • imbr → import { BrowserRouter as Router} from 'react-router-dom'
  • imbrc → import { Route, Switch, NavLink, Link } from react-router-dom'
  • imbrr → import { Route } from 'react-router-dom'
  • imbrs → import { Switch } from 'react-router-dom'
  • imbrl → import { Link } from 'react-router-dom'
  • imbrnl → import { NavLink } from 'react-router-dom'
  • imrs → import React, { useState } from 'react'
  • imrse → import React, { useState, useEffect } from 'react'
  • redux → import { connect } from 'react-redux'
  • rconst → constructor(props) with this.state
  • rconc → constructor(props, context) with this.state
  • est → this.state = { }
  • cwm → componentWillMount = () => { } DEPRECATED!!!
  • cdm → componentDidMount = () => { }
  • cwr → componentWillReceiveProps = (nextProps) => { } DEPRECATED!!!
  • scu → shouldComponentUpdate = (nextProps, nextState) => { }
  • cwup → componentWillUpdate = (nextProps, nextState) => { } DEPRECATED!!!
  • cdup → componentDidUpdate = (prevProps, prevState) => { }
  • cwun → componentWillUnmount = () => { }
  • gdsfp → static getDerivedStateFromProps(nextProps, prevState) { }
  • gsbu → getSnapshotBeforeUpdate = (prevProps, prevState) => { }
  • ren → render() { return( ) }
  • sst → this.setState({ })
  • ssf → this.setState((state, props) => return { })
  • props → this.props.propName
  • state → this.state.stateName
  • rcontext → const ${1:contextName} = React.createContext()
  • cref → this.${1:refName}Ref = React.createRef()
  • fref → const ref = React.createRef()
  • bnd → this.methodName = this.methodName.bind(this)

React PropTypes Intellisense

The extension finds React PropTypes and adds them to the suggestion list.

https://marketplace.visualstudio.com/items?itemName=OfHumanBondage.react-proptypes-intellisense

Auto Import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript (ES6) and TypeScript (TS).

https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

ESLint

Checks the most common types of errors as you write.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Sort Imports

Sort ES6 imports for JavaScript and TypeScript automatically.

https://marketplace.visualstudio.com/items?itemName=amatiasq.sort-imports

Exports Autocomplete

Collects ES6 exports from your project and autocompletes them. Upon completion, item is also imported using a relative path. Import is placed after last import in that file.

https://marketplace.visualstudio.com/items?itemName=capaj.vscode-exports-autocomplete

Lorem Ipsum

Generates and inserts lorem ipsum text into Visual Studio Code.

  • Press F1 type lorem ipsum and select to insert either a line or paragraph.

https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum