r5n-dev / vscode-react-javascript-snippets Goto Github PK

styled-components is an extremely common import given it's the most popular css-in-js library.
It could look like this: imsc -> import styled from 'styled-components'

Hey, thanks for this collection of snippets, it is really great.
I would love to not have to add default-props every time I bootstrap a component. Do you think that you can add an extra snippet that creates an arrow functional component with prop types and also default props?
Thanks in advance.

An example of what tsrfc returns:

import React from 'react'

interface Props {
  
}

export default function Test(): Props {
  return (
    <div>
      
    </div>
  )
}

I think the return type is specified wrong here. It should be ReactElement instead of Props.
Will do a PR.

Would it be possible to add a way to import custom snippets?

First of all, great plugin!

Instead of static getDerivedStateFromProps(nextProps, prevState) { } there should be static getDerivedStateFromProps(props, state) { } <- source

The useEffect snippet should be:

"useEffect": {
    "prefix": "useEffect",
    "body": [
      "useEffect(() => {",
      "\t${1:effect}",
      "\treturn () => {",
      "\t\t${2:cleanup}",
      "\t};",
      "}, [${3:input}])"
    ]
  },

In te current version, the cleanup is called effect and there is no tabstop to specify the effect.

Even more useful would be two versions of the snippet: one without cleanup and one with cleanup.

I think that we should have some options for the codestyle code
for example:

• using semicolons
• using single quotes or selecting quotes type

There are quite a few options for fetch, so I don't know how feasible this is, but I find myself typing the window fetch boilerplate quite a bit.

I often do something like this:

window
  .fetch(url, { credentials: 'include' })
  .then(res => res.json())
  .then(({ data, error }) => {
    if (error) {
      // handle error
    }

    // do something
  })
  .catch(err => {
    console.error(err)
  })

Hi, I'm on the VS Code team. We recently released support for Remote Development and I noticed that your may extension need a small change to ensure users have a good experience when using it remote workspaces.

What is the issue?

To make remote development as transparent as possible to users, VS Code distinguishes two classes of extensions:

• UI Extensions: These extensions make contributions to the VS Code user interface and are always run on the user's local machine. UI Extensions cannot directly access files in the workspace, or run scripts/tools installed in that workspace or on the machine. Example UI Extensions include: themes, snippets, language grammars, and keymaps.

• Workspace Extensions: These extensions are run on the same machine as where the workspace is located. When in a local workspace, Workspace Extensions are run on the local machine. When in a remote workspace, Workspace Extensions are run on the remote machine. Workspace Extensions can access files in the workspace to provide rich, multi-file language services, debugger support, or perform complex operations on multiple files in workspace (either themselves or by invoking scripts/tools).

You can find more details about this architecture here.

VS Code currently infers that your extension is a Workspace Extension. This means that users who have your extension installed must also install it to the remote in order to use it in remote workspaces. I believe that your extension should probably be a UI extension instead. That way your extension will always be enabled for users who install it, even if they open a remote workspace.

How do I fix this?

To tell VS Code that your extension is a UI extension, just add "extensionKind": "ui" to your extension's package.json.

UI Extensions always run on the user's local machine, even when they open a remote workspace.

I'll submit a PR that does this. Please let me know if you have any questions or concerns about the issue. We've also put together a guide to help you test your extension in remote workspaces

PS: As a temporary workaround for a few popular extensions, we've automatically added your extension to an internal whitelist so that is always treated as a UI extension

I'm surprised there is no snippet for stringify JSON.stringify()

JSON.stringify({ uno: 1, dos: 2 }, null, '\t');

Can you please add it?
Thanks!

https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

copy the snippet what u dont have

After fixing #86 (thank you very much !!!), the return type is still wrong.ReactElement is under React namespace. It must be imported, or referred as React.ReactElement

