ESLint's Stylistic rules seem to be overlooking TypeScript files

I've recently switched to using the new ESLint flat style with @stylistic/eslint-plugin, but I'm encountering an issue where it fails to detect TypeScript files. When I attempt to run ESLint directly against a ts file, I receive the following error:

warning  File ignored because no matching configuration was supplied

Below are the contents of my config files:

eslint.config.mjs

import stylistic from "@stylistic/eslint-plugin";

export default [
    {
        plugins : {
            "@stylistic" : stylistic,
        },
        rules : {
            "@stylistic/comma-dangle" : ["error", "always-multiline"],
            "@stylistic/eol-last" : ["error", "always"],
            "@stylistic/indent" : [
                "error",
                "tab",
                {
                    "SwitchCase" : 1,
                },
            ],
            "@stylistic/key-spacing" : ["error", { "beforeColon" : true }],
            "@stylistic/linebreak-style" : [
                "error",
                "unix",
            ],
            "@stylistic/quotes" : [
                "error",
                "double",
                {
                    "allowTemplateLiterals" : true,
                    "avoidEscape" : true,
                },
            ],
            "@stylistic/semi" : [
                "error",
                "always",
            ],
            "@stylistic/type-annotation-spacing" : [
                "error",
                {
                    "before" : true,
                },
            ],
        },
    },
];

tsconfig.json

{
    "compilerOptions": {
      "target": "es2016",                                  
      "module": "commonjs",                                
      "noEmit": true,                                      
      "esModuleInterop": true,                             
      "forceConsistentCasingInFileNames": true,            
      "strict": true,                                       
      "skipLibCheck": true                                 
    },
    "exclude": [
      "node_modules"
    ]
  }

dependencies

  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@stylistic/eslint-plugin": "^2.6.0",
    "appium": "^2.11.2",
    "eslint": "^9.8.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.5.4",
    "typescript-eslint": "^8.0.0",
    "webdriverio": "^8.39.1"
  }

Answer №1

When it comes to ESLint, the default behavior is to include files with extensions like .js, .cjs, and .mjs. But if you need ESLint to work with other file extensions such as .ts, you will have to specify them using the files option. For more information, refer to the ESLint config documentation. Below is an example of an updated configuration:

import stylistic from "@stylistic/eslint-plugin";

export default [
    {
        plugins: {
            "@stylistic" : stylistic,
        },
        files: ["**/*.ts"],
        rules: {
            // your rules
        },
    },
]

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

Switching charset/encoding on load() using jQuery

Query: How can the encoding of a text file being loaded through jQuery's load() function be adjusted? I previously had a single page, index.html, where I consolidated all my css, js, and html content. Now, I aim to separate the header section from th ...

JavaScript - Uncaught TypeError: type[totypeIndex] is not defined

After following a tutorial and successfully completing the project, I encountered a JavaScript error saying "Uncaught TypeError: totype[totypeIndex] is undefined". When I tried to log the type of totype[totypeIndex], it initially showed as String, but late ...

Using the JavaScript Reduce method to combine identical key values into an array

Hey there! Currently, I'm utilizing the reduce method to enhance the JSON structure of this specific dataset. info = [ { "0": "key1", "1": "value1" }, { "0": "key2", "1": "value2" }, { "0": "key3", "1": "value3" }, { "0": "key1", "1": "value ...

The data in the object bound to [ngmodel] does not update properly when changed within a method

Hello everyone, I am in need of some assistance with a puzzling issue. Currently, I am generating a set of inputs using JSON. When I make changes to the data in the web interface, everything works fine. The problem arises when I try to modify the value ...

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

Error: Call stack size limit reached in Template Literal Type

I encountered an error that says: ERROR in RangeError: Maximum call stack size exceeded at getResolvedBaseConstraint (/project/node_modules/typescript/lib/typescript.js:53262:43) at getBaseConstraintOfType (/project/node_modules/typescript/lib/type ...

What is preventing me from specifying a specific position in my multi-dimensional array?

My goal is to create a 3D version of an L-System, but I'm having trouble declaring elements in my multidimensional array. Even when I try to assign values to specific positions, the elements don't seem to update properly. For instance, if I write ...

The function createTheme_default is not defined in box.js for Material UI

I am facing an issue with using the text field from Material UI along with the Box element. I received an error message pointing to box.js, which is a built-in file from Material UI and cannot be modified. Below are my component codes. I'm puzzled as ...

eliminate item from list upon user clicking the button

Does anyone have any tips on how to effectively store and remove user-selected items from an object in JavaScript? I'm encountering an issue where only the first object in the array is being removed, and not the others. Any help would be appreciated! ...

Utilizing AngularJs and Materialize.css to create numerous dropdown menus

I am encountering a troublesome issue that I just can't seem to resolve. My current setup involves using AngularJs to showcase a set of cards, each equipped with its own dropdown menu. Here's the snippet of code in question: <div ng-repeat=&q ...

Sluggishness in updating properties in a child component using React

Within my main component, I have a button that captures the details of the chosen item and displays them in input fields within a subordinate component. The primary component showcases, <h4 className="table-title">Status</h4> <div classNam ...

How to transfer a parameter to a JavaScript function within an Ajax success callback?

While attempting to call the UpdateItem function using AJAX with an anchor tag, I encountered a console error. Error : req is undefined function updateItem(id, desc, vehicleno){ alert("i am here"); $('#ProcessModal').modal(&a ...

Ways to show an input box even when there are no results found

I currently have a database with 5 books, but only 3 of them have prices listed. How can I modify my code to display an input box for all books, regardless of whether they have a price in the database? I am new to coding, so I would appreciate it if you co ...

Unlock the Power of Angular with Custom Decorators: Accessing ElementRef Made Easy

I am currently working on implementing a decorator for Host CSS Variable Binding in Angular5. However, I am facing difficulties in properly implementing it with the given code. Is there a way to define ElementRef from within the decorator itself? export f ...

How to Use JQuery to Display Elements with a Vague Name?

Several PHP-generated divs are structured as follows: <div style="width:215px;height:305px;background-color: rgba(255, 255, 255, 0.5);background-position: 0px 0px;background-repeat: no-repeat;background-size: 215px 305px;display:none;position:fixed;top ...

Tips for preserving the URL of a 404 page in AngularJS

We are currently developing an angularjs application where users can publish their profiles as resumes. For example, a valid URL for a published profile would be: www.page.com/public/johnsmith However, if the URL is something like: www.page.com/public/ ...

"Is there a way to assign a default value to a select element while also using ng-model and ng-change in AngularJS

My reason for this question is that I have encountered a situation where ng-model is overriding the default value in the select tag. Therefore, I am looking to establish <option value="-translation.published_at" selected>{{ 'Newest first' | ...

Issue with AJAX communication with C# backend

Currently, I am facing an issue where I am unable to pass information back to the backend code, specifically a user-selected name from a list. I attempted to set the data VN to an object and pass that, but it resulted in errors. It seems that the informati ...

Transferring an Array from PHP to Javascript

I'm attempting to pass a PHP array so that I can use it in JavaScript. The PHP code I have written is shown below: <?php $link = mysqli_connect("localhost", "root", "password", "database"); /* check connection */ if (mysqli_connect_errn ...

Failed to retrieve information using a custom header in the HTTP request

My AngularJS code works well without the header option. $http.get(env.apiURL()+'/banks', { headers: { 'Authorization': 'Bearer '+localStorageService.get('access_token') } }) Here is the request: OP ...