Use custom linting

Author: goto-bus-stop

.eslintrc.cjs

@@ -1,5 +1,23 @@
 module.exports = {
-  extends: 'airbnb',
+  extends: [
+    'eslint:recommended',
+    'plugin:import/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  plugins: [
+    'import',
+    'react',
+    'react-hooks',
+    'jsx-a11y',
+  ],
+
+  env: {
+    es6: true,
+    browser: true,
+  },
+
   parserOptions: {
     ecmaVersion: 2022,
     sourceType: 'module',
@@ -24,7 +42,10 @@ module.exports = {
   overrides: [
     {
       files: ['**/*.ts', '**/*.tsx'],
-      extends: ['airbnb-typescript'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      plugins: [
+        '@typescript-eslint',
+      ],
       parserOptions: {
         project: './tsconfig.json',
       },

example/app.tsx

@@ -9,14 +9,15 @@ const videos = [
   { id: 169408731, name: 'Hoody - Like You' },
 ];
 
+type Props = Record<never, never>;
 interface State {
   videoIndex: number,
   volume: number,
   paused: boolean,
 }
 
-class App extends React.Component<{}, State> {
-  constructor(props: {}) {
+class App extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -68,6 +69,7 @@ class App extends React.Component<{}, State> {
           <div className="collection">
             {videos.map((choice, index) => (
               <a
+                key={choice.id}
                 href={`#!/video/${index}`}
                 className={`collection-item ${video === choice ? 'active' : ''}`}
                 onClick={() => this.selectVideo(index)}

package.json

@@ -57,8 +57,6 @@
     "@typescript-eslint/parser": "^6.13.2",
     "@u-wave/react-vimeo-example": "file:example",
     "eslint": "^8.2.0",
-    "eslint-config-airbnb": "^19.0.0",
-    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.27.0",

test/index.test.js

@@ -1,3 +1,4 @@
+/* global globalThis */
 import {
   describe, it, expect, vi,
 } from 'vitest';