Prettier-vscode: JSX Formatting Breaks

[codematix]

When I use Format Document command in VSCode with prettier-vscode, the formatting of my JSX file breaks.

It looks like prettier-vscode is not reading my configuration also.

P.S. When I try the command-line version of the prettier tool, the output is correct.

VSCode version - 1.23.0
prettier-vscode version - 1.3.1
OS - Linux Mint 18.3 Cinnamon 64-bit (Kernel - 4.13.0-39-generic)

Original File: HelloButton.jsx

const { Component } = require('react')

class HelloButton extends Component {
  render() {
    const {
      caption,
      className
    } = this.props

    return (<button className={className}>{caption}</button>)
  }
}

module.exports = HelloButton

After Formatting: HelloButton.jsx

const {
  Component
} = require('react')

class HelloButton extends Component {
  render() {
    const {
      caption,
      className
    } = this.props

    return ( < button className = {
        className
      } > {
        caption
      } < /button>)
    }
  }

  module.exports = HelloButton

.prettierrc

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "insertPragma": true,
  "tabWidth": 2,
  "useTabs": false
}

package.json

{
  "name": "web-client",
  "version": "1.0.0",
  "description": "Web Client",
  "main": "index.js",
  "author": "[email protected]",
  "license": "SEE LICENSE IN LICENSE",
  "private": true,
  "scripts": {
    "build": "webpack --mode=development --env=development",
    "build:prod": "webpack --mode=production --env=production -p",
    "start": "webpack-dev-server --mode=development --env=development --content-base=public"
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ],
    "plugins": [
      "react-require"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-react-require": "^3.0.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.1",
    "cpy-cli": "^1.0.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "prettier": "^1.12.1",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.7.0",
    "webpack-cli": "^2.1.2",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "normalize-scss": "^7.0.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  }
}

Output from prettier CLI

yarn run prettier src/js/components/HelloButton.jsx
yarn run v1.6.0
$ /home/codematix/Projects/cadencebox/web-client/node_modules/.bin/prettier src/js/components/HelloButton.jsx
/** @format */

const { Component } = require('react')

class HelloButton extends Component {
  render() {
    const { caption, className } = this.props

    return <button className={className}>{caption}</button>
  }
}

module.exports = HelloButton
Done in 0.27s.

[codematix]

I made some more observations:

1. I had not installed prettier globally. I now have it installed globally and restarted VSCode.
2. When I set editor.formatOnSave to false, restarted VSCode and used the Format Document command, the formatting seemed to work only for the first time
3. However when I try to run Format Document on other .js files, nothing happens.
4. I again restart VS Code and try Format Document on a non-formatted .js file, it works. And subsequently stops working.

[CiGit]

This may be an other formatter taking precedence.
see #440 #439

[codematix]

@CiGit You are right-on. It was VS Code Beautify. I uninstalled it and restarted VSCode and now prettier-vscode runs great! Thanks a lot!

[parthasaradhikonda]

Ya, it was VS Code Beautify. Thanks a lot.

[wuno]

@codematix Thank you for responding and stating the exact reason you were having this problem. Hours of my life is gone but the earth will keep spinning due to your comment.

[nidhimshaji]

Yes VS Code Beautify was one..Uninstalled it and restarted VSCode and it works now for me too

[ckreutzerTechtonic]

Thanks @CiGit and @codematix I was having the exact same problem with the exact same cause.

[honeykhra]

Thanks It was because of Beautify

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.