feat: add `TypeScript` parser support to playground #714

Tanujkanti4441 · 2025-03-31T09:33:35Z

Prerequisites checklist

I have read the contributing guidelines.

What is the purpose of this pull request?

What changes did you make? (Give an overview)

Added an option called Parser under the section Versioning and Configuration to enable @typescript-eslint/parser in playground.

Related Issues

#709

Is there anything you'd like reviewers to focus on?

netlify · 2025-03-31T09:33:54Z

✅ Deploy Preview for hi-eslint ready!

Name	Link
🔨 Latest commit	`580bccc`
🔍 Latest deploy log	https://app.netlify.com/projects/hi-eslint/deploys/683ad52fb01da20008251485
😎 Deploy Preview	https://deploy-preview-714--hi-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-03-31T09:33:54Z

✅ Deploy Preview for new-eslint ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`580bccc`
🔍 Latest deploy log	https://app.netlify.com/projects/new-eslint/deploys/683ad52fed5ec60008f3514c
😎 Deploy Preview	https://deploy-preview-714--new-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-03-31T09:33:55Z

✅ Deploy Preview for ja-eslint ready!

Name	Link
🔨 Latest commit	`580bccc`
🔍 Latest deploy log	https://app.netlify.com/projects/ja-eslint/deploys/683ad52f4f73860008601e0e
😎 Deploy Preview	https://deploy-preview-714--ja-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-03-31T09:36:10Z

✅ Deploy Preview for zh-hans-eslint ready!

Name	Link
🔨 Latest commit	`580bccc`
🔍 Latest deploy log	https://app.netlify.com/projects/zh-hans-eslint/deploys/683ad52f2e56240008475012
😎 Deploy Preview	https://deploy-preview-714--zh-hans-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-03-31T09:36:28Z

✅ Deploy Preview for es-eslint ready!

Name	Link
🔨 Latest commit	`580bccc`
🔍 Latest deploy log	https://app.netlify.com/projects/es-eslint/deploys/683ad52f4f73860008601e0c
😎 Deploy Preview	https://deploy-preview-714--es-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-03-31T09:36:35Z

✅ Deploy Preview for fr-eslint ready!

Name	Link
🔨 Latest commit	`580bccc`
🔍 Latest deploy log	https://app.netlify.com/projects/fr-eslint/deploys/683ad52f81056100088a1f06
😎 Deploy Preview	https://deploy-preview-714--fr-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-03-31T09:38:53Z

✅ Deploy Preview for pt-br-eslint ready!

Name	Link
🔨 Latest commit	`580bccc`
🔍 Latest deploy log	https://app.netlify.com/projects/pt-br-eslint/deploys/683ad52f341c1b0008f624f3
😎 Deploy Preview	https://deploy-preview-714--pt-br-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-03-31T09:39:03Z

✅ Deploy Preview for de-eslint ready!

Name	Link
🔨 Latest commit	`580bccc`
🔍 Latest deploy log	https://app.netlify.com/projects/de-eslint/deploys/683ad52fa2783a000841292c
😎 Deploy Preview	https://deploy-preview-714--de-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

webpack.config.js

package.json

nzakas · 2025-04-10T15:54:19Z

This is looking good! Can we make the default parser option say "Espree (default)"?

@snitin315 this is waiting for your re-review.

snitin315 · 2025-04-17T11:08:06Z

src/playground/App.js

+			...(options?.languageOptions.parser && {
+				parser: typeScriptESLintParser,
+			}),


We need to make sure to pass the languageOptions.sourceType correctly to parserOptions.sourceType in case of typeScriptESLintParser, More information here eslint/eslint#19563 (comment)

webpack.config.js

snitin315

I think we can also remove impliedStrict from ecma features in case of typescriptEslintParser. As per the docs, only jsx & globalReturn seems to be valid.

snitin315 · 2025-05-06T02:50:58Z

@Tanujkanti4441 It seems there are few merge conflicts now, can you please resolve them?

