Possible to configure ESLint?

[rdmurphy]

❔ Question

Is it currently possible to configure ESLint at all? I can see that it's running, but its options don't appear in the VSCode preferences. I'm trying to find a way to change how it treats React pragma (so it doesn't consider preact's h to be "unused") but so far I've had no luck! I've tried to add my own .eslintrc.json but it didn't seem to take.

Link to sandbox: link

[agubler]

@CompuIves I have the same question, I am getting eslint errors in Dojo sandboxes for valid syntax.

Link to sandbox: link

[CompuIves]

Yep! We definitely want to support it, I was playing a bit with making that work before. I thought the "easiest" way would be to start supporting the eslint extension of VSCode, which handles the configuration resolving automatically. The challenge right now is that we need to install all custom eslint plugins that are defined in package.json, that's the last thing needed to make it work methinks.

[CompuIves]

I think your issue @agubler will be fixed with this! #1991

[agubler]

Awesome thanks @CompuIves 🎉

[jsejcksn]

Is this on a roadmap? Is there a CodeSandbox roadmap somewhere?

[rob2d]

@jsejcksn seems like #1991 was merged in but just needs explicit configuration added to CodeSandbox -- unless I'm missing something. Would also love to see this as needing === is not preferred for some people's preferences.

[dougllima]

Any news about this? How to configure this or anything like that.

[ecraig12345]

Any progress here @CompuIves? I'm getting false positives with eslint no-undef in my sandbox due to the lack of eslint/TS integration. The ability to have a custom eslint config or even disable eslint entirely would also be acceptable workarounds. (I'd rather not disable it manually in every file.)

[ecraig12345]

@NickCarducci That’s not eslint doing the formatting, that’s Prettier. You should be able to put a prettier-ignore comment above the line you don’t want formatted using the syntax you described (though finding exactly the right place to put it to get the effect you want can be challenging).

[FrankSandqvist]

I found a decent workaround so far by just disabling specific rules at the top of my files
/* eslint-disable no-undef, no-unused-vars */

[allforabit]

This doesn't work for create react app apps as far as I can see. It's literally just that one rule that I want to disable!

[SaraVieira]

Hey!

This was never implemented at least until now, you will still need to do a workaround like @FrankSandqvist mentioned

[allforabit]

Thanks @SaraVieira , that workaround would be acceptable but it doesn't seem to be working for me: https://codesandbox.io/s/disable-unused-vars-example-syt2t?file=/src/App.tsx

[SaraVieira]

Hey

In your case it needs to be these three:

/* eslint-disable no-undef, @typescript-eslint/no-unused-vars, no-unused-vars */

because you are using TS and need to disable that too :(

https://codesandbox.io/s/disable-unused-vars-example-forked-fz6ki?file=/src/App.tsx:0-80

[allforabit]

Oh brilliant thank you so much! Red squigglies be gone :-)

[SaraVieira]

Nice! Sorry, we do not allow for custom config yet :(

[github-actions]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[jsejcksn]

Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason.

[SaraVieira]

Hey

Thank you for bringing this to our attention, I have just added it to our internal backlog that we do want to make public but for now, it's all in notion.

I will be closing but to make sure what we have in GitHub is just issues and all our feature requests are tracked in our roadmap.

We will definitely make an announcement when this is done

Again, thank you!

[jonathanSimonney]

Just in case given what I read from the discussion, getting the option to configure it for real (rather than just a pure way to disable it entirely) would be immensely helpful for me.

My main goal was to reproduce / ensure I could reproduce a would-be bug with some specific plugin of eslint, and for this, to make a working codesandbox example with the behaviour shown clearly.

Thank you very much for the tool and best of luck with your work on it. ❤️

[sitek94]

Hello @SaraVieira 👋

Is there any update on this, do you still plan to add a possibility to use custom ESLint config? :)

[JamesACS]

Hey @sitek94 - This is still something that we're actively exploring but there are some issues that we haven't managed to resolve just yet. If we manage to resolve them we won't be able to release this until at least next year.

[sitek94]

All right, thanks for information @JamesACS! Good luck with that and 🤞 we will see it one day :D

[rajsite]

Hey @sitek94 - This is still something that we're actively exploring but there are some issues that we haven't managed to resolve just yet. If we manage to resolve them we won't be able to release this until at least next year.

Interested for the use cases of eslint, typescript-eslint, and angular-eslint integration in the codesandbox editor 👍

[tjcrowder]

I wanted to demonstrate top-level await for someone, and couldn't use CodeSandbox to do it because there was no way to tell CodeSandbox not to run ESLint on the file -- and ESLint's parser failed on the top-level await! (It must be a bit out of date?) Since it's a parsing-level error, I can't just disable ESLint for that part.

I was surprised to see that adding an .eslintIgnore file didn't fix it, nor did adding an "eslintIgnore" entry in package.json.

[nodsaibot]

I found a decent workaround so far by just disabling specific rules at the top of my files /* eslint-disable no-undef, no-unused-vars */

A++ 100% works