JSX Formatting Breaks

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": "[e-mail]",
  "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]

@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!

[CiGit]

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