JSX および es201x コード形式をサポートする sublime text3 のプラグインを共有する

次のチュートリアル コラムでは、JSX および es201x コード形式をサポートする Sublime Text 3 用のプラグインを推奨しています。困っている友人の役に立てば幸いです。

JSX と es201x コード形式をサポートする Sublime Text 3 のプラグインをお勧めします

最近

React# を使い始めました## 当時、私が使用していた崇高なテキスト 3 は、本当に私を強迫性障害に悩ませていました。

JSX

の強調表示をサポートしていませんでした。

Babel をインストールした後、新しい問題が発生しました。フォーマット プラグインがハングしました。 。 。 2 つまたは 3 つのプラグイン (jsfmt など) を試しましたが、理想的なものではありませんでした。

esformatter-jsx

は使えますが、JSX のインデントと
switch などの文の変なインデントがひどいです。 最後に、IDE を変更しようとしていたときに、VSCode フォーマット プラグインの構成項目の 1 つが esformatter-jsx であり、prettier## も選択できることに気付きました。 ＃。
prettier 公式 Web サイト (Science Internet): https://prettier.io/docs/en/install.html Facebook が React のコードを最適化するためにこれを使用していることがわかります。 プロジェクト。詳しくは説明しませんでした。

実行

npm i -g prettier
ダウンロードしたパッケージには、オントロジーである bin-prettier.js

が含まれています。

sublime text3 パッケージ コントロール
で prettier を直接検索してダウンロードし、その

User

設定項目を開き、次のように追加して保存します。 ローカルの node および node_modules パスの変更に注意してください

{
  "debug": false,
  "prettier_cli_path": "/usr/local/lib/node_modules/prettier/bin-prettier.js",
  "node_path": "/usr/local/bin/node",
  "auto_format_on_save": false,
  "auto_format_on_save_excludes": [],
  "allow_inline_formatting": false,
  "custom_file_extensions": [],
  "max_file_size_limit": -1,
  "additional_cli_args": {},
  "prettier_options": {
    "printWidth": 80,
    "singleQuote": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "parser": "babylon",
    "semi": true,
    "requirePragma": false,
    "proseWrap": "preserve",
    "arrowParens": "avoid"
  }
}

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{   &quot;keys&quot;: [&quot;super+shift+c&quot;],   &quot;command&quot;: &quot;format_javascript&quot; }</pre><div class="contentsignin">ログイン後にコピー</div></div> をショートカット キー設定に追加します。詳細については、github でプラグイン作成者の Readme を確認してください。プラグインの機能がすべての機能ではありません。コマンド ラインの指示を使用してコードをフォーマットできます (直接引用することもできます)プロジェクト内で?)

以上がJSX および es201x コード形式をサポートする sublime text3 のプラグインを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。