sublime格式化react jsx 之jsfmt

Usage with jsfmt

Roy Riojas edited this page on May 5 2016 · 2 revisions

 Pages 2

• Home
• Usage with jsfmt

Clone this wiki locally

 Clone in Desktop

Install jsfmt sublime package

Please follow these instructions

Install latest esformatter

# go to the jsfmt package folder
cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/jsfmt/

There run

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

make sure you don't have other esformatter instances

npm ls esformatter
npm ls esformatter-jsx

The output from the commands above should only display the latest esformatter/esformatter-jsx versions.

Add to your JSFMT user settings file

// add to your 
{
  "extensions":
    [
      "js",
      "jsx",
      "sublime-settings"
    ],
  "options": {
    "plugins": [
      "esformatter-jsx",
    ],
    "jsx": {
      "formatJSX": true,
      // change these to your preferred values
      // refer to https://github.com/royriojas/esformatter-jsx#best-configuration for more options
      "attrsOnSameLineAsTag": false, 
      "maxAttrsOnTag": 1,
      "firstAttributeOnSameLine": false,
      "alignWithFirstAttribute": true
    }
    // other esformatter options
  } 
}

Troubleshooting

Still does not work!

• 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

• Make sure you have added the jsx block to the jsfmt.sublime-settings file for the user preferences.

• File a bug in either the jsfmt repo or esformatter-jsx repo. I will happily try to help you make it work!