snitin315

LGTM, thanks!

Would like @nzakas to verify as well.

mdjermanovic

When @typescript-eslint/parser is selected, downloaded config file looks like this:

export default [
    {
        "languageOptions": {
            "parser": true
        }
    }
];

Which is an invalid config file. Perhaps the config file should import the parser and use it?

mdjermanovic · 2025-05-13T07:38:43Z

The value of "parser" serialized in the URL is also true. Perhaps we could use a string value ("@typescript-eslint/parser") to allow for adding more parsers in the future?

Tanujkanti4441 · 2025-05-16T17:54:11Z

The value of "parser" serialized in the URL is also true. Perhaps we could use a string value ("@typescript-eslint/parser") to allow for adding more parsers in the future?

i didn't get It may be, you mean parser: "@typescript-eslint/parser" in downloaded config file?

nzakas · 2025-05-28T14:55:50Z

Ping @mdjermanovic

mdjermanovic · 2025-05-29T09:38:39Z

The value of "parser" serialized in the URL is also true. Perhaps we could use a string value ("@typescript-eslint/parser") to allow for adding more parsers in the future?

i didn't get It may be, you mean parser: "@typescript-eslint/parser" in downloaded config file?

Sorry for the delay. I was referring to encoded config in the URL.

For example:

https://deploy-preview-714--new-eslint.netlify.app/play/#eyJ0ZXh0IjoiIiwib3B0aW9ucyI6eyJydWxlcyI6e30sImxhbmd1YWdlT3B0aW9ucyI6eyJwYXJzZXJPcHRpb25zIjp7ImVjbWFGZWF0dXJlcyI6eyJqc3giOnRydWV9LCJzb3VyY2VUeXBlIjoibW9kdWxlIn0sInBhcnNlciI6dHJ1ZX19fQ==

The part after # is Base64-encoded text and config:

{
  "text": "",
  "options": {
    "rules": {},
    "languageOptions": {
      "parserOptions": {
        "ecmaFeatures": { "jsx": true },
        "sourceType": "module"
      },
      "parser": true
    }
  }
}

"parser": true means that the "@typescript-eslint/parser" should be used. But that limits the Playground URLs to only one custom parser, and if we add more in the future, we'd need to support true for backcompat. I think it would be better to encode parser: "@typescript-eslint/parser" from the start.

Tanujkanti4441 · 2025-05-29T10:08:17Z

"parser": true means that the "@typescript-eslint/parser" should be used. But that limits the Playground URLs to only one custom parser, and if we add more in the future, we'd need to support true for backcompat. I think it would be better to encode parser: "@typescript-eslint/parser" from the start.

@mdjermanovic, i tried to fix this in 229a2e1 can you check this please and tell if it still needs an update?

mdjermanovic · 2025-05-29T10:15:14Z

"parser": true means that the "@typescript-eslint/parser" should be used. But that limits the Playground URLs to only one custom parser, and if we add more in the future, we'd need to support true for backcompat. I think it would be better to encode parser: "@typescript-eslint/parser" from the start.

@mdjermanovic, i tried to fix this in 229a2e1 can you check this please and tell if it still needs an update?

I was testing today with the deploy preview (which I believe should represent the latest version), and URLs the Playground generates still have "parser":true encoded.

feat: add typescript parser support

648d747

github-project-automation bot added this to Triage Mar 31, 2025

github-project-automation bot moved this to Needs Triage in Triage Mar 31, 2025

eslint-github-bot bot added the feature label Mar 31, 2025

snitin315 requested changes Apr 2, 2025

View reviewed changes

webpack.config.js Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

Tanujkanti4441 added 2 commits April 4, 2025 17:33

apply suggestion and fix lint errors

c02859b

enablcript parser

1b47571

Tanujkanti4441 marked this pull request as ready for review April 4, 2025 14:49

snitin315 moved this from Needs Triage to Implementing in Triage Apr 8, 2025

update label of default parser to Espree (default)

e5eaa64

