Utilizing JSDoc annotations for type safety in VSCode with ESLint configuration for TypeScript declarations import

Is there a way to configure VSCode to perform syntax checking on .eslintrc.js and provide autocomplete functionality? I have managed to set up a structure for a JavaScript configuration file with a custom syntax for my application, but the same approach does not seem to work for Linter.BaseConfig imported from 'eslint'.

/** @typedef {import("eslint").Linter.BaseConfig} BaseConfig */
/** @param {BaseConfig} c */ // does not work
function castBaseConfig(c) {return c}
module.exports = castBaseConfig({
  env: {browser: false, es2019: true, node: true},
  ignorePatterns: ["dist", "jsdoc", "out", "out2", "public"],
  extends: "eslint:recommended",
  parserOptions: {ecmaVersion: "latest"},
  // etc
})

It is worth noting that 

node_modules/@types/eslint/index.d.ts
contains 
export namespace Linter {interface BaseConfig {...}}
providing field definitions for env, parserOptions, plugins, rules (via HasRules), and more, suggesting that it should work. However, no type-checking seems to be performed, and specific completions based on types do not work.

In contrast, in another file where I apply a similar technique, the type definition imported with 

/** @typedef {import("../lib/config").MultiConfig} MultiConfig */
is correctly enforced. For example, it detects if port is the wrong type, if a required property is missing, or if an unknown property is present, and it provides appropriate context-based suggestions.

Could the issue be related to discrepancies in the definitions, such as interface versus type?

javascripttypescriptvisual-studio-codeeslintjsdoc

Answer №1

One key distinction between the file named .eslintrc.js and another javascript file that has already undergone checking is that the latter was referenced in the tsconfig.json. Including .eslintrc.js in the tsconfig.json triggers the checking process.

However, it was discovered that utilizing BaseConfig as the type was not suitable, as it did not include ignorePatterns ("Object literal may only specify known properties"). Initially, extending BaseConfig in this manner was attempted: 

/** @param {BaseConfig & {ignorePatterns:string[]}} c */
. Subsequently, it was determined that /** @param {Config} */ was sufficient. It was also realized that the @typedef could be incorporated into the @param in a unified manner. Ultimately, it was revealed that there exists another version of these declarations within the npm package @typescript-eslint/utils (previously 
@typescript-eslint/experimental-utils
), which are deemed to be more accurate and better maintained. Hence, the final outcome is as follows:

/** @param {import("@typescript-eslint/utils/dist/ts-eslint/Linter").Linter.Config} c */
function castConfig(c) {return c}
module.exports = castConfig({
  // your conf goes here
})

Alternatively, if the dummy function is omitted, then the export must be split, because @type is disregarded on module.exports =, resulting in a somewhat similar length:

/** @type {import("@typescript-eslint/utils/dist/ts-eslint/Linter").Linter.Config} c */
var c = castConfig({
  // your conf goes here
})
module.exports = c

Related Links:

TODO: additionally typecheck specific rulesets. For example, utilize @typedef to load type definitions from eslint-plugin-something and provide them as a parameter in the Config<> type.

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

I'm having trouble applying CSS stylings to my components in my React project. What could be the issue causing this?

As a React beginner, I am facing issues with getting my CSS to work properly in my project. I know that CSS is not used directly in React, but rather interpreted as JavaScript using webpack and babel. What have I tried? I attempted to make changes to my w ...

javascriptcssreactjswebpackcss-modules

Storing the Token from the AJAX Login API Call in JavaScript: Best Practices for Keeping Credentials Secure

After sending my credentials to a login API, I received a successful response containing user data and a token. I would like to know how I can store this information so that the user doesn't have to log in every time. Is it possible for me to save the ...

javascriptajax

Tips for adding a CSS class to an HTML element on-the-fly

As a newcomer to JavaScript and AngularJS, my question may be considered naive by some. I am currently working on a tutorial project involving AngularJS. Here is the HTML code snippet I am dealing with: <link href="http://netdna.bootstrapcdn.com/boo ...

javascripthtmlcssangularjs

The connection to MongoDB is failing due to an incorrect URI

