Great tool!

I prefer a different snippet for rcc than the one configured. How can I change it?

My preferred snippet:

import * as React from "react";

export class MyComp extends React.Component {
  render() {
    return (
      <React.Fragment>
        <p>abc</p>
      </React.Fragment>
    );
  }
}

Hi @xabikos.

thanks a lot for this project! I've using React Snippets about one week and It saved me a lot of time already. There is one thing - I'm already using static class properties but can't make a PR because my approach don't follow the official EcmaScript standard yet. And there is no way, how to customize your snippets.

before

class Example extends Component {        
        render() {
            return (
                <div>
                    
                </div>
            );
    }
}

Example.propTypes = {

};

export default Example;

I decided to create this patch script that can be used directly from the terminal, so I can share this method with you all here.

after the patch

class Example extends Component {
        static propTypes = {

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

export default Example;

You can use this method for patching any of current snippets or to add some new ones...

Vscode v1.16 added the snippet variable: $TM_FILENAME_BASE (https://code.visualstudio.com/updates/v1_16#_snippets). It resolves to the filename without extension so we could add it to the snippets for creating components to prepopulate the component name with the filename.
I'd be happy to submit a PR if you'd be willing to accept the change.

As the React blog post indicates, we should import PropTypes from 'prop-types'. It would be great to have a schedule for updating the snippet?

When using the various import snippets a new line is added. It will be more consistent if this line is not added by default.

https://reactjs.org/docs/hooks-state.html
following this i hope in the you create new feat to create hook state like
rur -> for create

import React, { useState } from 'react';

function Example() {
   return (
  );
}

Hi. Just have check with the latest version of VSCode (1.8.0) and the latest version of the plugin (1.2.0), the following snippets don't work:

props→	this.props
state→	this.state

Hi, I downloaded the extension v1.4.0 and the Redux Connect (rrc) snippet isn't there?

Issue Type: Bug

All extensions doesn't work... specially "Reactjs code snippets"

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

The rsf snippet (react stateless function) connects the entire function body to the export due to a missing bracket

Not an issue, more of a possible request...
One PropType we use often, but is not included in this extension, is the generic : PropTypes.objectOf(PropTypes.shape).isRequired

Not sure if it was a conscious decision or if there is some other reason for not including it.

Every time I open the VSCode, I got this error on VS Code Dev Tools:

[{USER_PATH}/.vscode/extensions/xabikos.ReactSnippets-1.7.0]: Unknown language in `contributes.ReactSnippets.language`. Provided value: jsx

I already tryied uninstalling the extension, and installing it again, but right after installing it, shows up again.

good code format

import React, {Component} from 'react';

class componentName extends Component {
    render() {
        return(
            <div>
                {/* comments */}
            </div>
        );
    }
}

export default componentName;

not too good

import React, { Component } from 'react'

class componentName extends Component {
    render () {
        return (
            <div>
                
            </div>
        )
    }
}

export default componentName

A normal React component is not always be the one which should be exported, so rcc snippet should only create a class without export default component syntax and instead replace it with rcced or something else.

By the way it would be better if 'con' snippet creates constructor(props, context) rather than constructor(props).

Thank you for founding this convenient extension, I believe both of these changes are not difficult to implement, right?

I run the CudaLinter in CudaText editor and got this error

I checked that json file in CudaText hex-viewer and I see weird char codes in the line

This would be great to format snippets according to existing eslint rules of the project.

Because for now, when I insert a snippet I have lots of eslint warnings:

So I have to save the file for eslint plugin to fix all of them:

This happens because I have "eslint.autoFixOnSave": true setting enabled.

If it happened automatically (before inserting the snippet into the editor), it would be awesome.

Can we add it, what do you think?

There are currently 6 commits in master that haven't been released. Can we get a new version published 🙏

Type: Bug

Extension Bisect is done and has identified xabikos.reactsnippets as the extension causing the problem.

Extension version: 2.4.0
VS Code version: Code 1.72.2 (d045a5eda657f4d7b676dedbfa7aab8207f8a075, 2022-10-12T22:16:30.254Z)
OS version: Darwin x64 20.6.0
Modes:
Sandboxed: No

vsliv368cf:30146710
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242:30382549
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscorecescf:30445987
pythondataviewer:30285071
vscod805cf:30301675
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593cf:30376535
pythonvs932:30410667
cppdebug:30492333
vscaac:30438847
vsclangdf:30486550
c4g48928:30535728
dsvsc012cf:30540253
azure-dev_surveyone:30548225
2144e591:30553903
vsccc:30566497
pyindex848cf:30577861
nodejswelcome1:30587005
fc301958:30573243

Hey, just tried using the code snippets but when typing "met" as per your gif it doesn't give any options.

Do you plan to add PureComponent support?

Alex

It seems rpt snippet does not work for me. Wondering whether it is an issue of my configuration or clash of some other existing configurations.

To reproduce:

Anyone else facing this issue?

Other snippet works just fine.

Versions:

• VSCode v1.21.1
• Snippets plugin v2.0.0

How would I assign some of these to keybindings so instead of typing "anfn" I could do some custom command?

I just install this snippet on latest visual studio code, I'm on mac. This snippet works on file with .js extension but not appear on .jsx files.

My bad

The snippet rpt generates the empty propTypes and it pre-populates the component name (I'm guessing from the file name but not certain) but the rdp does not copy this behavior, it neglects the name.

rpt ->
MyComponent.propTypes = {
  
};

rdp ->
.defaultProps = {
  
};

It would be great if you could add support of typescript react syntax.

hello, I want to edit rcc command generate template

because I not like this:

import {Component} from 'react'

I want to this:

import { Component } from react

haha~ how to edit it I want to know? Thanks ^0^

When I enter 'rscp', I want to generate this:

import React from 'react';
import PropTypes from 'prop-types';

const ComponentName = props => {
  return (
    <div>

    </div>
  );
};

ComponentName.propTypes = {

};

export default ComponentName;

But, it will generate this code:

import React, { PropTypes } from 'react';

const ComponentName = props => {
  return (
    <div>

    </div>
  );
};

ComponentName.propTypes = {

};

export default ComponentName;

How to work with prop-types package?

With react 16, state doesn't need to be created in the constructor. Therefore I would suggest upon creation of stateful components to be included

export default class componentName extends Component {
  state  = {}
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

A lot of folks use .js extensions for .jsx files. It'd be nice to have this configurable.

Hi,

frist of all: very nice extension!
refereing to this List
I have gathered all the PropTypes:

PropTypes.array,
PropTypes.bool,
PropTypes.func,
PropTypes.number,
PropTypes.object,
PropTypes.string,
PropTypes.node,
PropTypes.element,

PropTypes.symbol,
PropTypes.any

The last two are missing in then PropType-snippets. Did you forgot them or did you leave them out on purpose? If it is the former could you maybe add them?

Why does the reactStateless (rsc) do export default but the flowStatelessComponent (fsc) just do export?

this.setState($1:(state, props) => $0});\n; should be this.setState((state, props) => { return { $0 } });

With react 16.4 , componentWillReceiveProps will be deprecated and getDerivedStateFromProps will be used

Hi, I want to modify it to satisfy my own needs!

So, how could I to that?

Please make semicolons optional :)

Snippet suggestions from Reactjs code snippets extension are showing intermittently.

When they DO show:

1. When I escape auto suggestions and press Ctrl + SPACE
2. When I type a single character of an abbreviation
3. When I type the first character, then escape suggestions, then navigate away to another virtual desktop, navigate back, and type the second character of a snippet abbreviation.
4. When I create a new file and type the whole/partial abbreviation without backspacing at all.

When they DON'T show:

1. When I type 2 or more characters of an abbreviation.
2. When I backspace in the middle of an abbreviation (intermittent).

I have tried disabling all extensions and enabling only Reactjs code snippets and still observed the same behavior.

I enabled verbose logging but didn't see anything relevant.

Here's a video but i'm not sure how helpful it will be.

Line 1: React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead react/no-deprecated
Line 1: 'PropTypes' is defined but never used no-unused-vars

When using snippet "rscp"

Maybe have import PropTypes from "prop-types" ?

The lifecycle changed significantly in react 16, but rcfc still uses all the old lifecycles; what's the plan for upgrading this?

Cannot find the name of plugin which i should use while executing command ext install.

I tried using ext install vscode-react but no result was returned. Currently using code v1.0.0

Instead of using \n on body to break lines like this:

"classConstructorContext": {
  "prefix": "conc",
  "body": "constructor(props, context) {\n\tsuper(props, context);\n\t$0\n}\n",
  "description": "Adds a default constructor for the class that contains props and context as arguments"
},

use an array for better readability:

"classConstructorContext": {
  "prefix": "conc",
  "body": [
    "constructor(props, context) {",
    "\tsuper(props, context);",
    "\t$0",
    "}"
  ],
  "description": "Adds a default constructor for the class that contains props and context as arguments"
},

That way others can contribute easily or use your snippets as a starting point for their owns.