Share a plug-in for sublime text3 that supports JSX and es201x code formatting

The following tutorial column recommends a plug-in for sublime text 3 that supports JSX and es201x code formatting. I hope it will be helpful to friends in need!

Recommend a plug-in for sublime text 3 that supports JSX and es201x code formatting

I recently started playing with

React

At that time, the sublime text3 I had been using really made me suffer from obsessive-compulsive disorder. It did not support the highlighting of

JSX

. After installing Babel, a new problem arose. The formatting plug-in hung. . . . I tried two or three plug-ins (jsfmt etc.), but they were not ideal.

esformatter-jsx can be used, but the indentation of JSX
and the weird indentation of statements such as switch are terrible. Finally, when I was about to change IDE, I saw that one of the configuration items of the VSCode formatting plug-in is esformatter-jsx, and you can also choose prettier
. prettier official website (Science Internet): https://prettier.io/docs/en/install.html You can see that Facebook is using it to optimize the code of the React

project. Didn't delve into it.

Executenpm i -g prettier

The downloaded package contains

bin-prettier.js, which is the ontology.
sublime text3 Directly search prettier in

package control

to download, open its User configuration item, add it as follows and save it. Pay attention to modify your local node and

node_modules

paths <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{   &quot;debug&quot;: false,   &quot;prettier_cli_path&quot;: &quot;/usr/local/lib/node_modules/prettier/bin-prettier.js&quot;,   &quot;node_path&quot;: &quot;/usr/local/bin/node&quot;,   &quot;auto_format_on_save&quot;: false,   &quot;auto_format_on_save_excludes&quot;: [],   &quot;allow_inline_formatting&quot;: false,   &quot;custom_file_extensions&quot;: [],   &quot;max_file_size_limit&quot;: -1,   &quot;additional_cli_args&quot;: {},   &quot;prettier_options&quot;: {     &quot;printWidth&quot;: 80,     &quot;singleQuote&quot;: false,     &quot;trailingComma&quot;: &quot;none&quot;,     &quot;bracketSpacing&quot;: true,     &quot;jsxBracketSameLine&quot;: false,     &quot;parser&quot;: &quot;babylon&quot;,     &quot;semi&quot;: true,     &quot;requirePragma&quot;: false,     &quot;proseWrap&quot;: &quot;preserve&quot;,     &quot;arrowParens&quot;: &quot;avoid&quot;   } }</pre><div class="contentsignin">Copy after login</div></div> Add <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">Copy after login</div></div> to the shortcut key configuration. For details, go to Check the plug-in author's Readme on github

The functions of the plug-in are not all functions. You can use instructions on the command line to format the code (can it also be quoted directly in the project?)

The above is the detailed content of Share a plug-in for sublime text3 that supports JSX and es201x code formatting. For more information, please follow other related articles on the PHP Chinese website!