I tried setting up mongoDB on my node server and referred to the official MongoDB documentation. Here are the details of my setup: MongoDB version: 4.4.3 Node.js version: v15.7.0 I copied the starter code from MongoDB and here is what I used: const { Mon ...

javascriptnode.jsmongodbcircular-dependency

Is it possible to asynchronously retrieve the information from the HTTP request body in a Node.js environment?

I am trying to send an HTTP POST request to a node.js HTTP server that is running locally. My goal is to extract the JSON object from the HTTP body and utilize the data it contains for server-side operations. Below is the client application responsible fo ...

javascriptnode.jshttppost

Utilize Jquery to easily interact with RadComboBoxes

Is there a way to capture all RadComboBoxes change events in JQUERY for ASP.NET? $("input[type='text']").Change(function() { alert('changed'); }); In this example, I am specifying the input type as "text" because RadComboBoxes hav ...

javascriptjqueryasp.net

When attempting to import a component from react-bootstrap, an error is thrown

Every time I try to use a component from 'react-bootstrap', I encounter a strange error. Here is a small example where I am importing the "HelpBlock" component. import PropTypes from 'prop-types'; import React from 'react'; i ...

javascriptreactjsreact-nativereact-bootstrap

Create efficient images using Node.js and express using sharp or canvas

Struggling with optimizing image rendering using node, express, and sharp. Successfully implemented an upload method with Jimp for images over 2000px wide and larger than 2mb in file size. While many libraries can achieve this, Jimp was more memory-effici ...

javascriptnode.jsexpresscanvassharp

Convert JavaScript code to Google Appscript

Looking for guidance on incorporating Javascript code into my Google Appscript. Here is the code snippet: I have a separate Stylesheet.html file saved. Can someone advise me on how to invoke the functions within the html file? <script> //google. ...

javascripthtmljquerycssgoogle-apps-script

Is there an issue with my JavaScript append method?

Within the following method, an object named o gets appended to a list of objects called qs. The section that is commented out seems to be causing issues, while the uncommented section is functional. What could possibly be wrong with the commented part? on ...

javascriptreactjslodash

Interpreting an undefined HTTP GET request within a Node.js server

I am encountering an issue within my Node.js application. When I send an http get request through an ajax call on the client-side, the server-side does not recognize the request data and returns an "undefined" error message. This problem is puzzling to me ...

javascriptjqueryajaxnode.jsget-request

What is the best way to transfer a list from aspx to javascript?

When populating a table by looping through a list, I aim to pass a row of data to my JavaScript code. If that's not an option, I'd like to pass the list and the ID number for the specific row. How can I achieve this? <%foreach(var item in Mod ...

c#.netjavascriptasp.net-mvc

What is the best way to structure this React state container for modularity?

At my workplace, we have developed a state container hook for our React application and related packages. Before discussing what I'd like to achieve with this hook, let me provide some background information. Here is the functional code that's co ...

javascriptreactjstypescriptreact-hooks

What is the best approach for declaring helper functions and constants within nest.js?

Currently, I am delving into the world of nest.js and building an API using it. However, I have hit a roadblock when it comes to defining constants and helper functions. Like many APIs, some of my endpoints require pagination, and I want to set a default ...

node.jstypescriptdependency-injectionnestjshelper

Offering a limited selection of generic type options in TypeScript

Is there a shorthand in TypeScript for specifying only some optional types for generic types? For example, let's say I have a class with optional types: class GenericClass<A extends Type1 = Type1, B extends Type2 = Type2, C extends Type3 = Type3> ...

typescripttypescript-generics

I am eager to perform DOM manipulation similar to jQuery but within the context of Angular 6

Is there a way to modify the background color of the main div when a button is clicked? <div> <p>I'd like to be able to change the background color of the parent div by clicking a certain button. </p> <button (click)=" ...

angulartypescriptangular6dom-manipulation

How to Ensure an Element Appears Above Another Despite Z-Index Troubles?

After conducting approximately 2 hours of research on this topic, I was unable to find clear answers or solutions. Hence, I have decided to address the issue here. The problem I'm facing is as follows: Due to the nature of HTML/CSS, it seems impossi ...

javascriptjqueryhtmlcssz-index

React app experiencing issues with onClick button methods not functioning as expected

Here is the React code for a sample homepage. My intention was to have the function run and update the page when the buttons are clicked. However, instead of updating the page, it keeps showing alerts. I have confirmed that the fetch function is pulling da ...

javascriptreactjs

Combine objects by selecting attributes from multiple objects

declare type A = {type: 'TypeA', attr1: string} declare type B = {type: 'TypeB', attr2: string} declare type U = A | B When I use type X = Pick<U, 'type'>, I get: { type: 'TypeA' | 'TypeB' } But I a ...

typescript

After the ajax call has finished loading the page, I would like to toggle a particular div

When I trigger a click event on an element, it calls a function with Ajax calls. How can I toggle a div (which will be loaded after the Ajax call) once the page is loaded? function triggerFunction(){ $("#trigger_div").trigger("click"); $("#to ...

javascriptjqueryajax