snitin315 reviewed Apr 17, 2025

View reviewed changes

pass sourceType under parserOptions

274e8f8

Tanujkanti4441 mentioned this pull request Apr 29, 2025

docs: playground button for TypeScript code example eslint/eslint#19671

Draft

1 task

snitin315 reviewed Apr 30, 2025

View reviewed changes

webpack.config.js Show resolved Hide resolved

snitin315 reviewed Apr 30, 2025

View reviewed changes

Tanujkanti4441 added 2 commits April 30, 2025 14:57

remove impliedStrict for typescript parser

e8b8d86

update

944d954

Tanujkanti4441 added 2 commits May 10, 2025 17:39

Merge branch 'main' into support-typescript-play

3cc3a1b

resolve merge conflict

d2e6a0e

snitin315 previously approved these changes May 11, 2025

View reviewed changes

mdjermanovic reviewed May 13, 2025

View reviewed changes

lumirlumir linked an issue May 15, 2025 that may be closed by this pull request

Suggestion: Support TypeScript syntax in playground #709

Open

1 task

lumirlumir added the accepted label May 15, 2025

snitin315 mentioned this pull request May 20, 2025

Suggestion: support official plugins like markdown, css, json #730

Open

1 task

fix parser's value in downloaded config

229a2e1

Tanujkanti4441 dismissed snitin315’s stale review via 229a2e1 May 24, 2025 15:45

Tanujkanti4441 added 4 commits May 30, 2025 21:41

Merge branch 'main' into support-typescript-play

c3d6521

fix parser value in URL

a6e3f1b

fix CI

6d04060

update

580bccc

Uh oh!

feat: add TypeScript parser support to playground #714

Are you sure you want to change the base?

feat: add TypeScript parser support to playground #714

Uh oh!

Conversation

Tanujkanti4441 commented Mar 31, 2025

Prerequisites checklist

What is the purpose of this pull request?

What changes did you make? (Give an overview)

Related Issues

Is there anything you'd like reviewers to focus on?

Uh oh!

netlify bot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hi-eslint ready!

Uh oh!

netlify bot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for new-eslint ready!

Uh oh!

netlify bot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ja-eslint ready!

Uh oh!

netlify bot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for zh-hans-eslint ready!

Uh oh!

netlify bot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for es-eslint ready!

Uh oh!

netlify bot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for fr-eslint ready!

Uh oh!

netlify bot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for pt-br-eslint ready!

Uh oh!

netlify bot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for de-eslint ready!

Uh oh!

Uh oh!

Uh oh!

nzakas commented Apr 10, 2025

Uh oh!

snitin315 Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

Tanujkanti4441 Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

snitin315 left a comment

Choose a reason for hiding this comment

Uh oh!

snitin315 commented May 6, 2025

Uh oh!

snitin315 left a comment

Choose a reason for hiding this comment

Uh oh!

mdjermanovic left a comment

Choose a reason for hiding this comment

Uh oh!

mdjermanovic commented May 13, 2025

Uh oh!

Tanujkanti4441 commented May 16, 2025

Uh oh!

nzakas commented May 28, 2025

Uh oh!

mdjermanovic commented May 29, 2025

Uh oh!

Tanujkanti4441 commented May 29, 2025

Uh oh!

mdjermanovic commented May 29, 2025

Uh oh!

Uh oh!

feat: add `TypeScript` parser support to playground #714

feat: add `TypeScript` parser support to playground #714

netlify bot commented Mar 31, 2025 •

edited

Loading

netlify bot commented Mar 31, 2025 •

edited

Loading

netlify bot commented Mar 31, 2025 •

edited

Loading

netlify bot commented Mar 31, 2025 •

edited

Loading

netlify bot commented Mar 31, 2025 •

edited

Loading

netlify bot commented Mar 31, 2025 •

edited

Loading

netlify bot commented Mar 31, 2025 •

edited

Loading

netlify bot commented Mar 31, 2025 •

edited

Loading