@mx-design/config-eslint9/esm/src/template/eslint.mjs

update eslint 9.x configuration

const eslintTemplate = `import globals from 'globals';
import eslintPluginImportX from 'eslint-plugin-import-x';
import jsLint from '@eslint/js';
<%_ if (prettier) { _%>
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
<%_ } _%>
<%_ if (react) { _%>
import reactPlugin from 'eslint-plugin-react';
import reactPluginHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
<%_ } _%>
<%_ if (vue) { _%>
import vuePlugin from 'eslint-plugin-vue';
<%_ } _%>
<%_ if (typescript) { _%>
import tsLint from 'typescript-eslint';
<%_ } _%>
<%_ if (tailwind) { _%>
import tailwind from 'eslint-plugin-tailwindcss';
<%_ } _%>
<%_ if (nextjs) { _%>
import nextPlugin from '@next/eslint-plugin-next';
<%_ } _%>

/**
 * js lint
 * @zh \u5982\u679C\u4F60\u4F7F\u7528 typescript, \u4F60\u4E5F\u4F1A\u6709 js/mjs \u6587\u4EF6\u5728\u4F60\u7684\u9879\u76EE\u91CC\uFF0C\u4F8B\u5982 eslint \u914D\u7F6E\uFF0C\u6240\u4EE5 js \u6587\u4EF6\u7684\u6821\u9A8C\u4F1A\u914D\u7F6E\u5728\u5176\u4E2D
 * @en if you use typescript, but you also have js/mjs file in your configuration file, such as eslint config.
 */
const jsLintConfig = {
  files: ['**/*.{js,mjs,cjs}'],
  rules: {
    ...jsLint.configs.recommended.rules,
  },
};

/**
 * ignore
 */
const ignoresConfig = {
  name: 'ignores',
  ignores: ['**/node_modules/', '**/.vscode/', '**/.husky/'],
};
<%_ if (typescript) { _%>
/**
 * ts lint
 */
const tsLintConfig = [...tsLint.configs.recommended].map((conf) => ({
  ...conf,
  files: ['**/*.{ts,tsx}'],
}));

const tsLintCustomConfig = {
  files: ['**/*.{ts,tsx}'],
  // overwrite typescript rules
  rules: {},
};
<%_ } _%>
<%_ if (react) { _%>
/**
 * react lint
 */
const reactConfig = [
  reactPlugin.configs.flat.recommended,
  {
    files: ['**/*.{jsx,tsx}'],
    /**
     * @zh \u63D2\u4EF6\u662F\u4E00\u4E2A npm \u5305\uFF0C\u901A\u5E38\u8F93\u51FA\u89C4\u5219\u3002\u8981\u786E\u4FDD\u8FD9\u4E2A\u5305\u5B89\u88C5\u5728 ESLint \u80FD\u8BF7\u6C42\u5230\u7684\u76EE\u5F55\u4E0B\u3002plugins\u5C5E\u6027\u503C\u53EF\u4EE5\u7701\u7565\u5305\u540D\u7684\u524D\u7F00 eslint-plugin-\u3002
     * \u63D2\u4EF6\u4E00\u4E2A\u4E3B\u8981\u7684\u4F5C\u7528\u5C31\u662F\u8865\u5145\u89C4\u5219\uFF0C\u7F3A\u5C11 react-hooks \u7684\u89C4\u5219\uFF0C\u5219\u9700\u8981\u5BFC\u5165\u76F8\u5173\u89C4\u5219\u63D2\u4EF6 eslint-plugin-react-hooks
     * @en A plugin is an npm package that typically exports rules. Make sure this package is installed
     * in a location ESLint can request. The value of the plugins property can omit the eslint-plugin- prefix.
     */
    plugins: {
      'react-hooks': reactPluginHooks,
      'react-refresh': reactRefresh<% if (nextjs) { %>,<% } %>
      <%_ if (nextjs) { _%>
     '@next/next': nextPlugin
      <%_ } _%>
    },
    rules: {
      ...reactPluginHooks.configs.recommended.rules<% if (nextjs) { %>,<% } %>
      <%_ if (nextjs) { _%>
      ...nextPlugin.configs.recommended.rules,
      <%_ } _%>
      <%_ if (nextjs) { _%>
      ...nextPlugin.configs['core-web-vitals'].rules
      <%_ } _%>
    },
  },
  {
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
];
<%_ } _%>
<%_ if (vue) { _%>
/**
 * vue lint
 */
const vueConfig = [
  ...vuePlugin.configs['flat/recommended'],
  // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.
  {
    // custom vue rule
    rules: {},
  },
];
<%_ } _%>

<%_ if (prettier) { _%>
/**
 * prettier lint
 */
const prettierConfig = eslintPluginPrettierRecommended;
 <%_ } _%>
/**
 * import lint
 */
const importJSConfig = eslintPluginImportX.flatConfigs.recommended;
const importTSConfig = eslintPluginImportX.flatConfigs.typescript;

const importCommonConfig = {
  files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
  rules: {
    'import-x/no-dynamic-require': 'warn',
    'import-x/no-nodejs-modules': 'warn',
  },
};

/**
 * global
 */
const globalsConfig = {
  languageOptions: {
    /**
     * @zh \u6307\u5B9A\u8981\u4F7F\u7528\u7684ECMAScript\u7248\u672C
     * @en Indicates the ECMAScript version of the code being linted.
     */
    ecmaVersion: 2022,
    /**
     * @zh \u4EE3\u7801\u7C7B\u578B\uFF0C\u6709\u4E09\u79CD\u9009\u62E9\uFF1Ascript\u3001module\u548Ccommonjs\uFF0Cscript\u662F\u6307\u666E\u901A\u7684js\u6587\u4EF6\uFF0Cmodule\u662F\u6307es6\u7684\u6A21\u5757\u5316\u6587\u4EF6\uFF0Ccommonjs\u662F\u6307nodejs\u7684\u6A21\u5757\u5316\u6587\u4EF6
     * @en There are three types of code: script, module, and commonjs. script refers to ordinary js files, module refers to es6 modular files, and commonjs refers to nodejs modular files
     */
    sourceType: 'module',
    /**
     * @zh node \u6216\u8005\u6D4F\u89C8\u5668\u4E2D\u7684\u5168\u5C40\u53D8\u91CF\u5F88\u591A\uFF0C\u5982\u679C\u6211\u4EEC\u4E00\u4E2A\u4E2A\u8FDB\u884C\u58F0\u660E\u663E\u5F97\u7E41\u7410,\u56E0\u6B64\u5C31\u9700\u8981\u7528\u5230env\uFF0C\u8FD9\u662F\u5BF9\u73AF\u5883\u5B9A\u4E49\u7684\u4E00\u7EC4\u5168\u5C40\u53D8\u91CF\u7684\u9884\u8BBE
     * @en There are many global variables in node or browser, it would be cumbersome if we declare them one by one, So we need to a preset for a set of global variables defined
     */
    globals: {
      ...globals.browser,
      ...globals.es2021,
      ...globals.node,
    },
  },
};

export default [
  ignoresConfig,
  <%_ if (typescript) { _%>
  ...tsLintConfig,
  tsLintCustomConfig,
  <%_ } _%>
  jsLintConfig,
  <%_ if (tailwind) { _%>
  ...tailwind.configs['flat/recommended'],
  <%_ } _%>
  <%_ if (react) { _%>
  ...reactConfig,
  <%_ } _%>
  <%_ if (vue) { _%>
  ...vueConfig,
  <%_ } _%>
  <%_ if (prettier) { _%>
  prettierConfig,
  <%_ } _%>
  importJSConfig,
  importTSConfig,
  importCommonConfig,
  globalsConfig,
];`;

export { eslintTemplate };