[add] stylistic plugin (#50)

Author: Soecka

components/BlockEditor.tsx

@@ -15,6 +15,7 @@ async function uploadByFile(file: File) {
     return { success: 1, file: { url } };
   } catch (error) {
     console.error(error);
+
     return { success: 0 };
   }
 }

eslint.config.mjs

@@ -1,6 +1,8 @@
-// @ts-check
-import { FlatCompat } from '@eslint/eslintrc';
+import cspellPlugin from '@cspell/eslint-plugin';
 import eslint from '@eslint/js';
+// @ts-expect-error eslint-plugin-next doesn't come with TypeScript definitions
+import nextPlugin from '@next/eslint-plugin-next';
+import stylistic from '@stylistic/eslint-plugin';
 import eslintConfigPrettier from 'eslint-config-prettier';
 import react from 'eslint-plugin-react';
 import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
@@ -10,18 +12,21 @@ import { fileURLToPath } from 'url';
 
 /**
  * @see{@link https://github.com/typescript-eslint/typescript-eslint/blob/main/eslint.config.mjs}
+ * @see{@link https://github.com/vercel/next.js/issues/71763#issuecomment-2476838298}
  */
 
-const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url)),
-  flatCompat = new FlatCompat();
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url));
 
 export default tsEslint.config(
   // register all of the plugins up-front
   {
     plugins: {
       '@typescript-eslint': tsEslint.plugin,
+      '@next/next': nextPlugin,
       react,
+      '@stylistic': stylistic,
       'simple-import-sort': simpleImportSortPlugin,
+      '@cspell': cspellPlugin,
     },
   },
   {
@@ -32,7 +37,6 @@ export default tsEslint.config(
   // extends ...
   eslint.configs.recommended,
   ...tsEslint.configs.recommended,
-  ...flatCompat.extends('plugin:@next/next/core-web-vitals'),
 
   // base config
   {
@@ -45,13 +49,30 @@ export default tsEslint.config(
       },
     },
     rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs['core-web-vitals'].rules,
+      'arrow-body-style': ['error', 'as-needed'],
       'no-empty-pattern': 'warn',
-      'simple-import-sort/exports': 'error',
-      'simple-import-sort/imports': 'error',
-      '@typescript-eslint/no-unused-vars': 'warn',
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-empty-object-type': 'off',
-      '@typescript-eslint/no-unsafe-declaration-merging': 'warn',
+      'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: "TSPropertySignature[key.name='children']",
+          message:
+            'Please use PropsWithChildren<T> instead of defining children manually',
+        },
+      ],
+      'consistent-return': 'warn',
+      'prefer-destructuring': ['error', { object: true, array: true }],
+      // next
+      '@next/next/no-sync-scripts': 'warn',
+      // react
+      'react/no-unescaped-entities': 'off',
+      'react/self-closing-comp': ['error', { component: true, html: true }],
+      'react/jsx-curly-brace-presence': [
+        'error',
+        { props: 'never', children: 'never' },
+      ],
       'react/jsx-no-target-blank': 'warn',
       'react/jsx-sort-props': [
         'error',
@@ -61,18 +82,47 @@ export default tsEslint.config(
           noSortAlphabetically: true,
         },
       ],
-      '@next/next/no-sync-scripts': 'warn',
-    },
-  },
-  {
-    files: ['**/*.js'],
-    extends: [tsEslint.configs.disableTypeChecked],
-    rules: {
-      // turn off other type-aware rules
-      '@typescript-eslint/internal/no-poorly-typed-ts-props': 'off',
+      // typescript
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unsafe-declaration-merging': 'warn',
+      '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+
+      // stylistic
+      '@stylistic/padding-line-between-statements': [
+        'error',
+        { blankLine: 'always', prev: '*', next: 'return' },
+        { blankLine: 'always', prev: 'directive', next: '*' },
+        { blankLine: 'any', prev: 'directive', next: 'directive' },
+        {
+          blankLine: 'always',
+          prev: '*',
+          next: ['enum', 'interface', 'type'],
+        },
+      ],
 
-      // turn off rules that don't apply to JS code
-      '@typescript-eslint/explicit-function-return-type': 'off',
+      // simple-import-sort
+      'simple-import-sort/exports': 'error',
+      'simple-import-sort/imports': 'error',
+      // spellchecker
+      '@cspell/spellchecker': [
+        'warn',
+        {
+          cspell: {
+            language: 'en',
+            dictionaries: [
+              'typescript',
+              'node',
+              'html',
+              'css',
+              'bash',
+              'npm',
+              'pnpm',
+            ],
+          },
+        },
+      ],
     },
   },
   eslintConfigPrettier,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idea2app/next-bootstrap-ts",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "engines": {
