babel / babel-sublime-snippets

Next generation JavaScript and React snippets for Sublime

babel-sublime-snippets

Sublime snippets for React in ES5 and ES6 flavors.

Installation

Find it as Babel Snippets through Package Control.

Using the "React: wrap in a component" snippet

First, select a block of JSX. Then, from the Command Palette select "React: wrap in a component". Or, you can set up a key binding.

To set a key binding, go to "Preferences: Key Bindings - User" from the Command Palette and add an entry like this:

{
  "keys": ["ctrl+shift+,"],
  "command": "insert_snippet",
  "args": {
    "name": "Packages/Babel Snippets/react_wrap.sublime-snippet"
  }
}

Available snippets

React

Trigger	Content
rcc→	class component skeleton
rcc→	legacy component skeleton
cdm→	componentDidMount() {…}
cdup→	componentDidUpdate(prevProps, prevState) {…}
cwm→	componentWillMount() {…}
cwr→	componentWillReceiveProps(nextProps) {…}
cwun→	componentWillUnmount() {…}
cwup→	componentWillUpdate(nextProps, nextState) {…}
fdn→	React.findDOMNode(…)
gdp→	getDefaultProps() {…}
gis→	getInitialState() {…}
ren→	render() {…}
sst→	this.setState(…)
scu→	shouldComponentUpdate(nextProps, nextState) {…}
props→	this.props
state→	this.state
pt→	propTypes { ... }
pta→	PropTypes.arrayOf
ptai→	PropTypes.arrayOf (Instances)
ptb→	PropTypes.bool
pte→	PropTypes.element
ptf→	PropTypes.func
pti→	PropTypes.instanceOf
ptn→	PropTypes.number
ptn→	PropTypes.node
pto→	PropTypes.object
ptof→	PropTypes.oneOf (Enum)
ptof→	PropTypes.objectOf
ptoft→	PropTypes.oneOfType (Union)
pts→	PropTypes.string
ptsp→	PropTypes.shape

Notes

• Unsupported React API snippets: displayName, forceUpdate, getDOMNode (use React.findDOMNode), ismounted, mixins, replaceProps, replaceState, setProps, statics.

Snippet(ing)

Read Extending Sublime Text » Snippets.

babel-sublime-snippets's Issues

How to switch default snippet usage?

I am trying to use rcc to do a class component but it always trigger the legacy one. Am I missing something?

Support React 15.5 PropTypes

New in React 15.5 is a breaking change where PropTypes are no longer included within React, and have instead been moved to a separate prop-types package. Dropping the React. prefix from the PropTypes snippets should do it.

Only few triggers are working

There are many triggers missing. The only thing that works for me are

rcc
ren
fdn
sst
props
state

The other triggers are not working. What am I missing?

Fyi, this is my Babel Snippets directory - http://i.imgur.com/tnaMFPO.jpg

how to use wrap in a component?

I try to wrap this in a react component:

<div>hello world</div>

I get this:

<div>hello <Component>
<div>hello   world</div>
<div>hello </Component>

I'm pretty sure that's not the intended output right?

Not listed in sublime package search

Is this project still being maintained?

It's been a while since the last commit, are you guys looking for maintainers?

No actual ES6 snippets?

It's just me or there is not actual ES6 snippets in this repo? I've spent 10 minutes searching of and could not find any.

Can't seem to get this to work

I cannot seem to get any snippets to work on my machine. I hit rcc + tab and just get a tab. Nothing happens. Am I missing something here?

Snippets stop working if a PropTypes definition exists

Snippets will only work if your cursor is above the propTypes definition in a jsx file.

Apparently the propTypes syntax breaks the scope for the snippet parser, my guess is because of the colon + curly braces. Removing the propTypes definition will allow snippets to work anywhere in the class again

As a note, this is in ES6 class syntax

jsx (html) snippets

I'd like to suggest an enhancement since a large part of writing React is jsx and we lose a lot of helpful snippets available when writing html with .html snippets.

For example, when writing my render function I would like to be able to write 'div', hit tab, and then get

<div>
    {cursor placement}
</div>

I tried cdm command but it didn't work

so I added this to my key binding

  {
    "keys": ["ctrl+shift+,"],
    "command": "insert_snippet",
    "args": {
      "name": [ 
        "Packages/Babel Snippets/react_wrap.sublime-snippet",
        "Packages/Babel Snippets/react_componentDidMount_(class).sublime-snippet"
      ]
    }
  }

Consider standard js

Would you consider adopting the standardjs code style for your snippets?

I'd prepare a PR.

Can I edit your snippets?

I want to change the rcc -> to my own convention, how would I do that?

Is this package still being maintained?

Last update to the Master branch was 18 months ago. No other branches in the repository. No movement visible on important issues, e.g. #28 .

So has this package been abandoned now?

Update of snippets for new React 16.4.0?

There are new life-cycle methods in React.
like getDerivedStateFromProps(), getSnapshotBeforeUpdate, componentDidCatch, componentDidUpdate with 3 params, so on

Will you add them to list of snippets?

Add a license file

This repo is missing a license. Without a license, all code is copyright the author and may not be used by anyone else.

Please use something like http://choosealicense.com/ to decide what license to use. I recommend MIT or GPL.

A novel effort by Add a License Please

question: How to assign keybinding?

I'm on a mac, using the default keybinding:

{
    "keys": ["ctrl+shift+,"],
    "command": "insert_snippet",
    "args": {
      "name": "Packages/Babel Sublime Snippets/react_wrap.sublime-snippet"
    }
  }

I highlight a jsx and try to press ctrl+shift+, and nothing happens, tried using different combination as well, super+shift+m for example.

Not sure if this is an ST3 bug but any help is much appreciated.

Snippets were not appearing anymore in class files

I'm on dev channel build 3095 and for some reason snippets were not appearing anymore in class files.

I changed the scope from:

<scope>source.js meta.class.js -(meta meta)</scope>

to: (1 more meta)

<scope>source.js meta.class.js -(meta meta meta)</scope>

and now they are re-appearing. I don't know if it's a generalized issue.