Js-beautify: ES6モジュールのインポート/エクスポート後に改行が挿入されました

作成日 2014年01月09日  ·  54コメント  ·  ソース: beautify-web/js-beautify

おい、

Ember.JS ES6モジュールのコレクションでjsbeautifierを実行していますが、エクスポートステートメントに小さな問題があることに気づきました。

以下のようにエクスポートするモジュールがあるとします。

export default DS.FixtureAdapter.extend();

jsbeautifierはエクスポート後に改行を追加します

export
default DS.FixtureAdapter.extend();

これは、コミットが受け入れられる前にjsbeautifierの実行を強制するため、私たちにとってのみ問題となる小さな問題です。 したがって、開発者が改行を削除すると、コミットされている変更とは関係がない場合でも、問題のファイルがコミットに含まれます。

enhancement

最も参考になるコメント

@ the-simian正しいオプションは"brace_style": "collapse-preserve-inline"で、Atomプリファレンスを通過する場合は[ブレーススタイル]セクションにあります。 「preserve_newlines」オプションは、ファイル全体で改行を保持するためのものです。 しかし、あなたは間違いなくそれが真実であることを望んでいます。 :)

全てのコメント54件

#388に関連。

ここでの問題は、エクスポートを予約語として処理しないことだと思います。

ねえ@bitwisemanまさに問題ですが、たとえば私が次のようなものを書いた場合

export default moduleName;

美化されます

default moduleName;

見栄えが良くない:)

さらに、ブレーススタイルのインポートが必要な場合

import { mod1, mod2 } from 'filePath';

美化されます

import { 
  mod1, 
  mod2 
} from 'filePath';

あれについてどう思う ?

これはすべてうまく聞こえます。 moduleexport 、およびimportキーワードを追加し、コードを適切にフォーマットするように記述する必要があります。

この問題の解決にどれだけ近づいているかについてのニュースはありますか?

次のリリースになります。 インフラストラクチャはそこにあります、それはマイナーな変更であるはずです。

エクスポートステートメントのフォーマットを修正するための+1!

+1

+1

+1

+1

+1

+n。 これらのキーワードを予約語のリストに追加するだけだと思います。 あれは正しいですか?

編集:いいえ。 新しいルールがどこにあるかを見つけようとしましたが、変更のリスクを冒すにはコードが多すぎます= /

:+1:

これは、これを正しく行うための重要な取り組みのようです。 申し訳ありませんが、これを次のリリースにパントする必要があります。

参考のため:
http://people.mozilla.org/~jorendorff/es6-draft.html#sec -modules
http://people.mozilla.org/~jorendorff/es6-draft.html#sec -imports
http://people.mozilla.org/~jorendorff/es6-draft.html#sec -exports

これは私たち全員になります:

しかし、私たち全員が覚えておく必要があります。

それは正確に正しいです。 :スマイリー:

そのために、次の修正を取得します-以下の無意味な入力は、美化器から同じ出力を生成します。 ほとんどのシナリオは依然として恐ろしいように見えますが、最小限の苦痛でこれらをハックできると感じました。

module "a" {
    import odd from "Odd";
    export default function div(x, y) {}
    export function sum(x, y) {
        return x + y;
    }
    export var pi = 3.141593;
    export default moduleName;
    export *
}

:+1:
目に見える修正はありますか?

私の豊富な自由時間に...:smile:

:+1:

+1

+1

元の問題は1.5.2で修正されました。

@ redking@ dred9e 、@ Aluxian 、@ simpleianm 、@ pgilad 、@ webbushka 、@ fpauser 、@ Volox 、@ naomifeehanmoran 、@ darlanalves 、@ thaume-

助けてください。

この問題を解決できるように、入力、実際の出力、および必要な出力の例を提供してください。 また、実際の出力が望ましくないだけなのか、構文エラーが発生するのかを示します。 構文エラーが優先されます。 私は@thaumeからこれまでに1つ持っています-

//input
import { mod1, mod2 } from 'filePath';

// actual output - non-breaking 
import { 
  mod1, 
  mod2 
} from 'filePath';

// desired output (unchanged)
import { mod1, mod2 } from 'filePath';

ノート:

  • お互いのコメントを見て、わずかな違いでフォーマットのクラスを繰り返さないようにしてください。 最善の努力は大丈夫です。 :笑顔:
  • ブレースの位置決めが重要な問題になります。 現在、すべてのタイプのブレースを配置するための1つの設定があります-折りたたみ、拡張、
  • 元の問題が修正されたため、この問題を閉じて、提供されたさまざまな入力に対して新しい問題を開く可能性があります。

@bitwiseman上記のサンプルは、まさに私が期待するものです。 私は最近AtomエディターでES6を使って遊んでいますが、インポートが混乱しているという理由だけで、保存時に自動フォーマットがありません。

