CODEWITHSUNDEEP
reactjsvisual-studio-codejsx
user1431072
user1431072

Reputation: 1452

JSX Component (Function) Autocomplete in VS Code?

Is there a special autocomplete key or key sequence in VS Code that quickly creates a skeleton function for a component after typing the following?:

function [FunctionName]

that will produce this:

function [FunctionName] (){  
  return();  
}

I was watching a PluralSight training video and the author merely typed the "function [FunctionName]" and then he somehow triggered an autocomplete that created the rest of the brackets, including the return statement. I've looked into snippets, but there's got to be an easier way...

Upvotes: 1

Views: 1895

Answers (1)

Trent
Trent

Reputation: 4316

There's a ton of vscode extensions that can accomplish this. These are referred to as "snippets", and you can find tons of snippet extensions in the vscode extension marketplace.

One example is the ES7 React/Redux/GraphQL/React-Native snippets extension by dsznajder.

The extension will allow you to do something like you example, which turns nfn into const functionName = (params) => { }.

As your question also asks, you can generate component's scaffolding by typing rce.

This will autocomplete to the following:

import React, { Component } from 'react'

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

export default $1

Upvotes: 1

Related Questions