Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

typescript-eslint-parser-for-extra-files

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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.

  • 0.7.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.3K
decreased by-10.53%
Maintainers
1
Weekly downloads
 
Created
Source

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

❓ 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.

<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.

💿 Installation

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.

npm install --save-dev vue@latest

With Svelte

Install svelte2tsx v0.5.20 or newer.

npm install --save-dev svelte2tsx@latest svelte

With Astro

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

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).
{
  "include": [
    "**/*.vue",    // with Vue
    "**/*.svelte", // with Svelte
    "**/*.astro",  // with Astro
    "**/*.ts",
    "**/*.tsx"
  ]
}
  1. Write overrides.parserOptions.parser option in your .eslintrc.cjs file.

With Vue

{
    "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

{
    "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

{
    "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

🍻 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

🔒 License

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

Keywords

FAQs

Package last updated on 09 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc