Suggestion: support official plugins like markdown, css, json

[snitin315]

What problem do you want to solve?

Currently, there is no playground for official plugins like markdown, CSS, json, etc. We have #714 which will add typescript-eslint parser support. I think it make sense to support official language plugins as well.

What do you think is the correct solution?

How about:

• Adding a language/plugin dropdown that would change the editor to lint that perticular language.
• Initially we had some designs for something similar, but this is a pending todo

eslint.org/src/playground/components/Configuration.js

Line 624 in fbd0591

{/* TODO: Add Plugins */}

Participation

• I am willing to submit a pull request for this change.

Additional comments

No response

[nzakas]

I'd like to see some design concepts before committing to it. My main concern is that it will make the UI more complicated.

[lumirlumir]

I'm personally in favor of this change. 👍

[JoshuaKGoldberg]

I'm also in favor. It's been a little inconvenient working around the other plugins without playground support. 😄

+1 to asking for design concepts. Right now the playground is hardcoded to always be JavaScript and single-file. Going multi-file would be a lot more work, so perhaps we can keep to the single-file paradigm and have a "language mode" for that file? The language mode would contain:

• Parser: default to the current JS one; also allow css, markdown, json
• Rules: sourcing the list from the plugin corresponding to the parser

How about storing this under Versioning and Config?

Related: #709 for TypeScript parser support. I imagine this could either always on or a sub-option within the JavaScript language mode. Either way I don't think that blocks this issue.

[nzakas]

I don't think a dropdown under "language options" is the way to go here. It's buried and doesn't indicate that it will basically change how everything works. I think this language used needs to be prominent and always visible on the page, like we have in the Code Explorer.

[github-actions]

Oops! It looks like we lost track of this issue. What do we want to do here? This issue will auto-close in 7 days without an update.

[github-actions]

This issue was auto-closed due to inactivity. While we wish we could keep responding to every issue, we unfortunately don't have the bandwidth and need to focus on high-value issues.