Sublime Textをテキストエディターとして使用しています。
JavaScriptファイルをフォーマットするためのjsFormatがありますが、JSX用のjsFormatが見つかりません。
どうやってJSXをフォーマットするのですか?
Sublime Textをテキストエディターとして使用しています。
JavaScriptファイルをフォーマットするためのjsFormatがありますが、JSX用のjsFormatが見つかりません。
どうやってJSXをフォーマットするのですか?
回答:
アップデート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
現在のファイルを引数として渡して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を実際に使用したいと思います。
HTML-CSS-JS Prettifyプラグインには、js / jsxファイルのxml構文を無視できる設定があります。そうすれば、jsxコードを台無しにすることはありません。設定は次の"e4x": true
とおりです。設定ファイルの「js」セクション
設定>パッケージ設定> HTML \ CSS \ JS Prettify>設定Prettify設定
自己終了タグがある場合、これはうまく機能しません。/>で終わるタグ
/>
私のコードにはありませんが、それでも機能しません
Sublime 2&3のJsPrettierパッケージをインストールできます。これはかなり新しいJavaScriptフォーマッターです(これを書いている時点では、2017年2月です)。ES2017、JSX、Flowなどの最新の開発のほとんどをサポートしています。
クイックスタート
$ npm install -g prettier
{ "keys": ["super+b"], "command": "js_prettier" }
リンク:
常に「e4x」をtrueに設定するように指示したインターネットでの回答ですが、「format_on_save_extensions」のオプションを設定してから「jsx」を配列に追加する必要がある場合があります
jsFormat.sublime-settingsを変更する
{
"e4x": true,
"format_on_save": true,
"format_on_save_extensions": ["js", "json", "jsx"]
}
"format_on_save_extensions": ["js", "json", "jsx"]
。私は、ファイルの拡張子について見つける最も近いです:"js": { "allowed_file_extensions": ["js", "json",...]
Sublimeのパッケージインストーラーを使用して、Babelをインストールします。次に:
特にSublime Text向けではありませんが、JavaScriptにはReact JSXの美容機能があります。
http://prettydiff.com/?m=beauutifyはJSXをサポートすると主張しています:http : //prettydiff.com/guide/react_jsx.xhtml