web-dev-qa-db-ja.com

VSCodeでjsxを自動インデントする方法

VSCodeはjsxのHTML要素を自動インデントしないようですか？

enter image description here

それを修正する方法はありますか。

更新：

InAtom：

<div>を入力すると、atomが表示されます： enter image description here

returnキーを押した後、結果は（カーソルの位置に注意してください）： enter image description here

VSCodeの場合：

enter image description here

enter image description here

reactjsvisual-studio-codejsx
19
zhuscat

言語モードをJavaScript Reactに変更してみてください。

  1. コマンドパレットを開きます。
  2. タイプchange language mode
  3. 押す Enter
  4. タイプjavascript react
  5. 押す Enter

完了すると、左下隅にJavaScript Reactモードが表示されます。

Confirmation of JavaScript React Mode

そのモードになったら、ドキュメントのフォーマットを再試行してください。

31
Shaun Luttin

言語をJavascript Reactに変更し（手順については他の回答を参照）、次のコマンドを使用します。

alt + shift + f
12
kendotwill

esben Petersenによる拡張機能「Prettier-Code formatter」を使用します。ファイルがjsxファイルであると仮定すると、保存時に自動フォーマットされます。

0
Mo7

1。ユーザー設定を追加

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

2。プラグインのインストール

Auto Install Tag

そしてリロード。問題が修正されます。

ところで、私は今バグがあると思う。コンポーネントの小道具の自動インデントがなければうまく機能しますが、小道具があれば、今は機能しません。

<Component>Enter

===>

<Component>
    :
</Component>

だが

<Component someProps={10}}Enter

===>

<Component someProps={10}>
:</Component>

これを修正できる人は私を助けてください:)私はMacで使用しています

0
Juntae