将Gulp任务从gulp-tslint迁移至gulp-eslint求助

修改后的完整代码 #

const { src } = require('gulp');
const config = require('./config');

const plugins = require('gulp-load-plugins')();
const plumber = require('./plumber-wrapper');
const mergeStream = require('merge-stream');
const gulpEslint = require('gulp-eslint');
const { ESLint } = require('eslint');

function lintTask () {
    const { srcDir, jsDir, sassFiles } = config;
    
    // 初始化ESLint实例，支持TypeScript类型检查
    const eslint = new ESLint({
        overrideConfig: {
            parser: '@typescript-eslint/parser',
            plugins: ['@typescript-eslint'],
            parserOptions: {
                project: './tsconfig.json',
                tsconfigRootDir: __dirname
            }
        },
        useEslintrc: true, // 读取项目根目录的.eslintrc配置
        fix: false // 根据需求设置是否自动修复
    });

    const typeScript = src(`${srcDir}${jsDir}**/*.ts`)
        .pipe(plumber())
        // 使用gulp-eslint执行检查
        .pipe(gulpEslint(eslint))
        // 输出详细检查报告
        .pipe(gulpEslint.format('verbose'))
        // 检查出错误则终止任务（可选，按需调整）
        .pipe(gulpEslint.failAfterError());

    const sass = src(`${srcDir}${sassFiles().all}`)
        .pipe(plumber())
        // Sass检查部分保持原有逻辑不变
        .pipe(
            plugins.stylelint({
                failAfterError: true,
                reporters: [
                    {
                        formatter: 'string',
                        console: true
                    }
                ],
                debug: true
            })
        );

    return mergeStream([typeScript, sass]);
};

module.exports = lintTask;

关键迁移步骤说明 #

1. 依赖更新

   • 卸载旧的TSLint相关依赖：

     npm uninstall tslint gulp-tslint
     

   • 安装ESLint处理TypeScript必需的包：

     npm install --save-dev gulp-eslint eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
     

2. 导入替换

   • 移除原有的gulpTsLint和tslint导入，替换为gulp-eslint和ESLint核心类。

3. TypeScript检查逻辑调整

   • 通过ESLint类初始化实例，配置@typescript-eslint/parser作为解析器、启用@typescript-eslint插件，这是ESLint支持TypeScript的核心配置。
   • parserOptions.project指定tsconfig路径，对应原TSLint中program的作用，用于支持需要类型信息的规则（比如带类型检查的@typescript-eslint/no-unused-vars）。
   • useEslintrc: true表示会读取项目根目录的.eslintrc配置文件，你需要把原TSLint的规则迁移到这个文件中。

4. 检查流程调整

   • 用gulpEslint(eslint)替换原gulpTsLint的调用，传入初始化好的ESLint实例。
   • gulpEslint.format('verbose')输出详细报告，对应原TSLint的verbose格式化器。
   • gulpEslint.failAfterError()会在检查出错误时终止任务，和原TSLint报告的行为一致，可根据需求关闭。

5. Sass检查部分

   • 这部分无需改动，原有的stylelint配置和逻辑可以继续使用。

内容的提问来源于stack exchange，提问作者Takuhii