JSX Formatting in Sublime Text 3

NOTE - First and foremost there is no direct single package utpill now that does >the job for you. If you think installing babel-sublime will do then this then you are wrong, it enables syntax highlighting but does not format the code for you.

Follow these steps on ST3

• Install jsfmt package

• jsfmt is used for javascript formatting in sublime text. But as we have jsx files with different syntax we will need additional plugins that will help jsfmt format jsx files as well. These additional plugins are esformatter-jsx and esformatter

• Open up the Packages folder by selecting Browse Packages option from Preferences menu and navigate to jsfmt package folder

• run below command which installs the 2 plugins we listed above

  # install both esformatter and esformatter-jsx
  npm i esformatter@latest esformatter-jsx@latest
  

• After you are done installing above two plugins run below two commands to confirm that we have just single instance of the above two plugins in the jsfmt package folder. The output of below two commands should always show just a single entry for the respective package.

  npm ls esformatter
  npm ls esformatter-jsx
  

• Make sure you're using the latest version of esformatter and esformatter-jsx. Make sure there are not other versions of the module in any node_modules folder inside the jsfmt folder. You may find esformatter plugin already installed at jsfmt/node_modules/jsfmt/node_modules folder if found then simple delete the folder.

• For add Keyboard shortcut in sublime for jsfmt you will need to:

  • Go to Preferences -> Key Bindings - User

  • Insert the configuration to call the format_javascript command

        { "keys": ["ctrl+q"], "command": "format_javascript" },
    

• Open a messed up jsx file and press ctrl + q and live the magic !

Credits/Inspiration

• this answer on stack overflow