期待/入力:

import { Bar } from 'lib/Bar';

class Foo {
    constructor() {
        this.bar = new Bar();
    }
}

export { Foo };

今はどうですか:

import {
    Bar
}
from 'lib/Bar';

class Foo {
    constructor() {
        this.bar = new Bar();
    }
}

export {
    Foo
};

フォーマット時にコードが壊れる例はまだわかりません。

これはインポート/エクスポートではなく、jsxに関連しているので、おそらく完全に異なる獣ですが、修正が関連していると想像できます。

return <div {...props}></div>;

になります

return <div {...props
    } > < /div>;

e4x = trueを設定しましたか?

はい、私はそうしました、そして私はそれが尊重されていることをリテラルなしで通常のjsxで見ることができます。 ただし、最も外側のタグに{... props}のようなリテラルがあると、フォーマットがすぐに壊れます。 リテラルがネストされた要素内にある場合、それはわずかにうまく機能しますが、それでも終了タグで壊れます。 これが適切な場所/問題である場合は、さらに例を投稿できます。

@loopmode-上記の例で新しい問題を開いてください。

+1

:+1:これはオブジェクトの破壊にも影響します。

var { type, size } = someObject;

に変換されます

var {
        type, size
    } = someObject;

:+1:アトムを使用しているときもインポートとjsxフォーマットが壊れています

+1

+1

+1

+1

js-beautify 1.5.10を使用すると、次のようになります。

入力:

import { x, y, z } from './other';

出力:

import {
    x, y, z
}
from './other';

エンディングブレースの後の改行は絶対に必要ありません。

+1

これをサポートするための計画はありますか?

これはまだ修正されていませんか?

まだ開いています。 プルリクエストは大歓迎です。

+1

を使用した回避策がありますが:
/ *保存を美化する:開始_ /
/ _ beautifypreserve :end * /

これは見た目があまり良くありません。

+1

+1

+1

興味のある人にとって、残りの問題はimport {x, y} from './other'です。 これは、非構造化オブジェクトのサブケースのようです。 #511を参照してください。

インポートの動作は引き続き発生しますが、すべてのチケットが閉じられています。 Atomで美化した後、インポートで1行を保持するにはどうすればよいですか? ありがとう!

了解しました。必要なのは、.jsbeautifyrcに次の構成を追加することだけでした。

{
  "preserve_newlines": true,
  "max_preserve_newlines": 2
}

importでこの問題がまだ発生しています。 1.6.3を使用しています

import { mod1, mod2 } from 'filePath';

になります

import { 
  mod1, 
  mod2 
} from 'filePath';

正しく機能している方のために、正しいプロパティを指摘して.rcファイルjsonを投稿できますか? なぜそれがまったく機能しないのか私にはわかりません。

{
  "preserve_newlines": true,
  "max_preserve_newlines": 2
}

それはそれを修正しませんでした(上記のように)

@ the-simian正しいオプションは"brace_style": "collapse-preserve-inline"で、Atomプリファレンスを通過する場合は[ブレーススタイル]セクションにあります。 「preserve_newlines」オプションは、ファイル全体で改行を保持するためのものです。 しかし、あなたは間違いなくそれが真実であることを望んでいます。 :)

@eloquence更新してくれてありがとう、できるだけ早く試してみます
編集:_それはそれでした_

.jsbeautifyrcファイルのコンテキスト完全に機能するjsonは次のとおりです。

{
    "brace_style": "collapse-preserve-inline", //<----that
    "break_chained_methods": false,
    "end_with_newline": false,
    "eol": "\n",
    "eval_code": false,
    "indent_char": "  ",
    "indent_level": 0,
    "indent_size": 1,
    "indent_with_tabs": true,
    "jslint_happy": false,
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "max_preserve_newlines": 4, //<---this
    "preserve_newlines": true, // <---this too
    "space_after_anon_function": false,
    "space_before_conditional": true,
    "unescape_strings": false,
    "wrap_attributes": "auto",
    "wrap_attributes_indent_size": 2,
    "wrap_line_length": 0
}

@loopmode collapse-preserve-inlineで同様の問題が発生しました

"brace_style": "collapse-preserve-inline",

入力:

const _state = { ...state }

出力:

const _state = {...state }

collapse-preserve-inline機能しますが、 end-expandまたはexpandで同じ動作をする方法はありません。 end-expand-preserve-inlineなどを他のオプションで取得したり、 preserve-inline-bracesオプションでtrueまたはfalseを取得したりする方法はありますか?

@ Coburn37-新しい問題を提出するか、#1052を参照して、それがあなたの望むものを説明しているかどうかを確認してください。

+1。 私は崩壊、保存インラインのファンではありません。 インポート専用のルールを追加したいのですが...

このページは役に立ちましたか?
0 / 5 - 0 評価