@tuia/eslint-config-common

eslint-config-common

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

快速上手

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

• 基础规则
• React
• Vue
• Typescript
• Typescript React

接入指南

前置工作

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

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

注意事项

• 项目中的 bable 版本<7 1、将babel相关的包升级至版本 7 以上-@babel/xxx 原因：babel-eslint已经废弃，我们使用@babel/eslint-parser解析器来解析成 AST，而@babel/eslint-parser又依赖于@babel/core 2、修改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: {
    // 自定义你的规则
  },
}

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: {
    // 自定义你的规则
  },
}