ota-meshi / eslint-plugin-astro Goto Github PK
View Code? Open in Web Editor NEWESLint plugin for Astro component
Home Page: https://ota-meshi.github.io/eslint-plugin-astro/
License: MIT License
eslint-plugin-astro's Issues
Support for Flat Config
Invalid HTML causes eslint to hang indefinitely
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?
latest
What version of eslint-plugin-astro are you using?
latest
What did you do?
My exact issue was happening within a markdown file. I'm using eslint-plugin-markdown as well. The code in question was within an astro code block.
The issue is not related to the use of eslint-plugin-markdown. I just confirmed that was a red-herring. This happens in any .astro file.
Imagine this was a codeblock in src/pages/example.md
---
const foo = true
---
<!-- notice the tag is not closed properly -->
<style is:inline set:html={""}>The problem was that I had a copy-paste issue and I had dropped the closing </style> tag. Adding it back fixed the issue.
What did you expect to happen?
I had an error in my codeblock. Best case scenario it would report the error. Instead, all of eslint crashed with no clear reason why.
What actually happened?
The eslint process hangs indefinitely (it never exits) after printing this error:
$ yarn eslint src/pages/example.md
Unexpected character in loop: ""
fatal error: all goroutines are asleep - deadlock!
goroutine 1 [chan receive]:
main.main()
./astro-wasm.go:34 +0xe
goroutine 6 [chan receive]:
syscall.fsCall({0x36b90, 0x5}, {0x42a878, 0x5, 0x5})
syscall/fs_js.go:521 +0x13
syscall.Write(0x1, {0x4c01c0, 0x22, 0x40})
syscall/fs_js.go:422 +0xd
internal/poll.ignoringEINTRIO(...)
internal/poll/fd_unix.go:582
internal/poll.(*FD).Write(0x4320c0, {0x4c01c0, 0x22, 0x40})
internal/poll/fd_unix.go:275 +0x4e
os.(*File).write(...)
os/file_posix.go:49
os.(*File).Write(0x40c020, {0x4c01c0, 0x22, 0x40})
os/file.go:176 +0x10
fmt.Fprintf({0x74360, 0x40c020}, {0x42d83, 0x23}, {0x42aa90, 0x1, 0x1})
fmt/print.go:205 +0x8
fmt.Printf(...)
fmt/print.go:213
github.com/withastro/compiler/internal.(*Tokenizer).readRawOrRCDATA(0x401380)
github.com/withastro/compiler/internal/token.go:417 +0x4d
github.com/withastro/compiler/internal.(*Tokenizer).Next(0x401380)
github.com/withastro/compiler/internal/token.go:1391 +0x1d
github.com/withastro/compiler/internal.(*parser).parse(0x47a360)
github.com/withastro/compiler/internal/parser.go:2918 +0x1e
github.com/withastro/compiler/internal.ParseWithOptions({0x743c0, 0x4300e0}, {0x0, 0x0, 0x0})
github.com/withastro/compiler/internal/parser.go:2986 +0x18
github.com/withastro/compiler/internal.Parse(...)
github.com/withastro/compiler/internal/parser.go:2943
main.Parse.func1({{}, 0x7ff800010000000d, 0x410cb0}, {0x4300c0, 0x2, 0x2})
./astro-wasm.go:187 +0xf
syscall/js.handleEvent()
syscall/js/func.go:96 +0x27
Link to Minimal Reproducible Example
This happens in any code that omits a closing tag.
breaks terribly
---
const foo = true
---
<!-- notice the tag is not closed properly -->
<style is:inline set:html={""}>works great
---
const foo = true
---
<!-- notice the tag is closed properly -->
<style is:inline set:html={""}></style>Additional comments
The issue is not related to the use of eslint-plugin-markdown. I just confirmed that was a red-herring. This happens in any .astro file.
Attempts to validate JSON script tags
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?
8.41.0
What version of eslint-plugin-astro are you using?
0.27.0
What did you do?
Configuration
Base (custom)
module.exports = {
env: {
browser: true,
es2022: true,
node: true,
"jest/globals": true,
},
globals: {
NodeListOf: "readonly",
},
extends: [
"eslint:recommended",
"plugin:import/recommended",
"turbo",
"prettier",
],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["react", "@typescript-eslint"],
overrides: [
{
// Only test react against jsx/tsx files
files: ["*.jsx", "*.tsx"],
extends: ["plugin:react/recommended", "plugin:react-hooks/recommended"],
},
{
files: ["*.ts", ".tsx"],
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:import/typescript",
],
},
{
files: ["*.test.*"],
plugins: ["jest"],
extends: ["plugin:jest/recommended"],
rules: {
// suppress errors for missing 'import React' in files
"react/react-in-jsx-scope": "off",
},
},
],
rules: {
"import/order": ["error"],
// eslint-import does not support package.json#exports
// https://github.com/import-js/eslint-plugin-import/issues/2132
"import/no-unresolved": [0],
// allow jsx syntax only in [tj]sx files
"react/jsx-filename-extension": [
1,
{ extensions: [".tsx", ".jsx", ".astro"] },
],
},
settings: {
react: {
version: "^18.0.0",
},
},
};
Astro
module.exports = {
root: true,
extends: ["plugin:astro/recommended", "custom"],
overrides: [
{
// Define the configuration for `.astro` file.
files: ["*.astro"],
// Allows Astro components to be parsed.
parser: "astro-eslint-parser",
// Parse the script in `.astro` as TypeScript by adding the following configuration.
// It's the setting you need when using TypeScript.
parserOptions: {
parser: "@typescript-eslint/parser",
extraFileExtensions: [".astro"],
},
},
],
};
<script type="application/ld+json">
{
"@context": "http://www.schema.org",
"@type": "Organization",
name: "Example"
}
</script>What did you expect to happen?
eslint-plugin-astro should ignore script tags with *json or importmap as the type parameter.
What actually happened?
Parsing error: ';' expected.
Link to Minimal Reproducible Example
Additional comments
No response
JSX return type and @typescript-eslint/no-unsafe-return
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?
8.33.0
What version of eslint-plugin-astro are you using?
0.23.0
What did you do?
Configuration .eslintrc.json
{
"env": {
"browser": true,
"node": true
},
"extends": [
// ...
"plugin:astro/recommended",
"eslint:recommended",
"plugin:jsx-a11y/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"prettier"
],
// ...
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.eslint.json"
},
"overrides": [
{
"files": ["*.astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"],
"project": "./tsconfig.eslint.json"
},
"rules": {
// override/add rules settings here, such as:
// "astro/no-set-html-directive": "error"
// "no-plusplus": "off",
"no-restricted-syntax": [
"error",
"ForInStatement",
"LabeledStatement",
"WithStatement"
]
}
}
// ...
]
}
Configuration tsconfig.eslint.json
{
"extends": "./tsconfig.json",
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.js",
"src/**/*.jsx",
"src/**/*.astro",
"test/**/*.ts",
"globals.d.ts",
"astro.config.mjs"
]
}
Example .astro file
---
let cards = [
{
href: "https://docs.astro.build/",
title: "Documentation",
body: "Learn how Astro works and explore the official API docs.",
},
{
href: "https://astro.build/integrations/",
title: "Integrations",
body: "Supercharge your project with new frameworks and libraries.",
},
{
href: "https://astro.build/themes/",
title: "Themes",
body: "Explore a galaxy of community-built starter themes.",
},
];
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<li>
{
cards.map((card) => (
// next line has following error: Unsafe return of an `any` typed value. eslint(@typescript-eslint/no-unsafe-return)
<div>{card.href}</div>
))
}
</li>
<div class="tags">
{
["a", "b", "c"].map((tag) => (
<p class={tag}>Tag:{tag} This p tag triggers unsafe return of an `any` typed value.</p>
))
}
</div>
</body>
</html>What did you expect to happen?
no error
What actually happened?
Unsafe return of an any typed value.eslint@typescript-eslint/no-unsafe-return
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-tekdct?file=src/pages/index.astro
Additional comments
run npx eslint src/pages/index.astro on linked stackblitz example for error in action.
Referred to file issue here from Astro withastro/astro#6280 (comment)
is:raw Parsing error: Invalid character
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.47.0
What version of eslint-plugin-astro are you using?
v0.29.0
What did you do?
Configuration
module.exports = {
extends: [
'eslint:recommended',
'plugin:astro/recommended',
'plugin:jsx-a11y/recommended',
'plugin:@typescript-eslint/recommended-type-checked',
'prettier',
],
parser: '@typescript-eslint/parser',
plugins: ['jsx-a11y', '@typescript-eslint/eslint-plugin', 'prettier'],
parserOptions: {
project: './tsconfig.json',
tsconfigRootDir: __dirname,
extraFileExtensions: ['.astro'],
},
rules: {
'prettier/prettier': 'error',
'no-unused-vars': 'off',
},
env: {
node: true,
es6: true,
},
overrides: [
{
files: ['*.ts'],
parser: '@typescript-eslint/parser',
extends: ['plugin:@typescript-eslint/recommended'],
parserOptions: {
project: './tsconfig.json',
},
},
{
files: ['*.astro'],
parser: 'astro-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: ['.astro'],
sourceType: 'module',
},
},
{
files: ['*.mjs'],
parserOptions: {
sourceType: 'module',
},
},
{
files: ['*.cjs'],
env: {
node: true,
},
},
],
};import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({});What did you expect to happen?
It should not throw an error on the following Astro HTML. The build output is ok
<template id="suggest-template" is:raw>
{{#.}}
<a href="/">
<div class="truncate">{{title}}</div>
</a>
{{/.}}
</template>What actually happened?
I would expect that in case attribute on element is is:raw the content of that element would be ignored by a parserthe
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-m9axad-f7c42y?file=src%2Fcomponents%2FCard.astro
Open new terminal and run npm run lint
Additional comments
No response
New rule for client:only directive to have a value depending on the framework used
Motivation
Whenever using the client:only directive, I always forget to pass in a value of the framework. Per Astro docs, is required to pass in a value: https://docs.astro.build/en/reference/directives-reference/#clientonly
Description
I always remind myself of this after doing several tests and wondering why the rendering of the component is off so I think it's worth adding a rule for this requirement.
Examples
---
---
{/* ✓ GOOD */}
<Foo />
<Bar client:only="react"/>
<Foo />
{/* ✗ BAD */}
<Foo />
<Bar client:only/>
<Foo />Additional comments
I'm happy to contribute by adding this if this is something other people are facing?
Final forbidden semicolon in frontmatter ignored
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?
8.33.0
What version of eslint-plugin-astro are you using?
0.23.0
What did you do?
A final semicolon in the frontmatter of an `*.astro` file is not flagged as a warning despite forbidden by a rule.
This is the eslint configuration file. ```jsonc { "root": true, "parser": "@typescript-eslint/parser", "plugins": [ "@typescript-eslint" ], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:astro/recommended", ], "overrides": [ { "files": [ "*.astro" ], "parser": "astro-eslint-parser", "parserOptions": { "parser": "@typescript-eslint/parser", "extraFileExtensions": [ ".astro" ], }, "rules": { // override/add rules settings here, such as: // "astro/no-set-html-directive": "error" }, }, ], "rules": { "quotes": [ "warn", "single" ], "semi": [ "warn", "never" ], "@typescript-eslint/ban-ts-comment": [ "error", { "ts-ignore": "allow-with-description" }, ], "@typescript-eslint/no-non-null-assertion": "off", }, } ``` Please find the Astro file below.What did you expect to happen?
Running eslint should show 2 warnings about both semicolons and eslint --fix should remove them.
What actually happened?
With eslint only one warning is shown and eslint --fix only removes the first semicolon.
pnpm lint> @example/[email protected] lint C:\Lokal\DYNAMITE\dynamite-cv\astro-web
> eslint .
...\astro-web\src\pages\semi.astro
2:61 warning Extra semicolon semi
✖ 1 problem (0 errors, 1 warning)
0 errors and 1 warning potentially fixable with the `--fix` option.
Link to Minimal Reproducible Example
---
console.log('This semicolon is flagged as a warning ->')
console.log('This one isn\'t 🤷♂️ ->');
---
<html><body>Don't look up!</body></html>Additional comments
No response
Add notes on interop with eslint-plugin-import to docs
Description
One thing i always forget when setting up an astro project with eslint-plugin-astro + eslint-plugin-import, is how to resolve import/no-unresolved errors for astro:content.
My usual way of handling it is adding astro:content to core modules
"settings": {
"import/core-modules": ["astro:content"]
}Is that approach right, and would it be worth adding it (or the actual right thing to do) as a note in the configuration docs? Does it even belong in these docs?
Thesmi in the last line of the script block is not recognized
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?
8.23.0
What version of eslint-plugin-astro are you using?
0.18.0
What did you do?
Configuration
module.exports = {
/** @type { import('eslint').Linter.Config } */
rules: {
semi: ['error', 'never'],
},
overrides: [
{
files: ['*.astro'],
parser: 'astro-eslint-parser',
},
],
}---
console.log('Hello 1')
console.log('Hello 2');
---What did you expect to happen?
Recognize the semi of the last statement line like a normal js file.
What actually happened?
Cannot recognize the last line of the statement
Link to Minimal Reproducible Example
https://stackblitz.com/edit/node-qjzrj8?file=index.astro
Run pnpm lint to see the result
Additional comments
I think it's a parser error, but I'm not sure.
Request: built-in config for astro.config.mjs
Description
This plugin defines great overrides for .astro files! It would be nice if it did the same for other Astro-specific files like astro.config.mjs.
Here's my first attempt:
{
files: ['astro.config.mjs'],
env: {
node: true,
'astro/astro': true, // I'm not sure about this
es2020: true,
},
parserOptions: {
sourceType: 'module',
},
},Non-exported Props interface/type shouldn't be flagged by no-unused-vars
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?
8.37.0
What version of eslint-plugin-astro are you using?
0.26.1
What did you do?
Configuration
module.exports = {
overrides: [
{
files: ['*.astro'],
parser: 'astro-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
project: true,
extraFileExtensions: ['.astro'],
},
plugins: ['@typescript-eslint'],
rules: {
'@typescript-eslint/no-unused-vars': 'error',
},
},
],
};
---
interface Props {
value: string;
}
const { value } = Astro.props;
---
<div>{value}</div>What did you expect to happen?
Although Props seems unused because it's not exported or referenced anywhere in the file, it's not. Astro uses it inside the file under the hood.
What actually happened?
/Users/josh/repos/joshuakgoldberg-dot-com-next/src/components/Example.astro
2:11 warning 'Props' is defined but never used @typescript-eslint/no-unused-vars
Link to Minimal Reproducible Example
Additional comments
I was directed here from the Astro Discord's #feedback-ideas channel (thanks Erika!): https://discord.com/channels/830184174198718474/872579324446928896/1094254255117971476
Parsing error: Declaration or statement expected. ESLint(FATAL)
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?
8.50.0
What version of eslint-plugin-astro are you using?
0.29.1
What did you do?
My goal was to remove white space from the icon and a component. So I used <!-- WHITESPACE --> HTML comment hack.
But in this case, I get a parsing error at a random location
---
import { Sprite } from 'astro-icon';
import CategoryNavItem from '@components/menu/CategoryNavItem.astro';
import type { CategoryLinkItem } from 'src/const/links.ts';
interface Props {
items: CategoryLinkItem[];
class?: string;
id?: string | number;
}
const { items, class: className = 'pl-0', id = '' } = Astro.props;
---
<!-- CategoryNav -->
<ul class="list-none" class:list={[className]}>
{
items.map((item) => (
<li class="overflow-hidden truncate">
{item.children != null ? (
<label class="text-black dark:text-white">
<input type="radio" name={`categoryList-${id}`} class="peer hidden" />
<Sprite
name="arrow"
class="w-24 h-24 inline cursor-pointer -rotate-90 peer-checked:rotate-0 peer-checked:text-red"
/><!--
--><CategoryNavItem item={item} class="peer-checked:text-red" />
<Astro.self items={item.children} class="pl-24 hidden basis-full peer-checked:block" id={item.id} />
</label>
) : (
<CategoryNavItem item={item} class="pl-24 text-black dark:text-white" />
)}
</li>
))
}
</ul>What did you expect to happen?
It should allow me to write the wrong HTML syntax or use an HTML comment hack
What actually happened?
It displays
Parsing error: Declaration or statement expected.ESLint(FATAL)
at the random file location if I use HTML comment
Link to Minimal Reproducible Example
Repository: https://github.com/FDiskas/eslint-plugin-astro-parsing-error
Additional comments
Thank you ❤️ for any advice or fix
Not detecting `prefer-class-list-directive` errors
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?
8.45.0
What version of eslint-plugin-astro are you using?
0.27.2
What did you do?
Configuration
{
"extends": [
// ...
"plugin:astro/recommended"
],
// ...
"overrides": [
{
// Define the configuration for `.astro` file.
"files": ["*.astro"],
// Allows Astro components to be parsed.
"parser": "astro-eslint-parser",
// Parse the script in `.astro` as TypeScript by adding the following configuration.
// It's the setting you need when using TypeScript.
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"]
},
"rules": {
// override/add rules settings here, such as:
"astro/no-set-html-directive": "error",
"astro/prefer-class-list-directive": "error"
}
}
// ...
]
}Example Astro Code
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body class="min-h-screen bg-slate-100">
<!-- <div
set:html="<h1 class='text-5xl font-bold mb-8'>This should error with the <span class='font-mono'>astro/no-set-html-directive</span> error."
/> -->
<div>
<h3 class="text-3xl font-bold">
This should error with the <span class="font-mono"
>astro/prefer-class-list-directive</span
> rule.
</h3>
</div>
</body>
</html>Astro Configuration
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
// https://astro.build/config
export default defineConfig({
integrations: [tailwind()]
});What did you expect to happen?
I expected to get an error for the lines that didn't have a class:list for the element there.
What actually happened?
ESlint passed all the checks (except for the one I had commented out to intentionally see if it would fail, which it did).
Link to Minimal Reproducible Example
https://github.com/jhilker98/eslint-astro-class-bug
Additional comments
I am still quite new to ESLint, so if I've just configured something wrong please let me know.
document cause no-undef error
Mentioning document in <script> in astro component cause no-undef error. Is something wrong in config?
{
"files": "*.astro",
"parser": "astro-eslint-parser",
"plugins": ["astro"],
"env": {
"astro/astro": true,
"browser": true
},
"globals": {
"document": "readonly"
},
"extends": "plugin:astro/recommended"
}
Add config for linting astro files w/o passing `--ext`
If you add *.astro to the overrides.files config value, you can lint astro (and other file-endings like ts) w/o needing an extension flag:
ex, the current config I'm working on, derived from config written by @IanVS:
overrides: [
// By default eslint only lints .js. Adding others to overrides will cause them to lint as well
// https://eslint.org/docs/user-guide/migrating-to-7.0.0#lint-files-matched-by-overridesfiles-by-default
{ files: ["*.ts", "*.tsx", "*.jsx"] },
// All .cjs & .cts files and eslint rules are commonjs, which means they're processed by node and can use require()
{
files: ["*.cjs", "*.cts", "eslint-rules/*.js"],
env: { node: true },
rules: {
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/no-require-imports": "off",
"import/no-nodejs-modules": "off",
},
},
{
files: ["*.astro"],
parser: "astro-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
extraFileExtensions: [".astro"],
},
},
],this should lint all typescript and astro files, assuming all of the plugins and whatnot are configured of course
TLDR: Reccomend specifying files: ["*.astro"], to support linting astro, rather than requiring passing --ext .astro to eslint
Trouble with prettier (Parsing error: `import` can only be used in `import()` or `import.meta`)
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?
8.50.0
What version of eslint-plugin-astro are you using?
0.29.0
What did you do?
Configuration
{
"extends": [
"planet"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"import/named": "off",
"import/default": "off",
"import/no-unresolved": [
"error",
{
"ignore": [
"astro:content",
"@astrojs/*"
]
}
]
},
"overrides": [
{
"files": [
"*.astro"
],
"extends": [
"plugin:astro/recommended"
]
},
{
"files": [
"*.jsx"
],
"extends": [
"planet/react"
],
"rules": {
"import/named": "off"
}
},
{
"files": [
"*.mdx"
],
"extends": [
"plugin:mdx/recommended",
"planet/react"
]
}
]
}---
import '../styles/global.css';
const {frontmatter} = Astro.props;
const title = (frontmatter && frontmatter.title) || Astro.props.title;
---
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
</head>
<body>
<nav>
<ul>
<li><a href={import.meta.env.BASE_URL}>@planet/maps</a></li>
<li><a href={`${import.meta.env.BASE_URL}examples/`}>examples</a></li>
</ul>
</nav>
<h1>{title}</h1>
<slot />
</body>
</html>What did you expect to happen?
I upgraded from Astro 2 to 3 (see https://github.com/planetlabs/maps/pull/278/files), and expected the linter configuration to continue working.
What actually happened?
# npx eslint site/src/layouts/BaseLayout.astro
/Users/tim/projects/maps/site/src/layouts/BaseLayout.astro
2:2 error Parsing error: `import` can only be used in `import()` or `import.meta` prettier/prettierLink to Minimal Reproducible Example
https://github.com/planetlabs/maps/pull/278/files
Additional comments
I know this is not a minimal preproduction, I'll see if I can create one. But before upgrading to Astro 3, the linter configuration was working using this plugin together with eslint-plugin-prettier. After upgrading to Astro 3, the linter can no longer parse *.astro files.
I imagine this has to do with the parser or parserOptions that are being used, but I cannot figure out a combination that works. So far, the only solution I have found is to disable the prettier/prettier rules when using this eslint-plugin-astro plugin.
I see that the readme suggests turning the prettier/prettier rules off: https://github.com/ota-meshi/eslint-plugin-astro/blob/v0.29.0/README.md?plain=1#L165-L172
Is anyone successfully using this plugin together with Prettier and Astro 3?
breaks `eslint-plugin-simple-import-sort`
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?
8.21.0
What version of eslint-plugin-astro are you using?
0.17.1
What did you do?
I want to use eslint-plugin-astro together with eslint-plugin-simple-import-sort to sort imports in astro frontmatter.
this works fine as long as import statements end with a semicolon. for example:
---
import Card from '@/components/card.astro';
import Layout from '@/layouts/page.layout.astro';
---
however, when i omit trailing semicolons, i get an unfixable error:
---
import Card from '@/components/card.astro'
import Layout from '@/layouts/page.layout.astro'
---
the reason this fails is because eslint-plugin-simple-import-sort compares the following (note the trailing newline character), which will always fail:
this is because the second import statement gets parsed into a ImportDeclaration node, whose loc includes the first char of the next line, i.e. loc.start.line is 3 and loc.end.line is 4:
i think this happens because what the typescript-eslint parser sees is:
import Card from '@/components/card.astro'
import Layout from '@/layouts/page.layout.astro'
;whereas when using semicolons, it sees:
import Card from '@/components/card.astro';
import Layout from '@/layouts/page.layout.astro';
;apparently, these get parsed differently:
Configuration
{
"eslintConfig": {
"root": true,
"reportUnusedDisableDirectives": true,
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"prettier"
],
"plugins": ["simple-import-sort"],
"rules": {
"import/first": "error",
"import/newline-after-import": "error",
"import/no-anonymous-default-export": "error",
"import/no-duplicates": "error",
"simple-import-sort/imports": "error"
},
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
}
},
"overrides": [
{
"files": ["*.astro"],
"extends": [
"plugin:astro/recommended",
"plugin:astro/jsx-a11y-recommended"
],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"]
}
}
]
}
}
What did you expect to happen?
sorted imports also when not using semicolons
What actually happened?
unfixable eslint error
Link to Minimal Reproducible Example
https://github.com/stefanprobst/issue-eslint-astro
issue is visible in src/pages/index.astro
Additional comments
No response
Docs site renders : book : instead of :book:
On https://ota-meshi.github.io/eslint-plugin-astro/user-guide, exactly one heading has :book: (raw GFM) instead of a rendered emoji:
Is there an alias for the emoji that should be used instead, maybe?
Unable to resolve path to module typescript import
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?
8.55.0
What version of eslint-plugin-astro are you using?
0.30.0
What did you do?
Hi, i have a problem with eslint and unresolved imports in astro files for my normal import resolver i have this configuration in my custom eslint config
settings:
{
'import/extensions': [
'.js',
'.mjs',
'.jsx',
'.ts',
'.tsx',
'.d.ts'
],
'import/external-module-folders': [ 'node_modules', 'node_modules/@types' ],
'import/parsers':
{
'@typescript-eslint/parser': [ '.ts', '.tsx', '.d.ts' ]
},
'import/resolver':
{
node: {
extensions: [
'.mjs',
'.js',
'.json',
'.ts',
'.d.ts'
],
tryExtensions: [
'.mjs',
'.cjs',
'.js',
'.json',
'.node',
'.mts',
'.cts',
'.ts',
'.d.ts'
]
}
}this is how i handle normal ts and js files for absolute an relative paths, but i am getting this issue in the files
i override my eslint config this way but still dont work
{
files: [ '*.astro' ],
parser: 'astro-eslint-parser',
parserOptions: {
extraFileExtensions: [ '.astro' ],
parser: '@typescript-eslint/parser'
}
}Also i try to setup astro as a file in the import resolver but doesn't work
this is mu tsxonfig.json
{
"extends": "astro/tsconfigs/strictest",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@global/*": ["src/global/*"],
"@module/*": ["src/module/*"],
"@public/*": ["/public/*"]
}
}What did you expect to happen?
Imports should work fine
What actually happened?
dont work
Link to Minimal Reproducible Example
here is a repo whit all the configuration is a simple empty astro project you can ignore the postcss and more configurations
do pnpm i and then see the index.astro file with the error
Additional comments
No response
Parsing error: Expression expected on .astro files frontmatter
I'm not opening this as a bug as I'm not sure if it is. My problem is that eslint shows an error at the top of my .astro files in the frontmatter, like this (because of the three dashes):
Is this expected or maybe I'm missing something in the configuration?
this is my eslint config (I have also tested with only 'plugin:astro/recommended' in the extends property and is the same):
module.exports = {
extends: ['semistandard', 'plugin:astro/recommended', '../.eslintrc.js'],
parser: '@typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
extraFileExtensions: ['.astro']
},
override: [
{
files: ['*.astro'],
parser: 'astro-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: ['.astro']
},
rules: {
// override/add rules settings here, such as:
// 'astro/no-set-html-directive': 'error'
}
}
]
};This is my astro version:
"astro": "^2.1.0",
and this is my eslint dependencies:
"astro-eslint-parser": "^0.11.0",
"eslint": "^8.35.0",
"eslint-plugin-astro": "^0.23.0",
Parsing error within <script>
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?
9.27.0
What version of eslint-plugin-astro are you using?
0.21.0
What did you do?
I got parsing errors on Typescript as keyword while trying to cast a type within a <script> tag.
Since I'm extending 'plugin:astro/recommended' I believe the prettier/prettier rule is turned off so it's not really the same as #95 right ?
Here's a screenshot of the error
module.exports = {
plugins: ['import', 'tailwindcss'],
extends: [
'eslint:recommended',
'plugin:astro/recommended',
'plugin:import/recommended',
'plugin:prettier/recommended',
'plugin:tailwindcss/recommended',
],
rules: {
'import/no-unresolved': 0,
'import/order': [
'error',
{
groups: [
['external', 'builtin'],
'unknown',
'internal',
['parent', 'sibling', 'index'],
],
alphabetize: {
order: 'asc',
caseInsensitive: false,
},
'newlines-between': 'always',
pathGroupsExcludedImportTypes: ['builtin'],
},
],
'sort-imports': [
'error',
{
ignoreCase: true,
ignoreDeclarationSort: true,
ignoreMemberSort: false,
memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
},
],
'tailwindcss/no-custom-classname': 'off',
'tailwindcss/no-contradicting-classname': 'warn',
},
overrides: [
{
files: ['*.astro'],
parser: 'astro-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: ['.astro'],
},
},
],
env: {
node: true,
},
};
---
import { Icon } from 'astro-icon';
import Delimiter from './Delimiter.astro';
---
<script>
const header = document.getElementById('navheader') as HTMLElement;
const menuBtn = document.getElementById('menubtn') as HTMLElement;
const logo = document.getElementById('navlogo') as HTMLElement;
menuBtn.onclick = () => header.classList.toggle('open');
if (matchMedia('(pointer:fine)').matches) {
logo.addEventListener('contextmenu', event => {
event.preventDefault();
window.location.href = '/press';
});
}
</script>Thanks in advance for your help !
What did you expect to happen?
No parsing error
What actually happened?
Parsing error: Unexpected token as (eslint)
Link to Minimal Reproducible Example
Additional comments
No response
Parsing error with inline script tags
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?
8.22.0
What version of eslint-plugin-astro are you using?
0.17.1
What did you do?
https://gist.github.com/cj/08f13d06699b71bed821f01d39d50202
What did you expect to happen?
For there to be no validation issue
What actually happened?
A parsing error happened.
Link to Minimal Reproducible Example
https://github.com/cj/eslint-plugin-astro-script-parsing-error
Additional comments
https://docs.astro.build/en/core-concepts/astro-components/#client-side-scripts
Question: what’s the best scope to address missing default export of Astro components?
I started using eslint-plugin-import for my Astro pages, and when I try to import Astro components, the plugin reports: ESLint: No default export found in imported module "../../layouts/Layout.astro".(import/default)
My gut feeling tells me that astro-eslint-parser should report the default export as existing, but maybe it’s the import plugin that needs to be configured properly, or even eslint-plugin-astro.
In which repository should I file an issue for that?
How to disable the eslint for a single line in an astro file
Is there a way to disable eslint just for a single line within an Astro file? I tried to use this <!-- eslint-disable-line --> but it does not work
Question about JSX like element definitions
I'm using @typescript-eslint to parse Astro components, and I'm getting this error when using dynamic JSX expressions:
I suppose that this is caused by missing definitions for JSX like elements in astro? Is there a way to reference the definitions in Astro? I can fix this using type assertions with HTMLAnchorELement, but it would be better if the definitions were already inferred...
env.d.ts references these types
/// <reference types="astro/client" />
/// <reference types="astro/env" />
/// <reference types="svelte" />
Thanks for this plugin, btw, and all the other ones - I'm using quite a few of them...
Trouble with no-unused-vars rule
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.32.0
What version of eslint-plugin-astro are you using?
0.21.1
What did you do?
Configuration
{
"extends": [
"plugin:astro/recommended"
],
"rules": {
"no-unused-vars": "error"
},
"overrides": [
{
"files": [
"*.astro"
],
"parser": "astro-eslint-parser",
"parserOptions": {
"extraFileExtensions": [
".astro"
],
"ecmaVersion": "latest"
}
}
]
}---
import SomeComponent from '../components/SomeComponent.astro';
---
<SomeComponent />What did you expect to happen?
I was hoping that the Astro plugin would work with the no-unused-vars rule.
What actually happened?
/path/to/src/pages/problem.astro
2:8 error 'SomeComponent' is defined but never used no-unused-vars
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-nzoac8?file=README.md
Additional comments
Much like the eslint-plugin-react allows ESLint rules (such as no-unused-vars) to work with JSX, I was hoping that this plugin would allow the same for Astro components. I see that there are integration tests using the no-unused-vars rule, but it looks like those don't cover the use of a variable from a component script in a component template.
docs: Add `parser: "@typescript-eslint/parser",`
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
Missing lint errors on <script>
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.3
What did you do?
See "TODOBROKEN" text in the linked MRE, which are supposed to trigger lint errors.
What did you expect to happen?
Lint errors
What actually happened?
No lint errors
Link to Minimal Reproducible Example
https://github.com/erikschul/astro-base
Additional comments
See README.md for details.
I appreciate any help on this.
I suspect it may be a configuration issue with .eslintrc.cjs and tsconfig.json.
It seems that when I modify <script>, it creates a .tsx file (which is noticable in npx astro dev) but then quickly deletes it. I don't see any files in .astro, but the recommended overrides suggests that there would be. Can you provide any information relating to this?
Eslint doesn't detect globally injected types
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.22.0
What version of eslint-plugin-astro are you using?
v0.17.1
What did you do?
Configuration
"eslintConfig": {
"extends": [
"eslint:recommended",
"plugin:astro/recommended"
],
"overrides": [
{
"files": [
"*.astro"
],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [
".astro"
]
}
}
]
}Trying to lint the .astro file below, which is taken from the blog template project. The only modification I made was to add the /// <reference types="astro/astro-jsx" /> on the second line, as recommended by the docs.
---
/// <reference types="astro/astro-jsx" />
export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {}
const { href, class: className, ...props } = Astro.props as Props
const isActive = href === Astro.url.pathname
---
<a href={href} class:list={[className, { active: isActive }]} {...props}>
<slot />
</a>
<style>
a {
display: inline-block;
text-decoration: none;
}
a.active {
font-weight: bolder;
text-decoration: underline;
}
</style>What did you expect to happen?
The linter works without warnings or errors
What actually happened?
$ npx eslint src/components/HeaderLink.astro
./src/components/HeaderLink.astro
4:32 error 'astroHTML' is not defined no-undef
✖ 1 problem (1 error, 0 warnings)
Link to Minimal Reproducible Example
https://github.com/alex-grover/eslint-plugin-astro-types-bug
clone, install, and run npx eslint src/components/HeaderLink.astro
Additional comments
No response
Issue with I18N
Hi there,
Thanks for providing this plugin
I use this eslint plugin and astro-i18next for translations. However, the lining process is failing with:
Error while parsing /Users/xxxx/projects/xxxxx/node_mo
dules/i18next/dist/esm/i18next.js
Line 2484, column 0: Unknown token at 104295, expected: "}", actual: ""
`parseForESLint` from parser `/Users/xxxxx/projects/xxxxx/node_modules/.pnpm/[email protected]/node_modules/astro-eslint-parser/lib/index.js` is inv
alid and will just be ignored
This is my .eslintrc
{
"extends": [
"@antfu/eslint-config-ts",
"plugin:tailwindcss/recommended",
"plugin:astro/recommended",
"plugin:astro/jsx-a11y-strict",
],
"plugins": [
"tailwindcss",
"jsx-a11y",
],
"rules": {
"no-console": "warn",
"tailwindcss/no-custom-classname": "warn",
"antfu/if-newline": "error",
},
"overrides": [
{
"files": ["*.astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"],
},
"rules": {
},
},
],
}
Any idea why this issue is occurring?
Not compatible with typescript v5.
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?
8.36.0
What version of eslint-plugin-astro are you using?
0.25.0
What did you do?
Configuration
<!-- Paste your configuration here -->
<!-- Paste your code here -->What did you expect to happen?
No parse errors occur.
What actually happened?
We always get a parsing error when using typescript-eslint and typescript v5.
Link to Minimal Reproducible Example
ota-meshi/astro-eslint-parser#177
Additional comments
No response
Warning position is wrong when the warning is in script and TypeScript parser is used
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?
8.43.0
What version of eslint-plugin-astro are you using?
0.27.1
What did you do?
Configuration
{
"root": true,
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:astro/recommended"
],
"parserOptions": {
"ecmaVersion": 2022,
"parser": "@typescript-eslint/parser"
}
}<script>
const foo = document.querySelector('foo')!
console.log(foo)
</script>What did you expect to happen?
eslint . outputs
4:14 warning Forbidden non-null assertion @typescript-eslint/no-non-null-assertion
What actually happened?
eslint . outputs
2:14 warning Forbidden non-null assertion @typescript-eslint/no-non-null-assertion
Link to Minimal Reproducible Example
- Open https://github.com/sapphi-red-repros/eslint-plugin-astro-script-ts-pos
npm inpm run lint
Additional comments
The warning position is correct for .ts files. So I thought this is a bug in eslint-plugin-astro instead of typescript-eslint.
Configuration is too complicated
There are many configurations required to lint .astro. Provide a config to make it easy.
Plugin import incorrect in docs
What version of ESLint are you using?
8.12
What version of eslint-plugin-astro are you using?
0.10.2
What did you do?
Documention advises to use "plugin:astro/recommended" - however in the library the export is "plugin:astro/configs/recommended"
Configuration
{
"env": {
"node": true,
"es2022": true,
"browser": true,
"astro/astro": true
},
"extends": ["plugin:prettier/recommended", "eslint:recommended", "plugin:astro/configs/recommended"],
"root": true,
"ignorePatterns": ["**/*"],
"plugins": ["@nrwl/nx"],
"parserOptions": {
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"ecmaFeatures": { "modules": true }
},
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.mjs"],
"rules": {
"@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
"@nrwl/nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
"allow": [],
"depConstraints": [
{
"sourceTag": "*",
"onlyDependOnLibsWithTags": ["*"]
}
]
}
]
}
},
{
"files": ["*.ts", "*.tsx"],
"extends": ["plugin:@nrwl/nx/typescript"],
"rules": {}
},
{
"files": ["*.js", "*.jsx", "*.mjs"],
"extends": ["plugin:@nrwl/nx/javascript"],
"rules": {}
},
{
"files": ["*.astro"],
"plugins": ["astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"]
},
"rules": {}
}
]
}
<!-- Paste your code here -->What did you expect to happen?
Expected plugin to work as advised in docs
What actually happened?
Plugin, as described in docs, fails to load, as described in docs,
Link to Minimal Reproducible Example
N/A
Additional comments
Here is the compiled node module, the config should be restructured but is not, or documentation should be updated to above plugin import.
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
const rules_1 = require("./utils/rules");
const processor_1 = require("./processor");
const environment_1 = require("./environment");
const base_1 = __importDefault(require("./configs/base"));
const recommended_1 = __importDefault(require("./configs/recommended"));
const all_1 = __importDefault(require("./configs/all"));
const configs = {
base: base_1.default,
recommended: recommended_1.default,
all: all_1.default,
};
const rules = rules_1.rules.reduce((obj, r) => {
obj[r.meta.docs.ruleName] = r;
return obj;
}, {});
module.exports = {
configs,
rules,
processors: {
".astro": processor_1.processor,
astro: processor_1.processor,
},
environments: {
astro: environment_1.environment,
},
};
@ and . characters in attributes causes a parser error
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?
8.31.0
What version of eslint-plugin-astro are you using?
0.21.1
What did you do?
Configuration
module.exports = {
extends: ["plugin:astro/recommended"],
overrides: [
{
files: ["*.astro"],
parser: "astro-eslint-parser",
},
],
}
<!-- fails on this -->
<button @click.outside="console.log('hi')">x</button>
<!-- also fails on this -->
<button x-on:click.outside="console.log('hi')">x</button>What did you expect to happen?
No parser errors
What actually happened?
Parser errors:
❯ pnpm eslint .
C:\dev\astro\eslint-astro-plugin-attribute-parse-error\Example.astro
2:9 error Parsing error: Unexpected character '@'
❯ pnpm eslint .
C:\dev\astro\eslint-astro-plugin-attribute-parse-error\Example.astro
5:19 error Parsing error: Unexpected token .
Link to Minimal Reproducible Example
https://github.com/itsMapleLeaf/eslint-astro-plugin-attribute-parse-error
Additional comments
No response
Parse errors in imported module 'http-status-codes': parser.parse is not a function (undefined:undefined)
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?
8.53.0
What version of eslint-plugin-astro are you using?
0.29.1
What did you do?
Configuration
{
"extends": [
"standard-with-typescript",
"plugin:import/recommended",
"plugin:import/typescript"
],
"plugins": ["astro"],
"overrides": [
{
"files": ["*.astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"]
}
}
]
}
---
import { StatusCodes } from 'http-status-codes';
console.log(StatusCodes.MOVED_TEMPORARILY);
---
<div></div>
What did you expect to happen?
There should be no linter errors about the import of the module. When I import this module inside a .ts file, there’s no error.
What actually happened?
eslint src/pages/index.astro
Error while parsing node_modules/http-status-codes/build/es/index.js
Line 3, column 52: Unable to assign attributes when using <> Fragment shorthand syntax! [1002]
`parseForESLint` from parser `node_modules/astro-eslint-parser/lib/index.js` is invalid and will just be ignored
/home/arty/Entwicklung/galaniprojects/typescript-eslint-astro-fragment/src/pages/index.astro
0:1 error This rule requires the `strictNullChecks` compiler option to be turned on to function correctly @typescript-eslint/prefer-nullish-coalescing
0:1 error This rule requires the `strictNullChecks` compiler option to be turned on to function correctly @typescript-eslint/strict-boolean-expressions
2:29 error Parse errors in imported module 'http-status-codes': parser.parse is not a function (undefined:undefined) import/namespace
2:48 error Extra semicolon @typescript-eslint/semi
✖ 4 problems (4 errors, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
Link to Minimal Reproducible Example
https://github.com/arty-name/typescript-eslint-astro-fragment
The branch is called import
Additional comments
The parser complains about line 3 in the file node_modules/http-status-codes/build/es/index.js, here’s what this line looks like
for (var s, i = 1, n = arguments.length; i < n; i++) {
The "erroneous" column 53 is the "less" character in the comparison i < n
"Parsing error: The keyword 'import' is reserved" on tsx files.
I am trying out this plugin with a fresh project. I have a components directory with say, Card.tsx:
import type { Component } from "solid-js";
const Card: Component = (props) => <p>Card</p>
export default Card;I've installed eslint, the plugin etc. My config is currently within my package.json, but have tried a .eslintrc.* file as well. It currently looks like this:
"eslintConfig": {
"extends": "eslint:recommended",
"overrides": [
{
"files": [
"*.astro"
],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [
".astro"
],
"sourceType": "module"
}
}
]
}My tsconfig.json looks like this:
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js"
},
"include": [
"**/*.ts",
"**/*.tsx",
"**/*.astro"
]
}When I run yarn eslint --ext .ts,.astro,.tsx src I end up with:
1:1 error Parsing error: The keyword 'import' is reserved
Should the plugin be able to deal with .tsx files? Am I missing something here?
Format HTML template without Prettier
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.24.0
What version of eslint-plugin-astro are you using?
0.19.0
What did you do?
Configuration ESLint
{
"extends": ["plugin:astro/recommended", "@antfu"],
"overrides": [
{
"files": ["*.astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"]
}
}
]
}Configuration VSCode Workspace
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"typescript.tsdk": "node_modules/typescript/lib"
}---
const now = new Date()
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
<pre>{now}</pre>
</body>
</html>
What did you expect to happen?
I'm used to https://github.com/antfu/eslint-config and like it a lot. Both linting and formatting is done with ESLint without Prettier. Is it possible to do the same with this plugin for Astro components? Everything is working as expected with the config above except for formatting the HTML template in Astro components.
For example is the template below valid as of now. The tags and props don't have the correct indents and spacing.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name ="viewport" content= "width=device-width" />
<meta name="generator" content={Astro.generator} />
<meta name="description" content="Astro SSR with Vue" />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>These things would be fixed in Vue templates thanks to the rules from esling-plugin-vue. Is it possible to implement similar rules in this package? Like https://eslint.vuejs.org/rules/html-indent.html and https://eslint.vuejs.org/rules/no-multi-spaces.html.
The docs states that the plugin can "Apply a consistent code style to Astro components" but what does that mean? Are you supposed to use Prettier or have I configures the plugin incorrectly?
Thanks in advance!
What actually happened?
Formatting is now working in the HTML template.
Link to Minimal Reproducible Example
Not applicable.
Additional comments
No response
rule "label-has-associated-control" from plugin:astro/jsx-a11y uses react htmlFor instead for
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?
7.32.0 (not the latest I know but it does not matter)
What version of eslint-plugin-astro are you using?
0.20.0
What did you do?
Configuration
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
parserOptions: {
ecmaVersion: 11,
sourceType: 'module',
},
extends: [
'plugin:astro/recommended',
'plugin:astro/jsx-a11y-recommended',
],
overrides: [
{
files: ['*.astro'],
parser: 'astro-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: ['.astro'],
},
rules: {
// allows to declare Astro components props without warning from rule no-unused-vars
'no-unused-vars': ['warn', { varsIgnorePattern: 'Props' }],
},
},
],
}<form>
<label class="label" for="address">Address</label>
<textarea placeholder="Address" required name="address" id="address"></textarea>
<input type="submit" value="Submit">
</form>What did you expect to happen?
No errors from ESLint
What actually happened?
ESLint complains that htmlFor attribute is not defined on labels.
Link to Minimal Reproducible Example
https://github.com/xididri/astro-eslint-jsx-a11y
Additional comments
In React components we must use htmlFor instead of for since it is a reserved keyword (same reason why className is used instead of class). Resulting HTML has for.
In Astro there is no such a thing, therefore the rule should be adapted to check for for attribute instead of htmlFor.
edit: Forgot to include the error message:
error A form label must be associated with a control astro/jsx-a11y/label-has-associated-control
Parsing error (',' expected) in <script> with typescript
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?
8.55.0
What version of eslint-plugin-astro are you using?
0.30.0
What did you do?
Configuration
.eslintrc.json contents:
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:astro/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
},
"overrides": [
{
"files": ["*.astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"]
},
"rules": {
}
}
]
}package.json contents:
{
"name": "radiant-raspberry",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.3.2",
"astro": "^4.0.4",
"typescript": "^5.3.3"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"eslint": "^8.55.0",
"eslint-plugin-astro": "^0.30.0"
}
}When running npx eslint . on an astro project using typescript and containing a script block like below, eslint reports Parsing error: ',' expected. This does not happen if the code is instead placed in the component script.
<script>
const x = new Map<string, string>();
</script>What did you expect to happen?
There should be no parsing error, only errors caused by lints.
What actually happened?
❯ npx eslint .
/home/garmelon/tmp/radiant-raspberry/src/pages/index.astro
19:33 error Parsing error: ',' expected
✖ 1 problem (1 error, 0 warnings)
Link to Minimal Reproducible Example
https://github.com/Garmelon/astro-eslint-bug-repro
Additional comments
No response
In Astro files: "Parsing error: JSX expressions must have one parent element."
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?
8.56.0
What version of eslint-plugin-astro are you using?
0.31.3
What did you do?
Since updating from astro 4.2.1 to 4.2.6, I'm getting the error "Parsing error: JSX expressions must have one parent element." even in .astro files with e.g. the following content:
{[].map(i => (
<p>title</p>
<p>{i}</p>
)}What did you expect to happen?
No error.
What actually happened?
Parsing error: JSX expressions must have one parent element
Link to Minimal Reproducible Example
Additional comments
Using fragments like <>...</> instead of braces (...) fixes it of course. But is this changed intended? I thought Astro files were not supposed to require that?
Error when I use Chinese
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?
8.56.0
What version of eslint-plugin-astro are you using?
0.31.3
What did you do?
---
interface Props {
title: string;
}
const { title } = Astro.props;
const metaInfo = {
title: '测试',
description: '一个前端工程师的技术笔记',
keywords: '技术笔记, 前端开发, 编程教程, Web 开发, 前端工具'
};
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content={metaInfo.title} />
<meta name="description" content={metaInfo.description} />
<meta name="keywords" content={metaInfo.keywords} />
<meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="Chinese" />
<meta name="revisit-after" content="1 days" />
<meta name="author" content="Caisr" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>
<style is:global>
:root {
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
}
html {
font-family: system-ui, sans-serif;
background: #13151a;
background-size: 224px;
}
code {
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
</style>
What did you expect to happen?
Perform eslint checks normally
What actually happened?
When my Chinese characters reach a certain number, eslint reports an error。
Parsing error: Unknown token at 1016, expected: "is:global", actual: "<slot />\n "
Link to Minimal Reproducible Example
Additional comments
No response
Doc improvement for `parserOptions.project`
If I want to use eslint-plugin-astro in the editor and the commandline together with typescript linting, you have to set global parserOptions.project pointing to your tsconfig.json, but for astro files in the VSCode extension (by dbaeumer), that does not work, hence you explicitly have to set parserOptions.project to false in the overrides for astro files.
This got it working for me, I think this will be helpful for other users, too, maybe you can integrate in your docs?
module.exports = {
root: true,
env: {
es2021: true,
node: true,
},
extends: [
'standard-with-typescript',
'prettier',
'plugin:astro/recommended',
'plugin:astro/jsx-a11y-strict',
],
plugins: ['prettier'],
overrides: [
{
files: ['*.astro'],
parser: 'astro-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
project: false,
extraFileExtensions: ['.astro'],
},
rules: {
// override/add rules settings here, such as:
// "astro/no-set-html-directive": "error"
},
},
],
parserOptions: {
ecmaVersion: 'latest',
project: './tsconfig.json',
sourceType: 'module',
},
rules: {
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/triple-slash-reference': 'off',
'prettier/prettier': ['error'],
},
};Add support for Typed Linting in script tags
Description
Hey, it would be awesome if we can add support for @typescript-eslint/recommended-type-checked in script tag as follows:
{
"files": ["**/*.astro/*.js", "*.astro/*.js"],
"extends": ["plugin:@typescript-eslint/recommended-type-checked"],
"parserOptions": {
"project": true
}
}I will definitely make a PR if you can point me in the right direction!
deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
Add parser to dependencies and install automatically
Description
related to withastro/docs#710 (comment).
-
Move
astro-eslint-parsertodependenciesfrompeerDependenciesand modify it so that you don't have to install it manually.
However, the problem remains that which parser version is used depends on the hierarchy ofnode_modules. This is a problem that is currently happening withvue-eslint-parser.
However, this plugin is the only package that currently depends onastro-eslint-parser, so this issue does not occur at this time. If we discover similar issues in the future, we should consider reverting to peerDeps. -
Remove
@typescript-eslint/parserfrompeerDependencies.
The Astro component can use TypeScript by default, but you can choose not to use it.@typescript-eslint/parseris not required. However, it should be stated in the documentation that it is recommended to install@typescript-eslint/parser.
- How about moving
@typescript-eslint/parsertodependencies?
I don't want to do this because it's likely to havenode_modulesissues. I think it's likely to conflict with@typescript-eslint/eslint-plugin.
ESLint Prettier and Astro Configuration Causes Error with Quick Fix Code Action
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?
8.40.0
What version of eslint-plugin-astro are you using?
0.26.2
What did you do?
Configuration: .eslintrc.cjs
module.exports = {
extends: [
"plugin:astro/recommended",
"plugin:prettier/recommended",
],
// ...
overrides: [
{
// Define the configuration for `.astro` file.
files: ["*.astro"],
// Allows Astro components to be parsed.
parser: "astro-eslint-parser",
// Parse the script in `.astro` as TypeScript by adding the following configuration.
// It's the setting you need when using TypeScript.
parserOptions: {
parser: "@typescript-eslint/parser",
extraFileExtensions: [".astro"],
},
rules: {
// override/add rules settings here, such as:
// "astro/no-set-html-directive": "error"
},
},
// ...
],
};
<!-- Paste your code here -->What did you expect to happen?
Configuring VSCode ESLint to use plugin:astro/recommended along with plugin:prettier/recommended would work in .astro files.
Steps to demonstrate:
- Configure a basic astro project repo
- Install VSCode extensions:
- Install devDependecies:
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"eslint": "^8.40.0",
"eslint-plugin-astro": "^0.26.2",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.8.8"
- In a
.astrofile, cause something that breaks a Prettier rule, VSCode should show aProblem(underlined in red) - Hover over the underlined problem.
Expected Result
- VSCode should pop up a window with explanation of the
eslint(prettier)problem plus aQuick Fixcode action option that you could click on to auto fix the problem
What actually happened?
Actual Result
- Open the
Outputconsole in VSCode and switch to see ESLint output. - Observe that when you hover over the underlined problem, an error occurs and no
Quick Fixcode action is available.
Error message displayed is:
[Error - 8:19:40 PM] Request textDocument/codeAction failed.
Message: Request textDocument/codeAction failed with message: Invalid regular expression: //** eslint-disable-next-line/: Nothing to repeat
Code: -32603
Link to Minimal Reproducible Example
Apologies, I don't have one yet. I can try to create one if needed.
Additional comments
This error does not trigger in other filetypes. i.e. try the same thing on a .js file or a .ts file, no issue occurs - it works as expected. It is just with .astro files that this occurs.
Type declaration in script causes eslint parsing error
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?
8.56.0
What version of eslint-plugin-astro are you using?
0.31.0
What did you do?
Configuration
module.exports = {
env: {
node: true,
es2022: true,
browser: true,
},
overrides: [
{
files: ["*.astro"],
extends: ["eslint:recommended", "plugin:astro/recommended", "prettier"],
parser: "astro-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
extraFileExtensions: [".astro"],
ecmaVersion: "latest",
sourceType: "module",
},
processor: "astro/client-side-ts",
},
{
files: ["*.d.ts"],
rules: {
"@typescript-eslint/triple-slash-reference": "off",
},
},
{
// Define the configuration for `<script>` tag.
// Script in `<script>` is assigned a virtual file name with the `.js` extension.
files: ["**/*.astro/*.js", "*.astro/*.js"],
parser: "@typescript-eslint/parser",
extends: ["eslint:recommended", "prettier"],
},
],
};
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
<div id="example">Example div</div>
</body>
</html>
<script>
// error example 1: function declaration with typing fails
const exampleTsFn = (parameter1: boolean) => {
console.log(`parameter1: ${parameter1}`);
};
// error example 2: type declaration fails
type ExampleElement = HTMLDivElement;
const example = document.querySelector<ExampleElement>("#example");
console.log(example);
</script>What did you expect to happen?
eslint CLI (eslint . --ext .js,.ts,.astro) is able to parse the astro file correctly (similar to how VSCode is able to).
What actually happened?
eslint CLI fails with Parsing error: Unexpected token :
Link to Minimal Reproducible Example
https://github.com/davidhouweling/eslint-astro-error
Additional comments
No response
Rule for single quote
Motivation
I am not sure if you can do it with a workaround plugin, but it isn't a rule natively in the plugin as far as I know
Description
When I write class = "..." to throw an error to change to single quotes
Examples
---
---
{/* ✓ GOOD */}
<div class = 'cls' />
{/* ✗ BAD */}
<div class ="cls" />Additional comments
thats all
Linting broken for script tag (auto-fix mangles file)
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?
8.36.0
What version of eslint-plugin-astro are you using?
0.26.0
What did you do?
Configuration
module.exports = {
extends: [
'plugin:astro/recommended',
'standard-with-typescript'
],
parserOptions: {
project: './tsconfig.json'
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<script>
alert('test')
</script>
</head>
<body>
</body>
</html>What did you expect to happen?
I expected no errors and --fix to correctly format the file
What actually happened?
ESLint shows errors:
6:4 error Trailing spaces not allowed no-trailing-spaces
6:4 error Too many blank lines at the end of file. Max of 0 allowed no-multiple-empty-lines
6:5 error Newline required at end of file but not found eol-last
And when running eslint --fix on the file, the result is completely broken:
<!DOCTYPE html>
<html lang="de">
<head>
<script>
alert('test')
<!DOCTYPE html>
<html lang="de">
<head>
<script>
alert('test')
<!DOCTYPE html>
<html lang="de">
<head>
<script>
alert('test')
</script>
</head>
<body>
</body>
</html>
Link to Minimal Reproducible Example
Additional comments
No response
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.