[解決済み] sublime textのJSXフォーマッターはありますか？

質問

テキストエディタとしてSublime Textを使用しています。

javascriptファイルをフォーマットするためのjsFormatはありますが、JSX用のものが見当たりません。

皆さんはJSXの書式設定をどのように行っていますか？

どのように解決するのですか？

アップデート 4

確認 プリティア は、esformatter ほど設定可能ではありませんが、現在いくつかの大きなプロジェクトのフォーマットとして使われています ( React 自体のように )

アップデート3

確認 sublime jsfmt . を追加した場合 esformatter-jsx を config に追加し、sublime-jsfmt 用の forlder の中にパッケージをインストールします。Sublimeから直接JSXファイルをフォーマットすることができるようになります。 以下はそのためのガイドです。

アップデート2

コマンドラインから esbeautifier . これは エスフォーマッター のラッパーで、フォーマットするグロブのリストを受け取ります。

# install the dependencies globally
npm i -g esbeautifier

# beautify the files under src/ and specs/ both .js and .jsx
esbeautifier src/**/*.js* specs/**/*.js*

更新

ということで、結局プラグインで エスフォーマッター を利用して、JSXファイルの整形を可能にしました。

https://www.npmjs.com/package/esformatter-jsx

ここでは requirebin のライブデモです。

を呼び出すのは何とか実現可能なはずです。 エスフォーマッター を引数として Sublime から呼び出すことができるはずです。いずれにせよ、コマンドラインから使用するには、以下の指示に従います。

コマンドラインからは、次のように使用できます。

# install the dependencies globally
npm i -g esformatter esformatter-jsx

# call it (this will print to stdout)
esformatter --plugins=esformatter-jsx ./path/to/your/file

# to actually modify the file
esformatter --plugins=esformatter-jsx ./path/to/your/file > ./path/to/your/file

# to specify a config file (where you can also specify the plugins)
# check esformatter for more info about the configuration options
esformatter -c ./path/to/.esformatter ./path/to/your/file > ./path/to/your/file

==== 以下、古い回答 ===。

もし、あなたが探しているものが、jsxファイルをフォーマットすることであり、同時に jsx 構文 (基本的にすべての javascript 構文を美化して jsx タグを無視する、つまりそのままにしておく) を使ってやっています。 esformatter

// needed for grunt.file.expand
var grunt = require('grunt');

// use it with care, I haven't check if there
// isn't any side effect from using proxyquire to 
// inject esprima-fb into the esformatter
// but this type of dependency replacement
// seems to be very fragile... if rocambole deps change 
// this will certainly break, same is true for esformatter
// use it with care
var proxyquire = require('proxyquire');
var rocambole = proxyquire('rocambole', {
  'esprima': require('esprima-fb')
});

var esformatter = proxyquire('esformatter', {
  rocambole: rocambole
});

// path to your esformatter configuration
var cfg = grunt.file.readJSON('./esformatter.json');

// expand the files from the glob
var files = grunt.file.expand('./js/**/*.jsx');

// do the actual formatting
files.forEach(function (fIn) {
  console.log('formatting', fIn);
  var output = esformatter.format(grunt.file.read(fIn), cfg);
  grunt.file.write(fIn, output);
});

実は、esformatterがesprimaの代わりにesprima-fbを使うバージョンのrocamboleを使って、proxyquireを回避してほしいのです。