Switch from Gulp-TSLint to Gulp-ESLint for enhanced code analysis!

I am currently in the process of updating a Gulp task that uses gulp-tslint to now use gulp-eslint. The code snippet below outlines the changes I need to make:

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 gulpTsLint = require('gulp-tslint');
const tslint = require('tslint');

function lintTask () {

    const { srcDir, jsDir, sassFiles } = config
    const tsLintProgram = tslint.Linter.createProgram('./tsconfig.json')
    const typeScript = src(`${srcDir}${jsDir}**/*.ts`)

        .pipe(plumber())
        // lint according to rules defined in `tslint.json`
        .pipe(
            gulpTsLint({
                formatter: 'verbose',
                /**
                 * type-checked rules require a TypeScript `program` object.
                 * ensure 'Linter.createProgram' is called inside the gulp task else the
                 * contents of the files will be cached if this tasks is called again,
                 * e.g. as part of a `watch` task
                 */
                program: tsLintProgram
            })
        )
        .pipe(gulpTsLint.report());

    const sass = src(`${srcDir}${sassFiles().all}`)
        .pipe(plumber())
        // lint according to rules defined in `.stylelintrc`
        .pipe(
            plugins.stylelint({
                failAfterError: true,
                reporters: [
                    {
                        formatter: 'string',
                        console: true
                    }
                ],
                debug: true
            })
        );

    return mergeStream([typeScript, sass]);

};

module.exports = lintTask;

All my NPM Tasks have been successfully migrated from TSLint to ESLint except for this one. I'm struggling to find a straightforward solution and would greatly appreciate assistance with converting it to ESLint while keeping it exported as lintTask at the end.

I've done some research on Google but most tutorials are focused on JavaScript rather than TypeScript. Can anyone provide guidance?

Your help would be much appreciated!

Answer №1

After some experimentation, I believe I have found a solution for GULP beginners. By following these steps, my TS files are now linted properly once again...


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 eslint = require('gulp-eslint');

function lintTask () {

    const { srcDir, jsDir, sassFiles } = config
    const typeScript = src(`${srcDir}${jsDir}**/*.ts`)
        .pipe(eslint())
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());

    const sass = src(`${srcDir}${sassFiles().all}`)
        .pipe(plumber())
        // adhere to rules in `.stylelintrc`
        .pipe(
            plugins.stylelint({
                failAfterError: true,
                reporters: [
                    {
                        formatter: 'string',
                        console: true
                    }
                ],
                debug: true
            })
        );
    return mergeStream([typeScript, sass]);
};

module.exports = lintTask;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with errors in Next.js 13 with middleware: a comprehensive guide

