fix: react plugin allow .tsx extension

packages/eslint-config/index.js

@@ -35,6 +35,7 @@ const config = [
  'react-hooks/rules-of-hooks': 2,
  'react/jsx-no-literals': 0,
  'react/jsx-no-bind': [1, { allowArrowFunctions: true }],
+ 'react/jsx-filename-extension': [2, { extensions: ['.jsx', '.tsx'] }],
  },
  languageOptions: {
  parserOptions: {

packages/test-react-typescript/README.md

@@ -0,0 +1,5 @@
+# test-react-javascript
+
+This package is here just to provide a space for easily testing the react linting rules.
+
+It's not intended to be well maintained or do anything important, and will just be tweaked randomly to see how the lint config behaves.

packages/test-react-typescript/package.json

@@ -0,0 +1,14 @@
+{
+ "name": "lint-test-react-typescript",
+ "version": "0.0.0",
+ "private": true,
+ "license": "0BSD",
+ "description": "a simple package with react to test the lint config with",
+ "type": "module",
+ "dependencies": {
+ "react": "^18.2.0"
+ },
+ "devDependencies": {
+ "typescript": "^5.4.2"
+ }
+}

packages/test-react-typescript/test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export function Test() {
+ const [value, setValue] = React.useState('');
+ const [count, setCount] = React.useState(0);
+ React.useEffect(() => {
+ // linter should enforce `value` in hook dependencies
+ console.log(value);
+ });
+ return (
+ <div>
+ <input onChange={(e) => setValue(e.target.value)} type="text" value={value} />
+ <button onClick={() => setCount(count + 1)} type="button">
+ type attribute should be required {count}
+ </button>
+ </div>
+ );
+}

yarn.lock

@@ -5029,7 +5029,7 @@ typed-array-length@^1.0.5:
  is-typed-array "^1.1.13"
  possible-typed-array-names "^1.0.0"
 
-typescript@^5.0.0:
+typescript@^5.0.0, typescript@^5.4.2:
  version "5.4.2"
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"
  integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==