eslint-config-empty v0.1.1

eslint-config-common

@tuia/eslint-config-common 是推啊前端团队为统一代码风格与编码规范，提炼出的 ESLint9 推荐配置。

快速上手

请根据你的项目选用的技术栈选择以下配置：

• eslint-config-common
  • 快速上手
  • 接入指南
    • 前置工作
    • 注意事项
    • 安装
    • 基础规则
    • React
    • Vue
    • Vue3
    • TypeScript
    • TypeScript React

接入指南

前置工作

ESLint 与 ESLint 配置相关内容统一交由 @tuia/eslint-config-common 管理，项目中无需单独安装配置。

在安装前请将 eslint、ESLint 解析器（babel-eslint / @babel/eslint-parser 等）、插件（eslint-plugin-*）、ESLint 配置（eslint-config-*）等 ESLint 相关依赖移除，避免版本冲突。

注意事项

• 项目中的 bable 版本<7的场景下：
  • 将babel相关的包升级至版本 7 以上-@babel/xxx 原因：babel-eslint已经废弃，我们使用@babel/eslint-parser解析器来解析成 AST，而@babel/eslint-parser又依赖于@babel/core
  • 修改babel配置
    • @babel/env 替换 babel's Stage presets
    • 对应babel插件的引入方式更新，babel-xx => @babel/xx
• 如果项目使用tuia-milky构建，则需要升级版本至1.1.0,并升级 loader

  yarn add tuia-milky@1.1.0 eslint-webpack-plugin

    /* ... */
+   const ESLintPlugin = require('eslint-webpack-plugin')
    const config = {
      port: 3000,
      theme: {
        /* tuia-milky内用到的eslint-loader与ESLint公共配置中的ESLit版本冲突，因此需要theme={disableEslint: true,...} */
+       disableEslint: true,
        /* ... */
        }
      },
      /* ... */
      if (isDev) {
        config.webpackConfig.plugins = [
          new StyleLintPlugin({
            context: 'client',
            configFile: path.resolve(__dirname, './.stylelintrc.js'), 
            files: '**/*.less',
            failOnError: false,
            quiet: true,
            syntax: 'less'
          }),
          /* 如果需要在打包过程中执行ESLint校验，则添加如下插件，否则不需要添加 */
+        new ESLintPlugin({
+          context: '.eslintrc.js',
+          extensions: ['js', 'ts', 'jsx', 'tsx'],
+          formatter: require('eslint-friendly-formatter'),
+          lintDirtyModulesOnly: true,
+        })
      ]
    }

安装

npm i -D @tuia/eslint-config-common

基础规则

在项目中的 ESLint 配置文件（.eslintrc.js），添加以下内容：

module.exports = {
  extends: ['@tuia/eslint-config-common'],
  rules: {
    // 自定义你的规则
  },
}

React

在项目中的 ESLint 配置文件（.eslintrc.js），添加以下内容：

module.exports = {
  extends: ['@tuia/eslint-config-common', '@tuia/eslint-config-common/react'],
  rules: {
    // 自定义你的规则
  },
}

Vue

在项目中的 ESLint 配置文件（.eslintrc.js），添加以下内容：

module.exports = {
  extends: ['@tuia/eslint-config-common', '@tuia/eslint-config-common/vue'],
  rules: {
    // 自定义你的规则
  },
}

Vue3

在项目中的 ESLint 配置文件（.eslintrc.js），添加以下内容：

module.exports = {
  extends: ['@tuia/eslint-config-common', '@tuia/eslint-config-common/vue3'],
  rules: {
    // 自定义你的规则
  },
}

TypeScript

在项目中的 ESLint 配置文件（.eslintrc.js），添加以下内容：

module.exports = {
  extends: [
    '@tuia/eslint-config-common',
    '@tuia/eslint-config-common/typescript',
  ],
  rules: {
    // 自定义你的规则
  },
}

TypeScript React

在项目中的 ESLint 配置文件（.eslintrc.js），添加以下内容：

module.exports = {
  extends: [
    '@tuia/eslint-config-common',
    '@tuia/eslint-config-common/react',
    '@tuia/eslint-config-common/typescript',
  ],
  rules: {
    // 自定义你的规则
  },
}