search
HomeDevelopment ToolssublimeShare 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

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 <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> Add <pre class="brush:php;toolbar:false">{   &quot;keys&quot;: [&quot;super+shift+c&quot;],   &quot;command&quot;: &quot;format_javascript&quot; }</pre> 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!

Statement
This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
Sublime Text: Free to Try, Not Necessarily Free to OwnSublime Text: Free to Try, Not Necessarily Free to OwnMay 07, 2025 am 12:02 AM

SublimeText offers a free trial, but ultimately requires a paid purchase for a permanent authorization. 1) During the free trial period, users can experience its functions, but they will receive a purchase prompt. 2) After purchase, users can use it permanently, no subscription fee, and access more plug-ins and themes.

Sublime Text: Comparing Paid and Unpaid FeaturesSublime Text: Comparing Paid and Unpaid FeaturesMay 06, 2025 am 12:07 AM

ThemaindifferencesbetweenthepaidandunpaidversionsofSublimeTextaretheremovalofstatusbarremindersandoccasionalpop-uppromptsinthepaidversion.1)Unregisteredversion:fullyfunctionalwithallcorefeatureslikesyntaxhighlighting,codecompletion,andcommandpalette,

Sublime Text: The Cost of a Powerful EditorSublime Text: The Cost of a Powerful EditorMay 05, 2025 am 12:04 AM

SublimeText is worth buying. 1) Its simple interface and powerful functions, such as multi-line editing and GotoAnything, improve development efficiency. 2) Rich plug-in ecosystem, such as Anaconda, enhances the development experience. 3) Although the price is $70, its performance and fluency are great value for professional developers.

Sublime Text: Code Completion, Syntax Highlighting, and MoreSublime Text: Code Completion, Syntax Highlighting, and MoreMay 04, 2025 am 12:04 AM

SublimeText is loved by developers for its powerful code completion and syntax highlighting capabilities. 1) Code completion can automatically prompt function names, variable names, etc. to improve programming efficiency. 2) Syntax highlighting distinguishes code elements through different colors to improve readability and error detection speed.

Sublime Text vs. VS Code: A Comparative AnalysisSublime Text vs. VS Code: A Comparative AnalysisMay 03, 2025 am 12:07 AM

SublimeTextisidealforthosevaluingspeedandsimplicity,whileVSCodesuitsthoseneedingextensivefeaturesandcustomization.SublimeTextoffersquickfileaccesswith"GotoAnything"andaminimalisticapproach,butmaylackout-of-the-boxfunctionality.VSCodeprovide

Sublime Text: Your Coding CompanionSublime Text: Your Coding CompanionMay 02, 2025 am 12:01 AM

SublimeTextisapowerfulcodingcompanionduetoitsspeed,customization,andkeyfeatures.1)Itoffersincrediblespeedforhandlinglargefiles.2)Itsflexibilityallowsextensivecustomizationwithpluginsandthemes.3)Featureslikemultiplecursors,GotoAnything,CommandPalette,

Choosing Between Sublime Text and VS Code: Which Editor is Best?Choosing Between Sublime Text and VS Code: Which Editor is Best?May 01, 2025 am 12:03 AM

SublimeText is more suitable for users who work with large files and prefer lightweight editors, while VSCode is more suitable for users who need IDE capabilities and powerful scalability. 1.SublimeText is known for its speed and simplicity, and is suitable for handling large files. 2.VSCode is known for its scalability and Microsoft support, and is suitable for users who need IDE capabilities.

Sublime Text: An Introduction to the Code EditorSublime Text: An Introduction to the Code EditorApr 30, 2025 am 12:11 AM

SublimeText is a powerful and flexible code editor that is worthy of exploration by programmers. 1) It supports multiple selection and editing, allowing multiple locations to be modified at the same time. 2) The plug-in system is rich and extensible. 3) The basic usage is intuitive, and the advanced usage includes regular expressions and macros. 4) Common errors such as plug-in conflicts can be resolved by uninstalling or adjusting the configuration. 5) Performance optimization is achieved through management plug-ins and configuration files.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.