feat(linting): improve eslint (#8122)

Author: avivkeller

apps/site/app/[locale]/[...path]/page.tsx

@@ -74,9 +74,9 @@ const getPage: FC<PageParams> = async props => {
   // If we have a filename and layout then we have a page
   if (context.filename && context.frontmatter.layout) {
     return basePage.renderPage({
-      content: content,
+      content,
       layout: context.frontmatter.layout,
-      context: context,
+      context,
     });
   }
 

apps/site/app/[locale]/blog/[...path]/page.tsx

@@ -50,15 +50,15 @@ const getPage: FC<PageParams> = async props => {
   // Gets the Markdown content and context for Blog pages
   // otherwise this is likely a blog-category or a blog post
   const [content, context] = await basePage.getMarkdownContext({
-    locale: locale,
+    locale,
     pathname: `blog/${pathname}`,
   });
 
   // If this isn't a valid dynamic route for blog post or there's no markdown file
   // for this, then we fail as not found as there's nothing we can do.
   if (isDynamicRoute || context.filename) {
     return basePage.renderPage({
-      content: content,
+      content,
       layout: context.frontmatter.layout ?? 'blog-category',
       context: { ...context, pathname: `/blog/${pathname}` },
     });

apps/site/app/[locale]/download/archive/[version]/page.tsx

@@ -31,7 +31,7 @@ export const generateStaticParams = async () => {
 
   return ARCHIVE_DYNAMIC_ROUTES.map(version => ({
     locale: defaultLocale.code,
-    version: version,
+    version,
   }));
 };
 
@@ -58,15 +58,15 @@ const getPage: FC<PageParams> = async props => {
 
   // Gets the Markdown content and context for Download Archive pages
   const [content, context] = await basePage.getMarkdownContext({
-    locale: locale,
+    locale,
     pathname: 'download/archive',
   });
 
   // If this isn't a valid dynamic route for archive version or there's no markdown
   //  file for this, then we fail as not found as there's nothing we can do.
   if (isDynamicRoute && context.filename) {
     return basePage.renderPage({
-      content: content,
+      content,
       layout: context.frontmatter.layout!,
       context: { ...context, pathname: `/download/archive/${pathname}` },
     });

apps/site/app/[locale]/page.tsx

@@ -64,9 +64,9 @@ const getPage: FC<PageParams> = async props => {
   // If we have a filename and layout then we have a page
   if (context.filename && context.frontmatter.layout) {
     return basePage.renderPage({
-      content: content,
+      content,
       layout: context.frontmatter.layout,
-      context: context,
+      context,
     });
   }
 

apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx

@@ -24,17 +24,17 @@ const PrebuiltDownloadButtons: FC = () => {
   const installerUrl = platform
     ? getNodeDownloadUrl({
         versionWithPrefix: release.versionWithPrefix,
-        os: os,
-        platform: platform,
+        os,
+        platform,
         kind: 'installer',
       })
     : '';
 
   const binaryUrl = platform
     ? getNodeDownloadUrl({
         versionWithPrefix: release.versionWithPrefix,
-        os: os,
-        platform: platform,
+        os,
+        platform,
         kind: 'binary',
       })
     : '';

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -38,12 +38,12 @@ const VersionDropdown: FC = () => {
     );
 
     if (release?.isLts && pathname.includes('current')) {
-      redirect({ href: '/download', locale: locale });
+      redirect({ href: '/download', locale });
       return;
     }
 
     if (release?.status === 'Current' && !pathname.includes('current')) {
-      redirect({ href: '/download/current', locale: locale });
+      redirect({ href: '/download/current', locale });
       return;
     }
 

apps/site/components/withBreadcrumbs.tsx

@@ -57,9 +57,7 @@ const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
         // Goes deeper on the tree of items if there are any.
         currentNode = items;
 
-        return label
-          ? [...breadcrumbs, { label: label, href: link }]
-          : breadcrumbs;
+        return label ? [...breadcrumbs, { label, href: link }] : breadcrumbs;
       }
 
       return breadcrumbs;

apps/site/components/withFooter.tsx

@@ -16,7 +16,7 @@ const WithFooter: FC = () => {
   const { socialLinks, footerLinks } = siteNavigation;
 
   const navigation = {
-    socialLinks: socialLinks,
+    socialLinks,
     footerLinks: footerLinks.map(link => ({ ...link, text: t(link.text) })),
   };
 

apps/site/components/withNavBar.tsx

@@ -62,9 +62,9 @@ const WithNavBar: FC = () => {
 
       <NavBar
         navItems={navigationItems.map(([, { label, link, target }]) => ({
-          link: link,
+          link,
           text: label,
-          target: target,
+          target,
         }))}
         pathname={pathname}
         as={Link}

apps/site/eslint.config.js

@@ -1,60 +1,36 @@
-import { FlatCompat } from '@eslint/eslintrc';
-import { flatConfigs } from 'eslint-plugin-import-x';
+import next from '@next/eslint-plugin-next';
 import * as mdx from 'eslint-plugin-mdx';
 import react from 'eslint-plugin-react';
-import tseslint from 'typescript-eslint';
+import * as hooks from 'eslint-plugin-react-hooks';
 
 import baseConfig from '../../eslint.config.js';
 
-const compat = new FlatCompat();
-
-const compatConfig = compat.config({
-  extends: [
-    // https://github.com/vercel/next.js/discussions/49337
-    'plugin:@next/eslint-plugin-next/core-web-vitals',
+export default baseConfig.concat([
+  {
+    ignores: ['pages/en/blog/**/*.{md,mdx}/**', 'public', 'next-env.d.ts'],
+  },
 
-    // https://github.com/facebook/react/issues/28313
-    'plugin:react-hooks/recommended',
-  ],
-});
+  react.configs.flat['jsx-runtime'],
+  hooks.configs['recommended-latest'],
+  next.flatConfig.coreWebVitals,
+  mdx.flatCodeBlocks,
 
-export default tseslint.config(
-  ...baseConfig,
-  { ignores: ['pages/en/blog/**/*.{md,mdx}/**', 'public', 'next-env.d.ts'] },
+  // Type-checking
   {
-    extends: [
-      react.configs.flat['jsx-runtime'],
-      ...tseslint.configs.recommended,
-      flatConfigs.typescript,
-      ...compatConfig,
-    ],
-    files: ['**/*.{js,md,mdx,mjs,ts,tsx}'],
+    ignores: ['**/*.{md,mdx}', '**/*.{md,mdx}/**'],
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
     rules: {
-      '@typescript-eslint/array-type': ['error', { default: 'generic' }],
       '@typescript-eslint/consistent-type-imports': 'error',
-      '@typescript-eslint/no-require-imports': 'off',
-      '@next/next/no-duplicate-head': 'off',
-      'import-x/no-duplicates': 'off',
     },
-    settings: { react: { version: 'detect' } },
   },
-  {
-    files: ['**/*.{md,mdx}'],
-    extends: [mdx.flat],
-    processor: mdx.createRemarkProcessor({ lintCodeBlocks: true }),
-    rules: {
-      'no-irregular-whitespace': 'off',
-      '@next/next/no-img-element': 'off',
-      '@next/next/no-html-link-for-pages': ['error', 'apps/site/pages/'],
 
-      // https://github.com/typescript-eslint/typescript-eslint/issues/9860
-      '@typescript-eslint/consistent-type-imports': 'off',
-    },
-  },
   {
-    files: ['**/*.{mdx,tsx}'],
     rules: {
-      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
       'react/no-unescaped-entities': 'off',
       'react/function-component-definition': [
         'error',
@@ -63,22 +39,25 @@ export default tseslint.config(
           unnamedComponents: 'arrow-function',
         },
       ],
-      'no-restricted-syntax': [
-        'error',
-        {
-          selector:
-            "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
-          message:
-            'Default React import not allowed since we use the TypeScript jsx-transform. If you need a global type that collides with a React named export (such as `MouseEvent`), try using `globalThis.MouseHandler`',
-        },
-        {
-          selector:
-            "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier)",
-          message:
-            'Named * React import is not allowed. Please import what you need from React with Named Imports',
-        },
-      ],
+    },
+    settings: { react: { version: 'detect' } },
+  },
+
+  {
+    files: ['**/*.{md,mdx}/**'],
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+
+  {
+    ...mdx.flat,
+    processor: mdx.createRemarkProcessor({ lintCodeBlocks: true }),
+    rules: {
+      ...mdx.flat.rules,
+      'no-irregular-whitespace': 'off',
+      '@next/next/no-img-element': 'off',
+      '@next/next/no-html-link-for-pages': ['error', 'apps/site/pages/'],
     },
   },
-  mdx.flatCodeBlocks
-);
+]);