Skip to content

Commit

Permalink
add docs hint for unsafe return of any resolves #168 (#317)
Browse files Browse the repository at this point in the history
* add docs hint for unsafe return of any

* fix: spelling error in JSX namespace example
  • Loading branch information
david-abell authored Feb 29, 2024
1 parent ac74a47 commit 070332f
Showing 1 changed file with 54 additions and 0 deletions.
54 changes: 54 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,60 @@ See [the rule list](https://ota-meshi.github.io/eslint-plugin-astro/rules/) to g

See [https://github.com/ota-meshi/astro-eslint-parser#readme](https://github.com/ota-meshi/astro-eslint-parser#readme).


### Resolving Error in JSX: Unsafe return of an `any` typed value

Astro supports JSX from multiple frameworks such as **React**, **Preact**, and **Solid.js** by defining JSX Elements as `HTMLElement | any;`. When a framework with a JSX type definition is not present in your project this **any** can cause the ESLint error `@typescript-eslint/no-unsafe-return`.

This can be resolved by overriding the astroHTML.JSX.Element definition with a `*.d.ts` file such as `jsx.d.ts` in your project root directory:


```typescript
import "astro/astro-jsx";

declare global {
namespace JSX {
// type Element = astroHTML.JSX.Element // We want to use this, but it is defined as any.
type Element = HTMLElement;
}
}
```

Add this `*.d.ts` to your `tsconfig.eslint.json`:

```json
{
"extends": "./tsconfig.json",
"include": [
// ...
"jsx.d.ts"
]
}

```

Ensure that any necessary parserOptions in your `.eslintrc.**` have a project key also pointing to this config:

```json
{
// ...
"overrides": [
{
"files": ["*.astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"],
// add this line
"project": "./tsconfig.eslint.json"
},
// ...
}
// ...
]}

```

### Running ESLint from the command line

If you want to run `eslint` from the command line, make sure you include the `.astro` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern, because ESLint targets only `.js` files by default.
Expand Down

0 comments on commit 070332f

Please sign in to comment.