My attempt to manage exceptions in Next.js 13 using middleware is not producing the desired results. Below is my current code: import { NextRequest, NextFetchEvent, NextResponse } from "next/server" export function middleware(req: NextRequest, e ...

Utilizing Arrays in Typescript within the Angular Framework

I have developed a Rest API that provides data to populate two drop-down lists in a form. The information retrieved from the API is grabbed by the Angular backend and assigned to the respective drop-downs. Rather than making separate Get requests for each ...

Even with the use of setTimeout, Angular 5 fails to recognize changes during a lengthy operation

Currently, I am facing an issue with displaying a ngx-bootstrap progress bar while my application is loading data from a csv file. The Challenge: The user interface becomes unresponsive until the entire operation is completed To address this problem, I a ...

At line 19, character 259, a mistake was found: the symbol `'` should be escaped using `'`, `‘`, `'`, or `’`. This issue violates the rule react/no-unescaped-entities

During my attempt to deploy my project to the cloud using Vercel, I encountered an error message halfway through: 19:259 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities. Snippet from About.jsx ...

"Prevent further button clicks by disabling it after the initial click with ActionRowBuilder in Discord.Js

Encountering a puzzling issue where I am unable to disable a button after it has been clicked. The option to disable the button does not seem to appear. When attempting to deactivate the button, I utilize the following function: const row = new ActionRowBu ...

Is there a method for verifying the application signature in Ionic?

For the past 2 days, I've been on a quest to find information about app certificate validation libraries/functions in Ionic. After discovering SignatureCheck.java for Android (link: enter link description here), I wonder if there is a similar solution ...

What is the best way to save code snippets in Strapi for easy integration with SSG NextJS?

While I realize this may not be the typical scenario, please listen to my situation: I am using Strapi and creating components and collections. One of these collections needs to include code snippets (specifically typescript) that I have stored in a GitH ...

Guide to transforming a TaskOption into a TaskEither with fp-ts

I have a method that can locate an item in the database and retrieve a TaskOption: find: (key: SchemaInfo) => TO.TaskOption<Schema> and another method to store it: register: (schema: Schema) => TE.TaskEither<Error, void> Within my regis ...

PhantomJS version 2.1.1 encountered an error on a Windows 7 system, displaying "ReferenceError: Map variable not found."

I've been utilizing the "MVC ASP.NET Core with Angular" template. I'm attempting to incorporate phantomJS and execute the tests, but encountering the following errors: ERROR in [at-loader] ..\\node_modules\zone.js\dist&bs ...

Tips for creating a universal function for two interlinked types

My goal is to establish an abstract relationship between different sub-types of Message and Response, allowing for a generic function that takes a Message as input and returns a corresponding Response. Specifically, when the function is called with type Me ...

Elevate the scope analysis for a function within the Jasmine framework

I have written a few functions within the app component. I am experiencing an issue with increasing coverage in the summary for these component methods. The test cases are functioning correctly, but some lines are not being accounted for in the coverage s ...

Does anyone have experience using the useRef hook in React?

Can someone help me with this recurring issue: "Property 'value' does not exist on type 'never'" interface InputProps { name: string; icon?: ReactElement; placeholder?: string; } const Input = ({ name, icon: Icon, ...rest }: Inpu ...

Steps to easily set up a date-range-filter in Angular 6!

I have put together a small StackBlitz project to showcase my current situation. My aim is to log all objects that fall within a specified date range. However, when I attempt to filter my objects, I am faced with an empty array as the result. I would like ...

Develop an rxjs pipeline that merges values according to their type prior to executing them in an async manner using concatMap

In my code, there's an eventStream that deals with different types of events and sends them to the server via HTTP. import { from, Observable } from 'rxjs'; import { concatMap } from 'rxjs/operators'; type Update = number[]; inte ...

The TypeScript compiler is unable to locate the module react-scripts within the lerna webpack configuration

Recently, I've been working on setting up a new project using lerna, react-scripts, webpack, and sass. Here is my current directory structure: myApp /packages /myReactApp -> a react create app application /tsconfig.json /package ...

When using a Redux action type with an optional payload property, TypeScript may raise complaints within the reducer

In my react-ts project, I define the following redux action type: type DataItem = { id: string country: string population: number } type DataAction = { type: string, payload?: DataItem } I included an optional payload property because there are tim ...

Issue with dispatching actions in React using TypeScript and hooks

Can you please point out what I'm doing wrong here: I am encountering the following error Type '{ wishList: any; addBookToWishList: (book: any) => void; }' is not assignable to type '{ wishList: never[]; }'. Object literal may ...

Utilizing Angular's Dependency Injection to Provide Services to External Libraries

I'm currently developing an NPM package that enhances the functionalities of Material Datatable. One standout feature is the ability to specify a method that will be triggered when a user clicks on a specific cell. Here is how the property is defined ...

Angular service is able to return an Observable after using the .then method

I am currently facing an issue with retrieving the authentication status in a service method. Everything seems to be working fine except for the return statement. I am struggling with the usage of .then inside .map and I am unable to figure out how to retu ...

When passing an object to a function inside a promise.then, Typescript may generate an error indicating that the object could

Snippet of code below is extracted from a request controller function. Goal The aim was to generate various notifications based on the paths that are modified. let farmerToUpdate = await FarmerModel.findById(farmerId) if (!farmerToUpdate) throw new cont ...