ESLint, Stylelint 設定

這邊紀錄更新至 eslint v9 的設定, 下面的流程一樣的就省略, 參考前一篇 ESLint + Stylelint

---

當前版本

Version
Node	v20+
Pnpm	v9+
Eslint	v9+
Stylelint	16+

---

建立 Eslint + Stylelint 設定

在 root, config-eslint 及 config-stylelint 安裝 eslint 相關套件

pnpm add -D eslint stylelint
pnpm add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-simple-import-sort typescript-eslint @eslint/js --filter @repo/eslint-config
pnpm add -D postcss-styled-syntax stylelint-config-prettier-scss stylelint-config-standard stylelint-config-standard-scss --filter @repo/stylelint-config

在 config-eslint/ 新增對應的設定檔 vite.eslint.config.js:

vite.eslint.config.js

const importPlugin = require('eslint-plugin-import');
const jsxA11yPlugin = require('eslint-plugin-jsx-a11y');
const pluginJs = require('@eslint/js');
const prettierPlugin = require('eslint-plugin-prettier');
const reactHooksPlugin = require('eslint-plugin-react-hooks');
const reactRefreshPlugin = require('eslint-plugin-react-refresh');
const { resolve } = require('node:path');
const simpleImportSort = require('eslint-plugin-simple-import-sort');
const tsParser = require('@typescript-eslint/parser');
const tsPlugin = require('@typescript-eslint/eslint-plugin');

const projects = ['apps/vite-demo'].map(dir => resolve(process.cwd(), dir, 'tsconfig.json'));

module.exports = [
  pluginJs.configs.recommended,
  {
    plugins: {
      '@typescript-eslint': tsPlugin,
      prettier: prettierPlugin,
      import: importPlugin,
      'simple-import-sort': simpleImportSort,
      'jsx-a11y': jsxA11yPlugin,
      'react-hooks': reactHooksPlugin,
      'react-refresh': reactRefreshPlugin
    },
    files: ['**/*.{js,ts,jsx,tsx}'],
    languageOptions: {
      globals: {
        ...globals.node,
        ...globals.jest
      },
      parser: tsParser,
      parserOptions: {
        project: projects
      }
    },
    settings: {
      'import/resolver': {
        typescript: {
          project: projects
        },
        node: {
          extensions: ['.js', '.jsx', '.ts', '.tsx']
        }
      },
      'import/parsers': {
        '@typescript-eslint/parser': ['.ts', '.tsx']
      }
    },
    rules: {
      // TypeScript rules
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/interface-name-prefix': 'off',
      '@typescript-eslint/explicit-function-return-type': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',

      // React-specific rules
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',

      // Accessibility rules
      'jsx-a11y/accessible-emoji': 'warn',
      'jsx-a11y/alt-text': 'warn',

      // simple-import-sort rules
      'simple-import-sort/imports': 'error',
      'simple-import-sort/exports': 'error',

      // import plugin rules
      'import/first': 'error',
      'import/named': 'off',
      'import/no-duplicates': 'error',
      'import/no-named-as-default': 'off',
      'import/no-default-export': 'off',

      // prettier plugin rules
      'prettier/prettier': 'error',

      // Other rules
      'no-unused-vars': 'warn',
      'no-undef': 'warn'
    }
  },
  // ignore specific directories and files
  {
    ignores: ['node_modules/', 'dist/', '.eslintrc.cjs', '.eslintrc.js']
  }
];

note

除了 ECMAScript 標準內建全域變數, ESLint 不提供預先定義的全域變數集, 像是會遇到類似如下的 warning

所以需要額外設定

refs: Predefined global variables

建立 vite + react

更改原本的 .eslintrc.cjs 為 eslint.config.js, 去接上 repo 的設定

eslint.config.js

const tsParser = require('@typescript-eslint/parser');

const config = require('@repo/eslint-config/vite.eslint.config');

module.exports = [
  ...config,
  {
    languageOptions: {
      parserOptions: {
        parser: tsParser,
        sourceType: 'module',
        ecmaVersion: 'latest',
        project: 'tsconfig.json'
      }
    }
  }
];

其他的設定皆與前一篇相同, 這邊就不再贅述