(https://github.com/dsznajder/vscode-es7-javascript-react-snippets/blob/master/snippets/ts-snippets.json#L89)

Is this available for atom editor ?

see title

btw, @dsznajder what do you use to align markdown tables?

for few days I'm getting one issue with this snippet in VS Code, whenever I'm typing {} after any function name of method name followed by () in js or jsx file it's invoking imrc command and import statement popping up and hitting enter expanding to import statement rather than breaking to next line

How can I edit the snippets inside VScode? Is it easy?
Where are snippet definitions are stored? How to open a single snippet to alter it?

hi
Please remove 'export default' or 'export' from rcc or rce

we have two choices, but the second one still has the word 'export' at begining of the code and i think it's better to delete

rcc :
`import React, { Component } from 'react'

export default class FileName extends Component {
render() {
return

class FileName extends Component {
render() {
return

or you can change second option 'rce' :
from :
`import React, { Component } from 'react'

export class FileName extends Component {
render() {
return

export default $1`

To :
`import React, { Component } from 'react'

class FileName extends Component {
render() {
return

export default $1`

and do it for all your snippets

Any plans for providing snippets of React Hooks in the future?

Hey man!

have you updated the vscode theme on editor? the useStatestill are with problem:

The initialState are not get the 2nd bind ${2:initialState}

Thank you :)

Snippet variables

for example

  "reactFunctionalExportComponent": {
    "prefix": "rfe",
    "body": [
      "import React from 'react'",
      "",
      "const ${1:componentName} = () => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:componentName}",
      ""
    ],
    "description": "Creates a React Functional Component with ES7 module system"
  },

instead of componentName default string, there could be TM_FILENAME_BASE variable, to automatically name the component after the file name.

Saves time, it's more useful, while still stays selected, though easily rewritable.

Win-win.

None of the snippets fire?

you use 2 spaces indention while vs code default is 4 so i need to re-indent the snippets

Hi,
First, thank you for your work ;)
Could you add a new command like:

clo→ console.log("Object", Object);

to console.log with two cursors?

Thank you so much ;)

Can we add mobx import's snippet?

can we add snippet 'imrd' for 'import ReactDOM from 'react-dom''

Would you be adverse to adding the non fat arrow syntax version of a stateless functional component?

function $1(props) {
  return (
    <div>$2</div>
  );
}

export default $1

I ask because flow recommends this style

I think in react component section, better use fragment than tag div

like this :

import React, { Component } from 'react'

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

what do you guys think?

It appears that there is an issue with Intellisense for npm packages.

Using the imp snippet does not provide Intellisense auto-completion. Typing a regular import statement by hand does. I'm not sure what the root cause is. Here's a video of the issue:

https://www.youtube.com/watch?v=QOi44GXGJy0

Overall it is a great extension, I love it!
One thing that bothers me a bit is that "clg" won't let you use autocomplete when replacing "(object)" with an existing variable name. It usually does when you manually type "console.log()" so I wonder if that could easily be fixed?
Thank you very much.
Best,
Komo

Installed latest package. Run rfc result is:

import React from 'react'

export default function index() {
  return (
    <div>
      
    </div>
  )
}

Is there a configuration option to change this?

Hey, I know the issue had already been mentionned in #48 about lifecycle methods using arrow function in the documentation but not in the snippets.

What do you think about passing them to arrow functions ? Just to be consistent with the actual documentation.

I think there is a reason for this 🤔 but I can't get it.

https://github.com/dsznajder/vscode-es7-javascript-react-snippets/blob/628e0d4df8e2e791c8a1e08d6c95d9718669ee03/snippets/snippets.json#L334

https://github.com/dsznajder/vscode-es7-javascript-react-snippets/blob/628e0d4df8e2e791c8a1e08d6c95d9718669ee03/snippets/snippets.json#L352

Hey, currently You're using arrow syntax:

cwm→ | componentWillMount = () => { } DEPRECATED!!!
cdm→ | componentDidMount = () => { }
cwr→ | componentWillReceiveProps = (nextProps) => { } DEPRECATED!!!
scu→ | shouldComponentUpdate = (nextProps, nextState) => { }
cwup→ | componentWillUpdate = (nextProps, nextState) => { } DEPRECATED!!!
cdup→ | componentDidUpdate = (prevProps, prevState) => { }
cwun→ | componentWillUnmount = () => { }

But all these methods using simple function declaration syntax like so:

componentDidMount(){}
Please fix this issue.

I love this extension and use it daily, but all of a sudden it only works once before I have to restart VSCode. Not really sure why, I've tried disabling all other extensions and the problem persists.

see #22

Emmet is installed by default in VSCode, also very common is adding emmet to js files to support jsx. Your extension blocks that usability, for example you can't just write div and press tab to make a div html element.

In case you're adding support for schema-aware GraphQL functionality, it would be great if you would consider using graphql-config as foundation for the configuration.

Hello!

Do you pretend to add some Hooks snippets?

Thanks!

Hey @dsznajder,

Is there any reason not to use \t in the snippets, to support different indentation levels rather than hardcoding two spaces? I saw there was a related issue a while ago that wasn't solved.
So for the test block snippet,

"body": ["test('should $1', () => {", "  $0", "})", ""],

Would change to

"body": ["test('should $1', () => {", "\t$0", "})", ""],

I tested it out with some snippets and it seems to work fine. \t just gets substituted to the number of spaces defined in the VS Code settings.

I could probably change it in the next little while, if you would like :)

Issue Type: Bug

After update my VS Code to latest version, React ES7 extension (snippets) can not working properly, show me how to use previous version..really can not working

Extension version: 2.5.0
VS Code version: Code 1.41.1 (26076a4de974ead31f97692a0d32f90d735645c0, 2019-12-18T14:58:56.166Z)
OS version: Windows_NT x64 10.0.18362

I'm used to use Emmet where I could just enter a shortcut and then press Tab.
With the vscode-es7-javascript-react-snippets this is not possible for me. I first have to press CMD + Shift + P, then start to type ES7 snippet search then press Enter and then type the shortcut and then press Enter again.
Within this time I would have typed the command myself.
So either this feature does not exist, then this Issue would be a feature request
OR this feature does exist, then this Issue would be a documentation update request, because it is not documented anywhere how I can make this Extension work with Tab.

(I tried it in a jsx file Using VSCode Version 1.31.1)

Thanks for your help 🙏

When I type impt to import the propTypes it returns the following:

import PropTypes from 'prop-types'

but it should return propTypes with a lowercased p

import propTypes from 'prop-types'

Hello,
Thank you for a wonderful extension.

I am making an application that reacts with TypeScript.
But, this extension is not optimized for TypeScript.

For example,
`` `
// js
import React from 'react'

/ / ts
import * as React from 'react'
`` `

I would like to fork this repository and create an extension optimized for TypeScript.
And I want to distribute it on the market.
(Of course I will follow LICENCE)

Is it OK?

Thank you for reading.

// tsrafc
import React from 'react'

interface Props {
  
}

export const App: React.FC<Props> = () => {
  return (
    <div>
      
    </div>
  )
}

Will be considered as faulty since not containing a default export.

I'd suggest removing tsrafc since you cannot call default export const X.

Hi @dsznajder, thanks for making this nice plugin. Is there an existing way to use double quotes instead of single quotes and to add semicolons?

Example ->

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

export default class TaskInformation extends PureComponent {
  static propTypes = {

  }

  render() {
    return (
      <div>
        
      </div>
    );
  }
}

Issue Type: Bug

The TypeScript language service died 5 times right after it got started. The service will not be restarted.

Extension version: 2.4.4
VS Code version: Code 1.40.0 (86405ea23e3937316009fc27c9361deee66ffbf5, 2019-11-06T17:02:13.381Z)
OS version: Windows_NT x64 10.0.18362