Skip to content

Beautify don't work in React Functional Component #405

@mrhrifat

Description

@mrhrifat
  • Operating System (+Version): Linux Ubuntu 18.04
  • VS Code Version: 1.62.2
  • beautify Version: 1.5.0

NOTE: Please provide code snippets instead of screen shots. Your issue needs to be replicated, and we need the failing code (text) to do this.

Provide the settings you use:
(VS Code workspace and user settings, .jsbeautifyrc, .editorconfig)
VS Code:

{
    "editor.inlayHints.fontSize": 8,
    "workbench.colorCustomizations": {},
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 100,
    "liveServer.settings.donotShowInfoMsg": true,
    "explorer.confirmDelete": false,
    "workbench.colorTheme": "Andromeda Bordered",
    "explorer.confirmDragAndDrop": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.quickSuggestions": true,
    "[javascriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "editor.inlineSuggest.enabled": true,
    "github.copilot.enable": {
        "*": false,
        "yaml": false,
        "plaintext": true,
        "markdown": true,
        "javascriptreact": true,
        "javascript": false
    },
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "git.enableSmartCommit": true
}

Action performed

Format javascript file with HookyQR.beautifyFile command
provide example code

  • Whenever I press (ctrl+s) than it' works for React Class Component in good way but it doesn't work for React Function Component.
  • React Function Component Code:
import React from 'react'

const Home=props=> {
    return (
        <div>
                    <h4>Hey</h4>
        </div>
    )
}

export default Home

Expected results

Expected ... to ...
provide example (expected) output

import React from 'react'

const Home=props=> {
    return (
        <div>
            <h4>Hey</h4>
        </div>
    )
}

export default Home

Actual results

Details of what happened ...
provide example (actual) output

import React from 'react'

const Home = props => {
    return ( <
        div >
        <
        h4 > Hey < /h4> <
        /div>
    )
}

export default Home

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions