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

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

藏色散人

リリース： 2021-04-28 16:54:03

転載

2489 人が閲覧しました

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

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

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

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

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