cjsx syntax highlighting in WebStorm?

N

Nick V2015-10-25 22:53:44

webstorm

Nick V, 2015-10-25 22:53:44

And hello again. Found here such solution for support of CJSX syntax in WebStorm'e.
I'm downloading the archive. I unpack it. I put the folder in the directory with WebStorm. Then I follow these instructions .

I download the archive and unpack it.
I move the folder to the directory with WebStorm.
In the IDE settings I find TextMate Bundles and add the folder
In File Types I find CoffeeScript and add *.cjsx to it

Expectation

Reality

Help set up correctly.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

N

Nick V, 2015-10-26
@half-life

I solved the problem a little differently (through Gulp). So, we won't need the above plugin. We do it differently.
I have a bunch of Meteor + React, so I do it like this:
Next, we write the code in coffeescript, and frame the markup in `<markup>` backticks . What it looks like:

Home.cjsx

@Home = React.createClass
  displayName: 'Home'
  render: ->
    `
    <div className="main">
      <nav className="nav">
        <ul>
          <li><a href=""></a></li>
        </ul>
      </nav>
    </div>  
    `

What does task do? It finds all files with *.cjsx extension, removes backticks from them, compiles them to *.js using 'gulp-cjsx' and puts them in the same directory.
The output is this file

Home.js

this.Home = React.createClass({
  displayName: 'Home',
  render: function() {
    return React.createElement("div", {
      "className": "main"
    }, React.createElement("nav", {
      "className": "nav"
    }, React.createElement("ul", null, React.createElement("li", null, React.createElement("a", {
      "href": ""
    })))));
  }
});

Why is it necessary to frame markup in backticks? Then the file is not underlined in red and emmet works between them.
Something like that.