eslint issue in .astro file for import and other JSX
Opened this issue · 1 comments
xkeshav commented
Describe the bug
I have tried the same .eslintrc file but with some changes on the repo but when I run npm run lint
it gives few error which I list it down with reason
.eslintrc
{
// Configuration for JavaScript files
"extends": ["plugin:prettier/recommended", "plugin:astro/recommended", "plugin:import/recommended"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"extraFileExtensions": [".astro"],
"ecmaVersion": "latest"
},
"overrides": [
// Configuration for TypeScript files
{
"parser": "@typescript-eslint/parser",
"files": ["*.ts", "*.tsx"],
"plugins": [
"@typescript-eslint",
"react"
],
"extends": [
"airbnb-typescript",
"plugin:prettier/recommended"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never",
"": "never"
}
],
"prettier/prettier": "off",
"react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
"react/require-default-props": "off", // Allow non-defined react props as undefined
"react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
"@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
"@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
"@typescript-eslint/no-unused-vars": "off",
"quotes": ["error", "double", { "avoidEscape": true }]
}
},
// Configuration for Astro
{
"files": ["*.astro"],
"extends": [
"airbnb-typescript",
"plugin:prettier/recommended"
],
"plugins": ["astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"],
"sourceType": "module"
},
"env": {
// Enables global variables available in Astro components.
"node": true,
"astro/astro": true,
"es2020": true
},
"rules": {
"prettier/prettier": "error",
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never",
"scss": "never",
"": "never"
}
], // Avoid missing file extension errors in .astro files
"import/no-unresolved": [
"error",
{
"ignore": ["@/*"]
}
],
"react/jsx-filename-extension": [1, { "extensions": [".astro"] }], // Accept jsx in astro files
"react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
"react/require-default-props": "off", // Allow non-defined react props as undefined
"react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
"@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
"@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
"@typescript-eslint/no-unused-vars": "error"
},
"globals": {
"Astro": "readonly"
}
}
]
}
- error Parsing error:
import
can only be used inimport()
orimport.meta
prettier/prettier
this is happens on .astro pages where we have import .scss file ;
so dow to remove this issue?
- Parsing error: Unexpected token, expected "}" prettier/prettier
which is using
const { title } = Astro.props;
- Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? prettier/prettier
which is due to below content in .astro page
<Layout> ....</Layout>
Expected behavior
How to avoid import meta and adjacent JSX issue
Screenshots
Desktop (please complete the following information):
- OS: windows 11
- Browser chrome
- Version 183
Additional context
Add any other context about the problem here.
xkeshav commented
overall every import statement gives error in .astro file