Document how to add eslint-plugin-react #388
Comments
ota-meshi
added
documentation
|
I've setup a minimal project with what little knowledge I have of ESLint 9 here, drawing from the configuration provided from facebook/react#28313, specifically from this comment. While the project provides linting for React components and |
|
This is actually how I managed to do it so far. Still testing, but seems to be quite working. The only thing that doesn't yet was fixable with #132 however can't get it working with v9 import pluginJs from '@eslint/js';
// import tsParser from '@typescript-eslint/parser';
import eslintPluginAstro from 'eslint-plugin-astro';
import importPlugin from 'eslint-plugin-import';
import prettierRecommended from 'eslint-plugin-prettier/recommended';
import reactPlugin from 'eslint-plugin-react';
import hooksPlugin from 'eslint-plugin-react-hooks';
import tseslint from 'typescript-eslint';
export default [
// global ignores
{ ignores: ['dist/*', 'node_modules/*'] },
// standard js rules
pluginJs.configs.recommended,
// standard typescript rules
...tseslint.configs.recommended,
// override typescript rules
{
rules: {
'@typescript-eslint/explicit-function-return-type': 0,
'@typescript-eslint/explicit-module-boundary-types': 0,
'@typescript-eslint/no-empty-function': 0,
'@typescript-eslint/no-unused-expressions': 0,
'@typescript-eslint/no-empty-interface': 0,
'@typescript-eslint/no-explicit-any': 0,
'@typescript-eslint/no-unused-vars': [
'error',
{
varsIgnorePattern: '^_',
argsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
},
],
},
},
// astro rules
...eslintPluginAstro.configs.recommended,
// react rules
{
files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
settings: {
react: {
version: 'detect',
},
},
languageOptions: {
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
...reactPlugin.configs.flat.recommended,
},
// react hooks
{
plugins: {
'react-hooks': hooksPlugin,
},
rules: {
...hooksPlugin.configs.recommended.rules,
},
},
// override react rules
{
rules: {
'react/react-in-jsx-scope': 'off',
'react/prop-types': 'off',
},
},
// prettier rules
prettierRecommended,
// TODO doesnt work yet
// 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: tsParser,
// rules: {
// 'prettier/prettier': 'off',
// },
// },
// import rules
{
...importPlugin.flatConfigs.recommended,
rules: {
'import/order': [
'error',
{
groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
alphabetize: {
order: 'asc',
},
},
],
},
},
]; |
|
I’m able to run this plugin in ESLint 9.x without eslint-plugin-react. But when using |
|
I am using eslint 9.17.0 and it is working perfectly with this config. Hope this will help. |
|
@joska-p Neat configuration, thanks for sharing it. Right now I'm getting an error with Any ideas? |
|
It could help if you give more context. What line of code give that error for example. i have change my config to take advantages of tseslint.config function. you can have a look there https://tseslint.com/users/configs. my config today is as follow: import path from "node:path";
import { fileURLToPath } from "node:url";
import { includeIgnoreFile } from "@eslint/compat";
import eslint from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import eslintPluginAstro from "eslint-plugin-astro";
import importPlugin from "eslint-plugin-import";
import jsxA11y from "eslint-plugin-jsx-a11y";
import pluginReact from "eslint-plugin-react";
import reactCompiler from "eslint-plugin-react-compiler";
import eslintPluginReactHooks from "eslint-plugin-react-hooks";
import globals from "globals";
import tseslint from "typescript-eslint";
// File path setup
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const gitignorePath = path.resolve(__dirname, ".gitignore");
const baseConfig = tseslint.config({
extends: [eslint.configs.recommended, tseslint.configs.strict, tseslint.configs.stylistic],
rules: {
"no-console": "warn",
"no-unused-vars": "off", // handled by typescript
},
});
const importConfig = tseslint.config({
extends: [importPlugin.flatConfigs.recommended, importPlugin.flatConfigs.typescript],
settings: {
"import/resolver": {
typescript: {
alwaysTryTypes: true,
project: "./tsconfig.json",
},
},
},
rules: {
"import/order": [
"error",
{
groups: ["builtin", "external", "parent", "sibling", "index"],
alphabetize: {
order: "asc",
},
},
],
"import/no-named-as-default-member": "off",
},
});
const jsxA11yConfig = tseslint.config({
files: ["**/*.{js,jsx,ts,tsx}"],
extends: [jsxA11y.flatConfigs.recommended],
languageOptions: {
...jsxA11y.flatConfigs.recommended.languageOptions,
},
rules: {
...jsxA11y.flatConfigs.recommended.rules,
},
});
const reactConfig = tseslint.config({
files: ["**/*.{js,jsx,ts,tsx}"],
extends: [pluginReact.configs.flat.recommended],
languageOptions: {
...pluginReact.configs.flat.recommended.languageOptions,
globals: {
...globals.serviceworker,
...globals.browser,
},
},
plugins: {
"react-hooks": eslintPluginReactHooks,
"react-compiler": reactCompiler,
},
settings: { react: { version: "detect" } },
rules: {
...eslintPluginReactHooks.configs.recommended.rules,
"react/react-in-jsx-scope": "off",
"react-compiler/react-compiler": "error",
},
});
export default tseslint.config(
includeIgnoreFile(gitignorePath),
baseConfig,
jsxA11yConfig,
reactConfig,
eslintPluginAstro.configs.recommended,
importConfig,
eslintConfigPrettier
); |
|
Hey @joska-p thanks again for your config, I really appreciate it and I like the approach. Here is a repo with the minimal reproduction of this: https://github.com/dvelasquez/astro-eslint |
|
Hi. I think you just need to generate the .astro directory. You can do so with npm run build |
|
Yes, the .astro directory is generated when you run Does the same happen to you? If that is the case I will disable that rule. |
|
Yes, I got the same error. But I think we can disable this rule in the config. TypeScript should handle that kind of error. I only use this plugin to sort the imports, not to check if they resolve. I really think TypeScript would show an error if it couldn't resolve the import. |
|
How can I prevent When not using |
|
Hello. The issue is due to the line |
|
Thanks so much, @joska-p! I've managed to fix my issue with your suggestions. I'm including my configuration file here as well, in case it helps others: |
|
happy to help. |
It would be awesome if someone can share how they added eslint-plugin-react together with this plugin.
The text was updated successfully, but these errors were encountered: