Configuring pre-commit for jsx, Typescript, tsx

There’s not a lot of documentation on how to use the pre-commit method (maybe that’s by design?) but this is what I’ve done.

pip install pre-commit
touch .pre-commit-config.yaml

.pre-commit-config.yaml

    -   repo: https://github.com/prettier/prettier
        sha: 'a29b407'  # Use the sha or tag you want to point at
        hooks:
        -   id: prettier

pre-commit install
pre-commit autoupdate

.App.jsx

    export default class extends Component {
        handleChange = (e) => {
            this.setState({
                input: e.target.value,
            });
            console.log('aye', 'foo', 'blah', 'blah', 'aye', 'foo', 'blah', 'blah', 'aye', 'foo', 'blah', 'blah');
            console.log('aye', 'foo', 'blah', 'blah', 'aye', 'foo', 'blah', 'blah', 'aye', 'foo', 'blah', 'blah');
            console.log('aye', 'foo', 'blah', 'blah', 'aye', 'foo', 'blah', 'blah', 'aye', 'foo', 'blah', 'blah');
            console.log('aye', 'foo', 'blah', 'blah', 'aye', 'foo', 'blah', 'blah', 'aye', 'foo', 'blah', 'blah');
    
            [
                        'lorem',
                        'ipsum',
                        'dolor',
                        sit('amet'),
                        consectetur['adipiscing'] + 'elit',
                    ].reduce((first, second) => first + second, '');
    
        }
        // ...
        // ....

git add --all
git commit

Then I see this:

This is working on regular js files if I attempt to commit them, but not jsx or tsx (I didn’t try regular ts).

As to why I’m using pre-commit, it’s in the Readme as being acceptable to use, and I’d also like to keep the ability to stage hunks without staging the entire file.

I also have a followup question: does the pre-commit stuff use the .prettierrc config file, or do you need to pass in your own styles? If so, how do you do this as well?

[asottile]

@reywright the latest configuration (just merged) should support ts / tsx as well – thanks for the issue!

To get the latest version (before a tagged release is made in prettier) you can use pre-commit autoupdate --bleeding-edge (this will get the latest revision of master instead of the latest tag). Or use 4d68faf or newer.

@chriskuehl thanks again for pinging 😄 @vjeux if there’s additional issues about pre-commit integration now or in the future, feel free to ping me 😃

[asottile]

Sweet, here’s my proposal in PR form: https://github.com/prettier/prettier/pull/2759