web-dev-qa-db-ja.com

VisualStudioコードフォーマットが保存時に失敗する

Reactネイティブの学習を始めました。

エディターとしてVisualStudioCodeを使用しています。

ボイラープレートを設置してアプリを起動しました。しかし、.jsファイルを変更して保存を押すと、VSCodeがすべてのフォーマットを台無しにしてしまいます。

Before saveAfter save

これをsettings.jsonファイルで並べ替えることができると思いましたが、しばらくグーグルして遊んだ後、正しい設定が見つかりません。

これはバグですか、それとも何か間違ったことをしていますか？

設定ファイルはデフォルトです：

enter image description here

更新：vscodeを再インストールしました。次に、reactnativeタグとhtmlタグを使用して基本的なjsファイルを設定します。追加しました：

"editor.formatOnSave": false,
"javascript.format.enable": false

私のsettings.jsonファイルに問題が発生します：

pre savepost save

問題はjsファイルにタグがあることです。vscodeにタグを無視するように指示する方法がわかりませんか？

react-nativeformattingsavevisual-studio-code
11
Jamadan

拡張機能を調べて、これが何であるかを知りました。ヒントをくれた@wgjに感謝します。

それはJS-CSS-HTMLフォーマッターだったことがわかりました。手順を確認し、今のところ自動保存を削除しました。これについては、特定の設定を行う必要があります。

それはjs-beautifyを使用しているので、誰かが私が見なければならない設定を知っているなら、大いに感謝されるでしょう。

enter image description here

16
Jamadan

私も同様の問題を抱えていましたが、私の最終的な原因は...

js-beautify for VS Code by HookQR

だから私は単にワークスペースのためにそれを無効にしました。

3
MarineHero

コンポーネントのファイル拡張子をjsからjsxに変換するによって、この問題の解決策を見つけました。これ以上の問題はなく、すべてが正常に機能しています。

3
Ozesh

settings.jsonで「フォーマット」を検索する必要があります。そこにはTypeScript/JavaScriptのフォーマットの微調整がたくさんありますが、私にとって目立つのは次のとおりです。

  // Defines space handling after opening and before closing non empty brackets.
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false

または、フォーマットのファンではないので、完全にオフにすることができます。

  // Enable/disable default JavaScript formatter.
  "javascript.format.enable": true,

ただし、私のフォーマットオプションの多くは言語サーバー拡張機能からのものであるため、React Native）に使用している場合は、必ずsettings.jsonの属性を確認してください。追加できる属性があるかどうかを確認するためのドキュメント。

1
wgj

Beautifyの代わりにPrettierCodeFormatterを使用してください。言語モードのBabelJavaScriptで完全に機能します

1
Ashyit17
  1. Js-css-htmlフォーマッターを無効にします。
  2. prettierとbeautifyを一緒に使用している場合は、次のように設定を上書きします。
"beautify.ignore": [
        "**/*.js",
        "**/*.jsx"
    ]
1
ishab acharya

これをsettings.jsonファイルに追加します。拡張機能を使用しているかどうかに関係なく、このコードを使用してください。それは私にとってはうまくいきます：

enter image description here

0
Sarath Kumar pgm

私はすべての方法を試しましたが、問題はこれによって完全に解決されます：

Settings.jsonを開きます

"files.associations": {
  "*.js": "javascriptreact"
}

上記の行を追加し、保存を押して問題を解決します

0
Zaman Tariq