Shulou(Shulou.com)06/02 Report--

Editor to share with you what is the plug-in that sublime text3 supports JSX and es201x code formatting. I hope you will get something after reading this article. Let's discuss it together.

Recently, when I started playing React, I was really afflicted by the obsessive-compulsive disorder sublime text3. I didn't support the highlight of JSX. After installing Babel, a new problem came, and the format plug-in hung up.

Two or three plug-ins (jsfmt etc.) have been tried before and after, but none of them is ideal.

Esformatter-jsx can be used, but that indentation of JSX, as well as weird indentation of statements such as switch, is annoying.

Finally, when I was ready 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 website): https://prettier.io/docs/en/install.html

You can see that Facebook is using it to optimize the code of the React project without digging into it.

Execute npm I-g prettier

There is a bin-prettier.js in the downloaded package, which is the ontology.

Sublime text3 search prettier download directly in package control, open its User configuration item and save it as follows.

Pay attention to modifying your local node and node_modules paths {"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"}}

Add to the shortcut key configuration

{"keys": ["super+shift+c"], "command": "format_javascript"}

Go to github to see the plug-in author's Readme.

The function of the plug-in is not all functions, you can use instructions to format the code in the command exercise, (or can you refer to it directly in the project? )

After reading this article, I believe you have a certain understanding of "what is the plug-in that sublime text3 supports JSX and es201x code formatting". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.