@@ -12,15 +12,15 @@
     "@editorjs/header": "^2.8.8",
     "@editorjs/image": "^2.10.2",
     "@editorjs/link": "^2.6.2",
-    "@editorjs/list": "^2.0.4",
+    "@editorjs/list": "^2.0.6",
     "@editorjs/paragraph": "^2.11.7",
     "@editorjs/quote": "~2.7.6",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.1.7",
-    "@sentry/nextjs": "^9.1.0",
+    "@next/mdx": "^15.2.1",
+    "@sentry/nextjs": "^9.4.0",
     "copy-webpack-plugin": "^12.0.2",
-    "core-js": "^3.40.0",
+    "core-js": "^3.41.0",
     "editorjs-html": "^4.0.5",
     "idea-react": "^2.0.0-rc.8",
     "koajax": "^3.1.1",
@@ -33,7 +33,7 @@
     "mobx-react": "^9.2.0",
     "mobx-restful": "^2.1.0",
     "mobx-restful-table": "^2.0.1",
-    "next": "^15.1.7",
+    "next": "^15.2.1",
     "next-pwa": "~5.6.0",
     "next-ssr-middleware": "^0.8.9",
     "next-with-less": "^3.0.1",
@@ -46,36 +46,37 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-mdx-frontmatter": "^5.0.0",
-    "undici": "^7.3.0",
+    "undici": "^7.4.0",
     "web-utility": "^4.4.3",
     "webpack": "^5.98.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/plugin-transform-typescript": "^7.26.8",
     "@babel/preset-react": "^7.26.3",
+    "@cspell/eslint-plugin": "^8.17.5",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.21.0",
+    "@next/eslint-plugin-next": "^15.2.1",
+    "@stylistic/eslint-plugin": "^4.2.0",
     "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
     "@types/eslint-config-prettier": "^6.11.3",
-    "@types/eslint__eslintrc": "^2.1.2",
-    "@types/lodash": "^4.17.15",
+    "@types/lodash": "^4.17.16",
     "@types/next-pwa": "^5.6.9",
     "@types/node": "^22.13.5",
     "@types/react": "^18.3.18",
     "eslint": "^9.21.0",
-    "eslint-config-next": "^15.1.7",
-    "eslint-config-prettier": "^10.0.1",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-css-order": "^2.1.2",
-    "typescript": "~5.7.3",
-    "typescript-eslint": "^8.24.1"
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.26.0"
   },
   "resolutions": {
     "next": "$next"

pages/_document.tsx

@@ -7,7 +7,7 @@ export default function Document() {
         <link rel="icon" href="/favicon.ico" />
 
         <link rel="manifest" href="/manifest.json" />
-        <script src="https://polyfill.web-cell.dev/feature/PWAManifest.js"></script>
+        <script src="https://polyfill.web-cell.dev/feature/PWAManifest.js" />
 
         <link
           rel="stylesheet"

pages/api/core.ts

@@ -20,6 +20,7 @@ export function safeAPI(handler: NextAPI): NextAPI {
         console.error(error);
 
         res.status(400);
+
         return res.send({ message: (error as Error).message });
       }
       const { message, response } = error;

pages/api/hello.ts

@@ -3,9 +3,9 @@ import type { NextApiResponse } from 'next';
 
 import { safeAPI } from './core';
 
-type Data = {
+interface Data {
   name: string;
-};
+}
 
 export default safeAPI(async (req, res: NextApiResponse<Data>) =>
   res.status(401).json({ name: 'John Doe' }),

pages/component.tsx

@@ -58,7 +58,7 @@ const ComponentPage = observer(() => {
         <h1 className="my-4 text-center">{title}</h1>
 
         <Example title="HTML Editor">
-          <HTMLEditor defaultValue="Hello, HTML!" onChange={console.log} />
+          <HTMLEditor defaultValue="Hello, HTML!" onChange={console.info} />
         </Example>
 
         <Example title="Block Editor">

pages/pagination.tsx

@@ -67,7 +67,7 @@ export default class PaginationPage extends Component {
           columns={this.columns}
           store={repositoryStore}
           translator={i18n}
-          onCheck={console.log}
+          onCheck={console.info}
         />
       </Container>
     );