# typescript-eslint-parser-for-extra-files

> An experimental ESLint custom parser for Vue, Svelte, and Astro for use with TypeScript. It provides type information in combination with each framework's ESLint custom parser.

Latest version **0.9.0** (published 2025-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install typescript-eslint-parser-for-extra-files
pnpm add typescript-eslint-parser-for-extra-files
yarn add typescript-eslint-parser-for-extra-files
bun add typescript-eslint-parser-for-extra-files
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2025-04-30 |
| First published | 2022-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.0.0 |
| Dependencies | 1 |
| Unpacked size | 42.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 53 |
| Author | Yosuke Ota |
| Maintainers | ota-meshi |
| Keywords | eslint, parser, vue, svelte, astro, typescript |

## Links

- npm: https://www.npmjs.com/package/typescript-eslint-parser-for-extra-files
- Repository: https://github.com/ota-meshi/typescript-eslint-parser-for-extra-files
- Homepage: https://github.com/ota-meshi/typescript-eslint-parser-for-extra-files#readme
- Issues: https://github.com/ota-meshi/typescript-eslint-parser-for-extra-files/issues
- Funding: https://github.com/sponsors/ota-meshi
- npm.io page: https://npm.io/package/typescript-eslint-parser-for-extra-files

## Dependencies (1)

- [tinyglobby](https://npm.io/package/tinyglobby.md) ^0.2.12

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.9.0 (latest) — 2025-04-30
- 0.8.0 — 2025-04-12
- 0.7.0 — 2024-06-09
- 0.6.0 — 2024-01-13
- 0.5.0 — 2023-05-09
- 0.4.0 — 2023-04-10
- 0.3.0 — 2023-03-24
- 0.2.0 — 2023-03-17
- 0.1.4 — 2022-12-08
- 0.1.3 — 2022-11-18
- 0.1.2 — 2022-11-17
- 0.1.1 — 2022-11-15
- 0.1.0 — 2022-11-03
- 0.0.3 — 2022-10-30
- 0.0.2 — 2022-10-30
- … 1 more at https://npm.io/package/typescript-eslint-parser-for-extra-files/versions

## README

# typescript-eslint-parser-for-extra-files

An experimental ESLint custom parser for Vue, Svelte, and Astro for use with TypeScript. It provides type information in combination with each framework's ESLint custom parser.

This parser is in the ***experimental stages*** of development.

[![sponsors](https://img.shields.io/badge/-Sponsor-fafbfc?logo=GitHub%20Sponsors)](https://github.com/sponsors/ota-meshi)

## ❓ What is this parser?

A custom ESLint parser that provides type information when importing `*.vue`, `*.svelte`, and `*.astro` files.

`@typescript-eslint/parser` provides type information mostly well, but if you import extra files (other than `*.ts`, `*.tsx`, `*.d.ts`, `*.js`, `*.jsx`, and `*.json`) it treats it as `any` type.

e.g.

```vue
<script lang="ts">
import HelloWorld from './components/HelloWorld.vue' // <- typescript program can't parse it. because it will read including template and style.

export default {
  name: 'App',
  components: {
    HelloWorld // <- so type information is `any`
  }
}
</script>
```

See also <https://github.com/vuejs/vue-eslint-parser/issues/104>, and <https://github.com/typescript-eslint/typescript-eslint/issues/2865>.

This parser can be used to provide type information for importing `*.vue`, `*.svelte`, and `*.astro` files.

This parser is used in combination with [vue-eslint-parser], [svelte-eslint-parser], and [astro-eslint-parser].

[vue-eslint-parser]: https://github.com/vuejs/vue-eslint-parser
[svelte-eslint-parser]: https://github.com/ota-meshi/svelte-eslint-parser
[astro-eslint-parser]: https://github.com/ota-meshi/astro-eslint-parser

## 💿 Installation

```bash
npm install --save-dev typescript-eslint-parser-for-extra-files @typescript-eslint/parser@latest typescript@latest
```

### With Vue

Install `vue` v3.2.41 or newer.

```bash
npm install --save-dev vue@latest
```

### With Svelte

Install `svelte2tsx` v0.5.20 or newer.

```bash
npm install --save-dev svelte2tsx@latest svelte
```

### With Astro

Install `astrojs-compiler-sync` v0.3.1 or newer.

```bash
npm install --save-dev astrojs-compiler-sync@latest @astrojs/compiler
```

## 📖 Usage

1. Change the `include` in your `tsconfig.json` to include the component files (`*.vue`, `*.svelte`, and `*.astro`).
```jsonc
{
  "include": [
    "**/*.vue",    // with Vue
    "**/*.svelte", // with Svelte
    "**/*.astro",  // with Astro
    "**/*.ts",
    "**/*.tsx"
  ]
}
```

2. Write `overrides.parserOptions.parser` option in your `.eslintrc.cjs` file.
### With Vue
```js
{
    "overrides": [
        {
            "files": ["*.ts", "*.tsx"],
            "parser": "typescript-eslint-parser-for-extra-files",
            "parserOptions": {
                "project": "./tsconfig.json"
            },
        },
        {
            "files": ["*.vue"],
            "parser": "vue-eslint-parser",
            "parserOptions": {
                "parser": "typescript-eslint-parser-for-extra-files",
                // Or
                // "parser": {
                //     "ts": require("typescript-eslint-parser-for-extra-files")
                // }
                "project": "./tsconfig.json"
            },
        }
    ]
}
```

### With Svelte
```js
{
    "overrides": [
        {
            "files": ["*.ts", "*.tsx"],
            "parser": "typescript-eslint-parser-for-extra-files",
            "parserOptions": {
                "project": "./tsconfig.json"
            },
        },
        {
            "files": ["*.svelte"],
            "parser": "svelte-eslint-parser",
            "parserOptions": {
                "parser": "typescript-eslint-parser-for-extra-files",
                // Or
                // "parser": {
                //     "ts": require("typescript-eslint-parser-for-extra-files")
                // }
                "project": "./tsconfig.json"
            },
        }
    ]
}
```

### With Astro
```js
{
    "overrides": [
        {
            "files": ["*.ts", "*.tsx"],
            "parser": "typescript-eslint-parser-for-extra-files",
            "parserOptions": {
                "project": "./tsconfig.json"
            },
        },
        {
            "files": ["*.astro"],
            "parser": "astro-eslint-parser",
            "parserOptions": {
                "parser": "typescript-eslint-parser-for-extra-files",
                "project": "./tsconfig.json"
            },
        }
    ]
}
```

## 👻 Limitations

- Angle bracket type assertions cannot be used:

  This parser parses as JSX enabled, therefore angle bracket type assertions cannot be used. Use the `as` operator instead.

  [The TypeScript Handbook - JSX > The `as` operator](https://www.typescriptlang.org/docs/handbook/jsx.html#the-as-operator)

## 🍻 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

## 🔒 License

See the [LICENSE](LICENSE) file for license rights and limitations (MIT).

---
_Source: https://npm.io/package/typescript-eslint-parser-for-extra-files · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._