Step-by-step guide on releasing declaration files (.d.ts) for vscode plugins

I developed a vscode extension that provides an API for other extensions to utilize (by returning a value in the activate() function).

I am interested in releasing a scoped npm package containing a declaration file (.d.ts) to help extension developers easily integrate with my extension.

The obstacle I face is the restriction of using the extension's package.json due to the inability to include the @ symbol in the package name, causing issues with packaging the extension using vsce package.

If I opt to create a separate package.json solely for distributing the declaration file on npm, it involves duplicating the .d.ts file and its dependencies from the extension's out directory, which feels cumbersome.

Finding no clear guidance on the appropriate method for this scenario—publishing vscode extension declaration files on npm (whether scoped or not)—leaves me unsure of the correct approach. What steps should be taken in this situation?

typescriptnpmdeclarationvscode-extensions.d.ts

Answer №1

Here is the solution I came up with:

  1. To organize my project, I created a separate folder without any source code next to the extension's folder.
  2. In this new folder, I added a custom package.json file:
    1. I defined my package's scope in the name field and appended it with -types for better clarity.
    2. Implemented a npm script called copy to copy files from the extension's out directory using ncp for compatibility across different platforms.
    3. Added @types/vscode to the dependencies section (not devDependencies, as specified in publishing declaration files guide) due to the reference to vscode in my .d.ts file.
  3. Created a .npmignore file to include the previously excluded out directory (using negate: !out) from the .gitignore file.
  4. To prevent issues related to missing transitive dependencies, I excluded .js files from the out directory. Instead of configuring another tsconfig.json file with emitDeclarationOnly option, I decided to handle this through .npmignore.

This approach works for me, but I wonder if there's a more efficient method?

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

Error: Unable to access 'isCE' property of null - Custom Component Library

Struggling to create a custom component library for Vue 3 using ViteJS and NPM. Here is a breakdown of my setup, can someone guide me in the right direction as I have hit a roadblock for the past couple of days. Here's how my files are structured: d ...

vue.jsnpmvue-componentvuejs3vite

Using "Ctrl + C" doesn't seem to have any effect on shutting down my Vite+React server within VS

I'm currently working on a website development project using React and Vite, following a tutorial I found on YouTube. The instructor in the video easily stops the React server by simply pressing Ctrl + C, but when I attempt to do the same, it doesn&ap ...

reactjsnpmvite

Unable to locate / within the Node application

I've searched through the related questions but can't seem to figure out what's causing the issue (I'm not very experienced in this area). I am attempting to run this app locally with its default settings (except for some Twilio keys), ...

node.jsmongodbexpressnpm

Constructing an Angular 2 application using a solo TypeScript file that is compiled individually

At the moment, I am in the process of developing a Chrome Extension using Angular 2. The application includes a background.js file which handles the functionality for a long-running task that operates while the extension is active. Currently, this backgrou ...

angulartypescriptwebpack

node-ts displays an error message stating, "Unable to locate the name '__DEV__' (TS2304)."

I recently inserted __DEBUG__ into a TypeScript file within my NodeJS project. Interestingly, in VSCode, no error is displayed. However, upon running the project, I encounter an immediate error: error TS2304: Cannot find name '__DEBUG__'. I att ...

node.jstypescriptts-node

Try installing offline using npm package manager

After setting up my Raspberry Pi Zero as a hotspot, I encountered an issue with the internet connection not being available. To address this, I am looking to download an npm package on my personal computer and then transfer it over to my Raspberry Pi usin ...

node.jsnpm

Techniques for importing esm libraries without requiring the "type": "module" declaration in the package.json configuration file

I have successfully implemented a TypeScript Node project but now I am facing an issue while trying to integrate the VineJS library into the project. The problem arises because VineJS is exclusively an ESM (ECMAScript Module) package, and when adding it to ...

node.jstypescriptnode-modulestsconfigts-node

"Typescript with React and Material-UI Table - A seamless user experience with no errors

I have been working on incorporating the "material-table" library into my TypeScript and React project, but I am facing an issue where the page appears blank without any compiling errors. Environment configuration: npm: 6.11.3 nodejs: 10.17.0 typescript: ...

reactjstypescriptmaterial-table

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 ...

angulartypescriptjasminekarma-jasmine

tips for extracting data from C# generic collection lists using TypeScript

This is the code I wrote in my .cshtml file: @ { var myList = (List<MyViewModel>)ViewBag.MyCollection; } <input id="myListHidden" type="hidden" data-my-list="@myList" /> Next, here is the TypeScript code that retrieves the value from ab ...

c#typescriptrazorgeneric-collections

Problem integrating 'fs' with Angular and Electron

Currently, I am working with Angular 6.0, Electron 2.0, TypeScript 2.9, and Node.js 9.11 to develop a desktop application using the Electron framework. My main challenge lies in accessing the Node.js native API from my TypeScript code. Despite setting "com ...

node.jsangulartypescriptelectronfs

Utilizing @ngrx/router-store in a feature module: A comprehensive guide

The NGRX documentation for Router-Store only showcases an example with .forRoot(). Upon experimenting with .forFeature(), I realized that this static method does not exist. I am interested in defining certain actions and effects to be utilized within my f ...

angulartypescriptngrxngrx-router-store

Is there a way to launch my JavaScript project locally and have index.html served on an npm server?

I am currently attempting to launch a specific Single Page Application (SPA) project using pure JavaScript. This project consists of a script file and an index.html file. I am trying to run this project on my local machine, but it requires that it be hos ...

javascriptnode.jsnpm

Enhance Angular Forms: Style Readonly Fields in Grey and Validate Data Retrieval using Typescript

Is there a way to disable a form and make it greyed out, while still being able to access the values? 1/ Disabling controls with this.roleForm.controls['id'].disable() in Typescript does not allow me to retrieve the values of Id, Name, and Descr ...

angulartypescriptangular-reactive-formsangular10

The error message "this.startLoginAnimatioon is not defined as a function" popped up

I've been developing a login system using TypeScript but I keep encountering an error that I can't figure out. Here's the issue in detail: The problem arises when the this.startLoginAnimation() function is called within the attemptLog ...

typescript

HashId plugin for Angular

Currently, I'm attempting to integrate into my Angular project built on the latest version. After discovering this definition file: // Type definitions for Hashids.js 1.x // Project: https://github.com/ivanakimov/hashids.node.js // Definitions by: ...

javascriptangulartypescripthashids

What is the best way to save npm configuration settings to the .npmrc file within a project

My goal is to utilize npm config in order to specify values in a project's .npmrc file. Unfortunately, the documentation does not provide guidance on how to designate a specific file to save these values into. I am in need of a command similar to np ...

npm

Troubles with input handling in Angular

I've been diving into Traversy Media's Angular crash course recently. However, I've hit a roadblock that I just can't seem to get past. The problem arises when trying to style the button using a specific method. Every time I save and pa ...

angulartypescript

Error: The default export is not a component compatible with React in the specified page: "/"

I'm facing an issue while building my next app. Despite using export default, I keep encountering an error that others have mentioned as well. My aim is to create a wrapper for my pages in order to incorporate elements like navigation and footer. vi ...

javascriptreactjstypescriptnext.jseslint

Is it possible to update input form fields in an Angular application?

I am currently designing a straightforward web page featuring a modal for creating a new object named Partner and sending it to the server. The page also includes multiple input fields to showcase the newly created data. In this project, I am utilizing Ang ...

angulartypescripttwitter-bootstrapmdbootstrap