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

Home

Development Tools

sublime

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

藏色散人

Apr 28, 2021 pm 04:54 PM

jsxprettierreact.js

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">{ "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" } }</pre> Add <pre class="brush:php;toolbar:false">{ "keys": ["super+shift+c"], "command": "format_javascript" }</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 vs. VS Code: Which is the Best Choice?Apr 15, 2025 am 12:01 AM

Choosing SublimeText or VSCode depends on personal needs: 1. SublimeText is suitable for users who pursue lightweight and efficient editing. It starts quickly but requires a license to purchase. 2. VSCode is suitable for users who need powerful debugging and rich plug-ins. It consumes high resources but is open source and free.

Sublime Text vs. VS Code: Plugin Ecosystems and ExtensibilityApr 14, 2025 am 12:10 AM

SublimeText and VSCode have their own advantages in plug-in ecology and scalability. SublimeText manages plug-ins through PackageControl, which have a small number of plug-ins but high quality, and mainly uses Python script extensions. VSCode has a huge Marketplace, with a large number of plug-ins and frequent updates. It uses TypeScript and JavaScript to expand, and its API is more comprehensive.

Sublime Text: The Price and Its Value PropositionApr 13, 2025 am 12:06 AM

The license price of SublimeText is $99, which is worth buying because: 1) it provides an efficient editing experience and improves work efficiency; 2) it has a rich plug-in ecosystem to meet personalized needs; 3) it supports cross-platform use and is suitable for different operating systems; 4) it can receive continuous updates and technical support after purchase.

Sublime Text: Customizable and Efficient Code EditingApr 12, 2025 am 12:08 AM

SublimeText is a powerful and highly customizable editor. 1) It supports multiple programming languages and provides functions such as multi-line editing, code folding, etc. 2) Users can customize through plug-ins and configuration files, such as using PackageControl to manage plug-ins. 3) Its underlying layer is based on Python, supports multi-threading and GPU acceleration, and has excellent performance. 4) Basic usage includes shortcut key operations, and advanced usage involves macros and Snippets. 5) Frequently asked questions such as failure to install the plug-in, it can be solved by checking the network and updating it. 6) Performance optimization suggestions include cleaning up plug-ins and using cache reasonably.

Sublime Text: License Details ExplainedApr 10, 2025 am 09:34 AM

SublimeText's license is a permanent digital key that unlocks all features and removes trial tips. After purchase, it is activated through the official website. The same key can be used for personal use by multiple devices, so you must avoid violations of the terms of use.

Sublime Text Package Control: Mastering Package ManagementApr 09, 2025 am 12:08 AM

PackageControl improves the development experience of SublimeText through the following steps: 1. Install PackageControl and use a few lines of command to complete it. 2. Access PackageControl through shortcut keys or menus to install, update and delete plug-ins. 3. Regularly clean and update plug-ins to optimize performance and improve development efficiency. Through these operations, developers can focus on programming and improve the overall development experience.

Sublime Text Project Management: Organizing and Navigating CodebasesApr 08, 2025 am 12:05 AM

SublimeText's project management function can efficiently organize and navigate the code base through the following steps: 1. Create a project file and save the .sublime-project file using SaveProjectAs in the Project menu.... 2. Configure project files, specify the included folders and settings, such as excluding specific files or setting up the build system. 3. Open the project file and quickly load the project environment through OpenProject in the Project menu. 4. Optimize project files to avoid including too many folders, and use the exclusion mode to improve navigation speed. Through these steps, you can use SublimeText's project management capabilities to improve development efficiency and code quality.

Sublime Text Command Palette: Unleash the Power of SublimeApr 07, 2025 am 12:17 AM

Using the CommandPalette of SublimeText can improve productivity. 1) Open CommandPalette (Ctrl Shift P/Windows/Linux, Cmd Shift P/Mac). 2) Enter the command keyword, such as "InstallPackage" or "DarkTheme". 3) Select and execute commands, such as installing plug-ins or switching themes. Through these steps, CommandPalette can help you perform various tasks quickly and improve the editing experience.

See all articles