ota-meshi/eslint-plugin-astro

docs: Add `parser: "@typescript-eslint/parser",`

Closed this issue · 3 comments

erikschul commented

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

v8.56.0

What version of eslint-plugin-astro are you using?

0.31.0

What did you do?

Using the docs, I came to the following configuration:

module.exports = {
	extends: ["plugin:astro/recommended"],
	overrides: [
		{
			files: ["*.astro"],
			processor: "astro/client-side-ts",
			parser: "astro-eslint-parser",
			parserOptions: {
				parser: "@typescript-eslint/parser",
				extraFileExtensions: [".astro"],
			},
			rules: {
			},
		},
	],
}

but it failed for <script> with TypeScript when trying to use TypeScript (window as any).

adding parser: "@typescript-eslint/parser", to the root solved the problem.
Maybe the docs should be updated?

Working config:

module.exports = {
	parser: "@typescript-eslint/parser",
	extends: ["plugin:astro/recommended"],
	overrides: [
		{
			files: ["*.astro"],
			processor: "astro/client-side-ts",
			parser: "astro-eslint-parser",
			parserOptions: {
				parser: "@typescript-eslint/parser",
				extraFileExtensions: [".astro"],
			},
			rules: {
			},
		},
	],
}

What did you expect to happen?

.

What actually happened?

.

Link to Minimal Reproducible Example

.

Additional comments

No response

ota-meshi commented

Hi @erikschul.
I think you should add the following section. It's already in the documentation.

    {
      // Define the configuration for `<script>` tag when using `client-side-ts` processor.
      // Script in `<script>` is assigned a virtual file name with the `.ts` extension.
      files: ["**/*.astro/*.ts", "*.astro/*.ts"],
      env: {
        browser: true,
        es2020: true,
      },
      parser: "@typescript-eslint/parser",
      parserOptions: {
        sourceType: "module",
        project: null,
      },
      rules: {
        // override/add rules settings here, such as:
        // "no-unused-vars": "error"

        // If you are using "prettier/prettier" rule,
        // you don't need to format inside <script> as it will be formatted as a `.astro` file.
        "prettier/prettier": "off",
      },
    },
erikschul commented

Hi @ota-meshi ,

Thanks for the feedback.

I'm a bit confused, because I tried following the guide precisely.

The text says When using the shareable configuration provided by the plugin:...
and If you are writing client-side scripts in TypeScript and want to use @typescript-eslint/parser as the TypeScript parser, you will need to use client-side-ts processor and configure it as follows..

So it sounded to me like the complete recommended configuration is:

module.exports = {
	extends: ["plugin:astro/recommended"],
	overrides: [
		{
			files: ["*.astro"],
			parser: "astro-eslint-parser",
			parserOptions: {
				parser: "@typescript-eslint/parser",
				extraFileExtensions: [".astro"],
			},
		},
	],
}

but that causes errors.
Like Parsing error: The keyword 'import' is reserved.

Or is the problem with plugin:astro/recommended? I suspect that it isn't identical to the If you do not use a shareable configuration section.

I'm able to get it working with a custom config.
I just thought it was weird that the recommended config by the docs doesn't work.