Подсветка cjsx синтаксиса в WebStorm?

Question

[Ник В]

И снова здрасте. Нашёл вот такое вот решение для поддержки CJSX синтаксиса в WebStorm'e.
Качаю архив. Распаковываю его. Папку ложу в директорию с WebStorm'ом. Дальше делаю по вот этой инструкции.

1. Качаю архив и распаковываю его.
   
2. Перемещаю папку в директорию с WebStorm'ом.
   
3. В настройках IDE нахожу TextMate Bundles и добавляю папку
   
4. В File Types нахожу CoffeeScript и добавляю в него *.cjsx
   

Ожидание
Реальность

Помогите правильно настроить.

Comments

[Никита Гущин]

Используйте ES6+ и будет вам счастье ... а нет, не будет - ES6 идет на ура, а вот дальше - извольте.

[Ник В]

Никита Гущин: Сам разобрался. Чуть позже напишу решение.

Answer 1

[Ник В]

Решил проблему несколько иначе (через Gulp). Итак, нам не понадобится вышеуказаный плагин. Делаем по другому.

1. Настройки IDE -> File Types
   
2. В File Types находим CoffeeScript и добавлем в него *.cjsx
   
3. В File Types нахожу JavaScript и добавляем в него cjsx
   
4. Далее идём в Language and Framework -> JavaScript
   
5. В JavaScript language version выбираем JSX Harmony
   
6. Сохраняем наши настройки.
   

У меня связка Meteor+React поэтому я делаю вот так:

1. Устанавливаю meteor-gulp
   
2. В директории .gulp создаю такой вот gulpfile.coffee
   

Далее пишем код на coffeescript, а разметку обрамляем в бэктики `<разметка>`. Как это выглядит:

Home.cjsx

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

Что делает таск? Он находит все файлы с расширением *.cjsx, убирает из них бэктики, компилирует в *.js с помощью 'gulp-cjsx' и кладёт их в ту же самую директорию.
На выходе имеет вот такой вот файл

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": ""
    })))));
  }
});

Для чего нужно обрамлять разметку в бэктики? Тогда файл не подчёркивается красным и между ними работает emmet.
Вот как то так.