Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions packages/create-vite/template-react-ts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,18 @@ Currently, two official plugins are available:

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
extends: [
// Remove ...tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
],
languageOptions: {
// other options...
parserOptions: {
Expand All @@ -25,9 +31,7 @@ export default tseslint.config({
})
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
You can also install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) for React-specific lint rules:
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can already mention it? Even if the code example is still for eslint-plugin-react

Suggested change
You can also install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) for React-specific lint rules:
You can also install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) or [[eslint-plugin-react-x](eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react) for React-specific lint rules:

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah maybe it's not a lot of work left than I expected. I wanted to rewrite this part to eslint-plugin-react-x only though and suggest a code example for it.

I'll try to get to that later, but if not I think this PR is ok to be merged and I can create another PR later.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As you prefer, thanks for doing this!


```js
// eslint.config.js
Expand Down
22 changes: 1 addition & 21 deletions packages/create-vite/template-react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,4 @@ Currently, two official plugins are available:

## Expanding the ESLint configuration

If you are developing a production application, you can install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react'

export default {
// Set the react version
settings: { react: { version: '19.0' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
}
```
If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙏