Home > Development Tools > sublime > Share a plug-in for sublime text3 that supports JSX and es201x code formatting

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

藏色散人
Release: 2021-04-28 16:54:03
forward
2494 people have browsed it

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

Share a plug-in for sublime text3 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!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template