semi's after class methods

[chrisdrackett]

I know this probably isn't an issue with this project, but I'm wondering if someone here might be able to help me figure out what is going on. For just about everything I'm able to have this remove semi's from my code, however within classes I still seem to get them:

input

class MyComponent extends Component {
  static propTypes = {
    prop: PropTypes.node.isRequired,
  }
}

output

class MyComponent extends Component {
  static propTypes = {
    prop: PropTypes.node.isRequired,
  };
}

any idea how I might stop these from being inserted? What is slightly strange is that the linter does not complain in the editor, but on save the semi's are getting inserted.

[chrisdrackett]

using the following config:

module.exports = {
  root: true,
  extends: 'react-app',
  rules: {
    semi: ['error', 'never'],
  }
}

[kentcdodds]

Huh, yeah, I'm not sure about that... I don't have that problem personally. If you could reproduce the issue in a new repository that I can clone and try out then maybe I'll find time to see how I can help :)

[chrisdrackett]

here is a simple test app using create-react-app:

https://github.com/chrisdrackett/prettier_semi_test

https://github.com/chrisdrackett/prettier_semi_test/blob/master/src/App.js has been run through https://github.com/kentcdodds/prettier-eslint-atom via save.

[chrisdrackett]

@kentcdodds I updated the project to be much much simpler:

https://github.com/chrisdrackett/prettier_semi_test

I'm wondering if this is babel related, but as far as I can tell babel should no longer be requiring semicolons?

hzoo/babel@63b328c

I'm still trying to get up to speed on this, so I'm probably missing something :)

[kentcdodds]

Huh, I tried it out and have the same thing. Really weird because I haven't noticed it on my own projects... Could you dig a little deeper?

[chrisdrackett]

I'm not really sure where to dig next at this point. Are you able to use Property Initializers?

[kentcdodds]

Oh! You know what! You're right, it's automatically adding semicolons on public class fields for me too! So the problem is that eslint cannot (by itself) handle public class fields, you need babel-eslint for that. Which you have. But the next problem is that babel-eslint doesn't currently have a semi rule. So it cannot autofix things. So what's happening is prettier adds it, and eslint --fix cannot remove it! But there's a PR to add that support in babel-eslint right now: babel/eslint-plugin-babel#121

Here's hoping that gets merged and released as soon as they're able to get to it!

[kentcdodds]

So that was merged and released. If you could configure babel/semi now, it should work for you!

[chrisdrackett]

yay! bliss.

Thanks @kentcdodds!

[guywaldman]

All glory be to @kentcdodds