Not working with typescriptEslint.configs.recommendedTypeChecked #447
Comments
|
The type checked rules require the Add this to your config array: {
languageOptions: {
parserOptions: {
projectService: {
allowDefaultProject: ["*.astro", "*.js"],
},
tsconfigRootDir: import.meta.dirname,
},
},
},Bad news: If you're experience matches mine, it doesn't actually work to lint .astro files. I get I have yet to figure out how to have both working at the same time. |
|
Ah @ghchaosfae I did see that error as well! But I didn’t know if I was moving “forward” or “backward” so-to-speak. Wanted to find the most minimal issue, and work from there. But to your point, likely a different error happens when we move past the first step, if we determine that’s the right fix. |
|
Ok! Update to this, it seems that it's very specifically projectService: {
allowDefaultProject: ["*.astro", "*.js"],
},it seems to work properly. For the maintainers: seems like we need some conditional handling somewhere so that the newer property can work? |
|
@ghchaosfae great find! Yes that’s a good workaround, but would love to keep using |
|
I ran into the same problem when I started using the eslint-config-love package. It includes My current workaround is to programmatically delete |
|
The problem is still here. Only now the parser tries to use the old `astro-eslint-parser` does not support the `projectService` option, it will parse it as `project: true` instead. |
|
Did you guys try the extrafileextensions option ? Also related. |
|
I hit the same issue -- I'm still seeing It looks like if you've got a configuration that sets
See this plugin's Here's what fixed it for me: import config from "my-custom-eslint-config-with-typechecked-rules";
import astro from "eslint-plugin-astro";
const ts = "typescript-eslint/parser";
export default [
...config,
...astro.configs.recommended.map((c) => {
const opts = c.languageOptions;
const baseParser = opts?.parser?.meta?.name;
const subParser = opts?.parserOptions?.parser?.meta?.name;
if (opts && (baseParser === ts || subParser === ts)) {
opts.parserOptions = {
...opts.parserOptions,
projectService: false,
project: true,
};
}
return c;
}),
];This makes linting work in frontmatter code blocks, as well as in components. The only part that doesn't seem to work is client As a workaround, instead of having the script inline in the component: <!-- my-component.astro -->
<div>
<script>
const neverUsedVar = 5; // won't be linted!
doCoolStuff();
</script>
<div>define them in a separate file and use the <!-- my-component.astro -->
<div>
<script src="./do-cool-stuff.ts"></script>
<div>Ultimately I agree that it would be great if |
|
I spent a lot of time trying a lot of things to make ESLint work seamlessly with Astro. // tsconfig.eslint.json
{
"extends": "./tsconfig.json",
"include": [".astro/types.d.ts", "src/**/*", "./eslint.config.js", "./astro.config.mjs"]
}// tsconfig.json
{
"extends": "astro/tsconfigs/strictest",
"compilerOptions": {
"plugins": [
{
"name": "@astrojs/ts-plugin"
}
],
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"],
"@pages/*": ["src/pages/*"],
"@utils/*": ["src/utils/*"],
"@i18n/*": ["src/i18n/*"],
"@assets/*": ["src/assets/*"],
"@styles/*": ["src/styles/*"],
"@websites/*": ["src/pages/_landingPages/websites/*"]
},
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"noUncheckedIndexedAccess": true,
"verbatimModuleSyntax": true
},
"include": [".astro/types.d.ts", "src/**/*"],
"exclude": ["dist"]
}// global.d.ts
import 'astro/astro-jsx';
declare global {
namespace JSX {
/* Required by ESLint to work well with Astro. This is fixing elements returned in map loops inside components. */
// type Element = astroHTML.JSX.Element // We want to use this, but it is defined as any.
type Element = HTMLElement;
type IntrinsicElements = astroHTML.JSX.IntrinsicElements;
}
}// eslint.config.js
import css from '@eslint/css';
import eslintConfigPrettier from 'eslint-config-prettier/flat';
import { default as astro, default as eslintPluginAstro } from 'eslint-plugin-astro';
import jsxA11y from 'eslint-plugin-jsx-a11y';
import tseslint from 'typescript-eslint';
export default tseslint.config(
css.configs.recommended,
tseslint.configs.stylisticTypeChecked,
tseslint.configs.strictTypeChecked,
...eslintPluginAstro.configs.recommended,
eslintConfigPrettier,
jsxA11y.flatConfigs.strict,
astro.configs.recommended,
{
languageOptions: {
// globals: {
// ...globals.browser,
// ...globals.serviceworker,
// },
parserOptions: {
// TODO There is a bug with the parser: https://github.com/ota-meshi/eslint-plugin-astro/issues/447
// projectService: {
// allowDefaultProject: ['**/*.astro'],
// },
// projectService: false,
project: './tsconfig.eslint.json',
},
},
},
{
files: ['*.astro'],
parser: 'astro-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: ['.astro'],
},
},
); |
Before You File a Bug Report Please Confirm You Have Done The Following...
What version of ESLint are you using?
9.14.0
What version of
eslint-plugin-astroare you using?1.3.1
What did you do?
When using typescript-eslint’s typechecked preset, linting throws an error and doesn’t run.
What did you expect to happen?
Lint run completes
What actually happened?
Link to Minimal Reproducible Example
https://github.com/drwpow-figma/astro-eslint-repro
Additional comments
Thanks for a great plugin! ❤️
The text was updated successfully, but these errors were encountered: