[add] inject typescript config to eslint

idea2app · Sep 12, 2024 · d74b359 · d74b359
1 parent ec93488
commit d74b359
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 109 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -1,49 +1,50 @@
-import typescriptPlugin from 'typescript-eslint';
-import globals from 'globals';
-
-import js from '@eslint/js';
-import json from '@eslint/json';
-import markdown from '@eslint/markdown';
+import url from 'node:url';
 
+import { fixupPluginRules } from '@eslint/compat';
+import eslint from '@eslint/js';
 import eslintConfigPrettier from 'eslint-config-prettier';
-import react from 'eslint-plugin-react';
-import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import reactPlugin from 'eslint-plugin-react';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+import tsEslint from 'typescript-eslint';
 
-export default [
-    // import sort
-    {
-        files: ['**/*.{js,ts,jsx,tsx}'],
-        plugins: {
-            'simple-import-sort': simpleImportSort
-        },
-        rules: {
-            'simple-import-sort/exports': 'error',
-            'simple-import-sort/imports': 'error'
-        }
-    },
-    // TypeScript
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+export default tsEslint.config(
+    // register all of the plugins up-front
     {
-        files: ['**/*.{ts,tsx}'],
         plugins: {
-            '@typescript-eslint': typescriptPlugin.plugin
+            ['@typescript-eslint']: tsEslint.plugin,
+            // https://github.com/jsx-eslint/eslint-plugin-react/issues/3699
+            ['react']: fixupPluginRules(reactPlugin),
+            ['simple-import-sort']: simpleImportSortPlugin
         }
     },
-    // JavaScript
     {
-        name: 'eslint/js',
-        files: ['**/*.{js,ts,jsx,tsx}'],
-        languageOptions: { globals: globals.browser },
-        plugins: { js },
-        rules: {
-            'consistent-return': 'error'
-        }
+        // config with just ignores is the replacement for `.eslintignore`
+        ignores: ['**/node_modules/**', '**/dist/**']
     },
-    // React
+
+    // extends ...
+    eslint.configs.recommended,
+    ...tsEslint.configs.recommended,
+
+    // base config
     {
-        name: 'react-jsx',
-        files: ['**/*.{js,ts,jsx,tsx}'],
-        plugins: { react },
+        languageOptions: {
+            globals: {
+                ...globals.es2020,
+                ...globals.browser
+            },
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: __dirname,
+                warnOnUnsupportedTypeScriptVersion: false
+            }
+        },
         rules: {
+            'simple-import-sort/exports': 'error',
+            'simple-import-sort/imports': 'error',
             'react/jsx-no-target-blank': 'warn',
             'react/jsx-sort-props': [
                 'error',
@@ -53,22 +54,20 @@ export default [
                     callbacksLast: true,
                     noSortAlphabetically: true
                 }
-            ]
+            ],
+            '@typescript-eslint/no-empty-object-type': 'off'
         }
     },
-    // JSON files
     {
-        name: 'eslint/json',
-        files: ['**/*.json', '.c8rc'],
-        ignores: ['**/package-lock.json'],
-        language: 'json/json',
-        plugins: { json }
-    },
-    // MarkDown
-    {
-        files: ['**/*.md'],
-        language: 'markdown/gfm',
-        plugins: { markdown }
+        files: ['**/*.js'],
+        extends: [tsEslint.configs.disableTypeChecked],
+        rules: {
+            // turn off other type-aware rules
+            '@typescript-eslint/internal/no-poorly-typed-ts-props': 'off',
+
+            // turn off rules that don't apply to JS code
+            '@typescript-eslint/explicit-function-return-type': 'off'
+        }
     },
     eslintConfigPrettier
