loading...
Cover image for How to write Javascript and React with VS Code FASTER!

How to write Javascript and React with VS Code FASTER!

tumee profile image Tuomo Kankaanpää Originally published at codepulse.blog ・3 min read

This post was originally published at codepulse.blog on July 9, 2020.

If you are using VS Code to write Javascript or React code, keep reading!

VS Code is my favourite code editor and I use it mostly to write Javascript and React code.

Since I use it a lot, I have picked up few things that make my life easier as a Javascript and React developer. One of them is code snippets!

See also: TOP 10 Keyboard Shortcuts For Visual Studio Code

Code snippets are great because they save me from having to write same boilerplate code, for example when creating a React component or defining a for loop, over and over again.

You just type in the prefix for the code you want to generate and press enter and voalá, you got your code written instantly!

On the video below, I will show you how you can get started on using React and Javascript code snippets with Visual Studio Code in a matter of minutes! I will also share bunch of my favourite and most used snippets that I use every day.

If you rather read, here is a short summary of the video. (I still recommend you check the video out, and if you like it please do subscribe to my Youtube channel also, I would really appreciate it!).

In VS Code, you can create your own snippets. But that is not necessary, because you can also install an extension that provides code snippets you want.

There is a great extension for Javascrit & React code snippets called VS Code ES7 React/Redux/React-Native/JS snippets and you can install it from the extensions tab in your Visual Studio Code.

After installing the extension, you can start using the snippets right away! Snippets can be used with prefixes listed in the extension page. You just type in the prefix in the file you are editing and press enter and the snippet is automatically generated.

Here are couple of my favourite snippets:

fin

for(let itemName in objectName { }

nfn

const functionName = (params) => { }

clg

console.log(object)

imr

import React from 'react'

imrc

import React, { Component } from 'react'

imrr

import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'

cdm

componentDidMount = () => { }

cdup

componentDidUpdate = (prevProps, prevState) => { }

rcc

import React, { Component } from 'react'

export default class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}

rpcp

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export default class FileName extends PureComponent {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

rcredux

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class FileName extends Component {
  render() {
    return <div>$4</div>
  }
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

Wrapping up

Code snippets really save keystrokes and that way also your time and you can code faster and be more efficient.

Are you using code snippets? Comment below your favourite code snippets!

PS. If you are new to React or someone who has just started using it, you should check out my React Basics course on Skillshare. You can now get it for free when registering to Skillshare through this link.

Discussion

pic
Editor guide
Collapse
nyashanziramasanga profile image
Nyasha (Nash) Nziramasanga

Thanks for the share, I use the shortcut rfc + tab a lot as well which is for react functional components

import React from 'react'

export default function text() {
  return (
    <div>

    </div>
  )
}

Collapse
tumee profile image
Tuomo Kankaanpää Author

Great to hear that you liked it!

Collapse
findlogan profile image
Logan Johnson

Thanks for the share! 10/10 worth looking into!

Collapse
myogeshchavan97 profile image
Yogesh Chavan

check out other useful tips HERE

Collapse
milan997 profile image
milan997

I get the point here, and I think these are so cool (I'm a big fan of shortcuts), but how exactly does this make you a better developer in any way? It's not a typing competition, you gain nothing by being ~3.2s faster than a developer that needs to type all that manually, with an overhead of having to learn all of these, and not to talk about the unnecessary abstraction which makes you forget how to write code without these.

I'm honestly not trying to be a smartass or anything, just wanna hear an opinion on this? Over customisation of the IDE (this happens with vim a lot) makes the developer incapable of writing code in anything other than their machine.

Collapse
bitdweller profile image
Pedro Pimenta

The post doesn't talk about being better, just faster.

This should be used when you already know what you're doing, not the other way around. But that option relies on the developer. It's not better to not have options than to have them.

You could also argue that then we shouldn't event use VSCode, only Notepad or Vim with no plug-ins if you're a "real" developer.

You can write React apps with notepad, but having a code editor with all sorts of plug-ins helps a lot.

Collapse
despablos profile image
Pavel Yakovenko

Thanks :)

Collapse
flamingphoenix777 profile image
FlamingPhoenix777

Yeah... I have that extension installed and I bet you you'll fall in love with you try it. Makes me feel like a ninja, to be honest 😁😁.