web-dev-qa-db-ja.com

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

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

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

JSXのフォーマットをどのように扱いますか？

reactjssublimetextreact-jsx
89
fin

4を更新

prettier を確認します。esformatterとして構成可能ではありませんが、現在いくつかの大きなプロジェクトのフォーマットに使用されています（ React自体 ）

アップデート3

sublime 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*

更新

そこで私は esformatter のプラグインを作成して、JSXファイルのフォーマットを有効にしました。

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構文（基本的にすべてのjavascript構文を美化し、jsxタグを無視し、そのままにしておくこと）を許可しながら、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);
});

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

57
roy riojas

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

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

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

57
Shoobah

Sublime 2および3のJsPrettierパッケージをインストールできます。これはかなり新しいJavaScriptフォーマッターです（この記事の執筆時点では2017年2月）。 ES2017、JSX、Flowなどの最新の開発のほとんどをサポートしています。

クイックスタート

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

リンク：

19
Eugene Kulabuhov

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

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

移動：設定>パッケージ設定> HTML\CSS\JS Prettify> Set Prettifyの設定

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

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

18
brownmamba

'e4x'をtrueに設定すると常に言ったインターネットの答えですが、場合によっては 'format_on_save_extensions'のオプションを設定してから、配列に 'jsx'を追加する必要があります

jsFormat.sublime-settingsを変更します

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

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

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

Sublime Text専用ではありませんが、JavaScriptにはReact JSXの美化機​​能があります。

http://prettydiff.com/?m=beautify JSXをサポートすると主張します： http://prettydiff.com/guide/react_jsx.xhtml

1
Austin Cheney