-];
+);
diff --git a/package.json b/package.json
@@ -35,16 +35,17 @@
     },
     "devDependencies": {
         "@babel/runtime": "^7.25.6",
+        "@eslint/compat": "^1.1.1",
         "@eslint/js": "^9.10.0",
-        "@eslint/json": "^0.4.0",
-        "@eslint/markdown": "^6.1.0",
         "@parcel/config-default": "~2.12.0",
         "@parcel/packager-raw-url": "~2.12.0",
         "@parcel/transformer-less": "~2.12.0",
         "@parcel/transformer-typescript-tsc": "~2.12.0",
         "@parcel/transformer-webmanifest": "~2.12.0",
         "@types/lodash": "^4.17.7",
         "@types/node": "^20.16.5",
+        "@typescript-eslint/eslint-plugin": "^8.5.0",
+        "@typescript-eslint/parser": "^8.5.0",
         "buffer": "^6.0.3",
         "eslint": "9.10.0",
         "eslint-config-prettier": "^9.1.0",
@@ -76,10 +77,8 @@
         "tabWidth": 4
     },
     "lint-staged": {
-        "*.{html,md,less,json,yml,js,mjs,ts,tsx}": [
-            "eslint --fix",
-            "prettier --write"
-        ]
+        "*.{html,md,less,json,yml,js,mjs,ts,tsx}": "prettier --write",
+        "*.{js,mjs,ts,tsx}": "eslint --fix"
     },
     "browserslist": "> 0.5%, last 2 versions, not dead, IE 11",
     "scripts": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/page/Component.tsx b/src/page/Component.tsx
@@ -1,17 +1,17 @@
-import { observer } from 'mobx-react';
-import { Container, Table } from 'react-bootstrap';
-import { Editor } from 'react-bootstrap-editor';
 import {
-    TimeDistance,
-    TableSpinner,
-    Icon,
     Avatar,
+    EditorHTML,
+    Icon,
     Nameplate,
-    EditorHTML
+    TableSpinner,
+    TimeDistance
 } from 'idea-react';
+import { observer } from 'mobx-react';
+import { Container, Table } from 'react-bootstrap';
+import { Editor } from 'react-bootstrap-editor';
 
-import { TSXSample } from '../component/TSXSample';
 import { EditorJS } from '../component/Editor';
+import { TSXSample } from '../component/TSXSample';
 import RichEditData from '../model/rich-edit.json';
 import { i18n } from '../model/Translation';
 

diff --git a/src/page/Home.tsx b/src/page/Home.tsx
@@ -1,9 +1,8 @@
-import { Component } from 'react';
 import { observer } from 'mobx-react';
+import { Component } from 'react';
+import { Button, Card, Col, Container, Row } from 'react-bootstrap';
 import { RouteComponentProps, withRouter } from 'react-router-class-tools';
 
-import { Container, Row, Col, Card, Button } from 'react-bootstrap';
-
 import project, { Project } from '../model/Project';
 import { i18n } from '../model/Translation';
 
@@ -36,7 +35,7 @@ class HomePage extends Component<
         homepage,
         html_url
     }: Project) => (
-        <Col className="mb-3" key={id}>
+        <Col key={id} className="mb-3">
             <Card className="h-100">
                 <Card.Img variant="top" src={logo} />
                 <Card.Body>

diff --git a/src/page/Pagination.tsx b/src/page/Pagination.tsx
@@ -60,13 +60,13 @@ export class PaginationPage extends Component {
             <Container style={{ height: '91vh' }}>
                 <RestTable
                     className="h-100 text-center"
+                    columns={this.columns}
+                    store={repositoryStore}
+                    translator={i18n}
                     striped
                     hover
                     editable
                     deletable
-                    columns={this.columns}
-                    store={repositoryStore}
-                    translator={i18n}
                     onCheck={console.log}
                 />
             </Container>

diff --git a/src/page/ScrollList.tsx b/src/page/ScrollList.tsx
@@ -17,7 +17,7 @@ export const ScrollListPage: FC = observer(() => (
             renderList={allItems => (
                 <Row as="ul" className="list-unstyled g-4" xs={1} sm={2}>
                     {allItems.map(item => (
-                        <Col as="li" key={item.id}>
+                        <Col key={item.id} as="li">
                             <GitCard className="h-100 shadow-sm" {...item} />
                         </Col>
                     ))}