崇高なテキスト用のJSXフォーマッターはありますか?


91

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

JavaScriptファイルをフォーマットするためのjsFormatがありますが、JSX用のjsFormatが見つかりません。

どうやってJSXをフォーマットするのですか?


はい、ほとんどすべてのエディターで使用できるjsx textmateバンドルを探してください。
ブリガンド

それだけで、私は物事のIDENTや並べ替えを行いフォーマッタを探していた構文hightlighterのように思える
フィン

2
知りません。反応グーグルグループは尋ねるのにより良い場所でしょう。
ブリガンド2014

良い解決策も見つかりません。現在、esprima-fbでソースを解析し、escodegen-jsxを使用してフォーマットされた出力を生成することが可能です。書式設定オプションには制限があり、白い線が失われます...加えて、escodegen-jsxは問題追跡なしのフォークです。アクティブに維持されるかどうかは不明です。fbがjsxコードベースをどのように処理するのでしょうか。
user1600124 2015年

esformatterのベータ版にはJSXをフォーマットする機能があるようですが、esprima-fbを使用しているため、まだプロダクションの準備が整っていません
fin

回答:


60

アップデート4

esformatterとしては構成できませんが、現在いくつかの大きなプロジェクト(React自体など)をフォーマットするために使用されている、よりきれいなチェック

アップデート3

崇高なjsfmtをチェックしてください。esformatter-jsxを構成に追加して、sublime-jsfmtのforlder内にパッケージをインストールする場合。Sublimeから直接JSXファイルをフォーマットできます。ここにそのためのガイドがあります

アップデート2

コマンドラインからesbeautifierを使用することもできます。フォーマットするグロブのリストを受け入れるesformatterのラッパーです。

# 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ファイルのフォーマットを有効にするesformatterのプラグインを作成することになりました。

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

こちらがrequirebinのライブデモです

現在のファイルを引数として渡してSublimeからesformatterを呼び出すことは、どういうわけか実行可能であるべきです。いずれの場合でも、コマンドラインから使用するには、次の手順に従います。

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

# 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);
});

esformataは、proxyquireを回避するために、esprimaの代わりにesprima-fbを使用するバージョンのrocamboleを実際に使用したいと思います。


1
これはesformatter-jsx-ignoreでのみ機能しましたが、それで十分です。ありがとう!
Jasper

esformatter-jsxを使用していますが、期待どおりに動作します。ただし、これを行うには、Sublime 3の「設定」>「パッケージ設定」>「Sublime JSFMT」>「設定-デフォルト」の「options」:{"plugins":{"esformatter-jsx"}}に「esformatter-jsx」も追加する必要がありました。作品
クマ

これは素晴らしい答えです。しばらくの間、このツールを使用しましたが、Babelでes6 / es7を使用するように切り替えたため、機能しなくなりました。

1
コンソールプレスCTRL + `あなたはesformatter-JSXレポやコンソールに見ているエラーとJSFMTレポでチケットを開くことができますを開くには、MACで、あなたの崇高コンソールをチェック
ロイはriojas

2
きれいな仕事をしてくれます。sublimeプラグインはgithub.com/jonlabelle/SublimeJsPrettierで、eslintサポートgithub.com/prettier/prettier#eslintもあります。この質問が3年近く経ってようやく受け入れられてうれしい。
2017

57

HTML-CSS-JS Prettifyプラグインには、js / jsxファイルのxml構文を無視できる設定があります。そうすれば、jsxコードを台無しにすることはありません。設定は次の"e4x": trueとおりです。設定ファイルの「js」セクション

設定>パッケージ設定> HTML \ CSS \ JS Prettify>設定Prettify設定

自己終了タグがある場合、これはうまく機能しません。/>で終わるタグ


1
これは、最新バージョンのbabel-sublimeとHTML-CSS-JS Prettifyでも十分に機能します。「jsx」または「allowed_file_extensions」に使用するファイル拡張子を必ず追加してください。
16

この回答は古くなっていますか?/>私のコードにはありませんが、それでも機能しません
アンディダーウィン

2
崇高さのためのprettier(別名jsprettier)は断然最高です!! :以下の答えを参照してくださいstackoverflow.com/a/42169688/2178112
majorBummer

20

Sublime 2&3のJsPrettierパッケージをインストールできます。これはかなり新しいJavaScriptフォーマッターです(これを書いている時点では、2017年2月です)。ES2017、JSX、Flowなどの最新の開発のほとんどをサポートしています。

クイックスタート

  1. 端末を使用してprettierをグローバルにインストールします。 $ npm install -g prettier
  2. Sublimeで[ツール]-> [コマンドパレット...]-> [パッケージコントロール:インストールパッケージ]に移動し、「JsPrettier」という単語を入力してから、それを選択してインストールを完了します。
  3. エディター内のコンテキストメニューを使用してファイルをフォーマットするか、キーボードショートカットにバインドします。 { "keys": ["super+b"], "command": "js_prettier" }

リンク:


1
これは今のところ断然最高の答えです!きれいなのはダボム!
majorBummer 2017

1
はい、確かに、これは私にとっても完璧に機能しました。注目すべき最も重要なことは、「全体的」な部分です。
Ionut Necula 2018年

19

@Shoobahの発言に追加するには:

HTML-CSS-JS Prettifyプラグインには、js / jsxファイルのxml構文を無視できる設定があります。そうすれば、jsxコードを台無しにすることはありません。設定は次のとおりです。「e4x」:設定ファイルの「js」セクションでtrue

移動:設定>パッケージ設定> HTML \ CSS \ JS Prettify>設定Prettify設定

「js」セクションに移動します。

「allowed_file_extension」に「jsx」を追加し、「e4x」を「true」に変更します


16

常に「e4x」をtrueに設定するように指示したインターネットでの回答ですが、「format_on_save_extensions」のオプションを設定してから「jsx」を配列に追加する必要がある場合があります

jsFormat.sublime-settingsを変更する

{
  "e4x": true,
  "format_on_save": true,
  "format_on_save_extensions": ["js", "json", "jsx"]
}

私はあなたの言う通りにやったが、それは私にはうまくいきませんでした。:(
Yash Vekaria 16

「jsFormat.sublime-settings」はどこにありますか?変更できるように"format_on_save_extensions": ["js", "json", "jsx"]。私は、ファイルの拡張子について見つける最も近いです:"js": { "allowed_file_extensions": ["js", "json",...]
Chris22

ここで見つけることができます:設定>パッケージ設定> jsFormat>設定-ユーザー。ただし、私にとって
Niclas

解決策を探していましたが、これで私の問題が解決しました、ありがとう!
Al-Maamari Tareq 2017年

4

Sublimeのパッケージインストーラーを使用して、Babelをインストールします。次に:

  1. .jsxファイルを開きます。
  2. メニューから[表示]を選択します。
  3. 次に、構文->すべてを現在の拡張子で開く...->バベル-> JavaScript(バベル)。

使用できるJSX言語パッケージもあります
TabsNotSpaces '30年

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.