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

Guide on utilizing TypeScript declarations imported as `* as`

Currently, I am working with react-icons and attempting to import all icon definitions using the syntax import * as Icons from 'react-icons/fi'. However, I am facing a dilemma on how to create a type that must be one of the types exported from Ic ...

reactjstypescript

Create a mechanism in the API to ensure that only positive values greater than or equal to 0 are accepted

My goal is to process the API result and filter out any values less than 0. I've attempted to implement this feature, but so far without success: private handleChart(data: Object): void { const series = []; for (const [key, value] of Object.e ...

javascriptangulartypescripthighcharts

Executing a designated assessment in Protractor

Is there a way to run a specific test scenario in my Angular app? I recently added a new feature in Protractor, created the necessary page and steps, but I already have other features implemented. I am wondering if it is possible to solely test the new f ...

angulartypescriptprotractor

The installation process for NPM is currently seeking the NVM directory

I recently removed NVM completely from my system. Now, when attempting to install IONIC using "npm install -g @ionic/cli", the installation process is trying to access a directory from the old NVM setup. >npm install -g @ionic/cli npm ERR! code ENOENT n ...

node.jsnpmnpm-installnvm

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

I have successfully implemented a Google sign-in button in my Angular application following the example provided in Display the Sign In With Google button: <div id="g_id_onload" class="mt-3" data-client_id="XXXXXXXXXXXX-XX ...

javascripttypescriptexpressoauthjwt

What is the best way to simultaneously run a server and a React App?

In a previous project that was more complex, I worked with others in a class and we were able to simultaneously run npm start for the React app and nodemon for the server without any issues. However, now that I'm building a simple single-page web appl ...

npmservercreate-react-apppackage.jsonnodemon

Steps to transform current react application into an npm module

I successfully created a react app utilizing react router, react redux, and saga. My goal is to export this project as an npm package so that its containers can be utilized in my other projects while maintaining all the functionalities. How can I achieve t ...

reactjsnpmreact-routerreact-reduxwebpack-2

Is it necessary to conceal Angular navigation controls when the user is not authenticated?

In Angular, is there a standardized method for hiding controls when the user is not logged in? We already have the CanActivate guard which checks if a user can access a route. Would it be better to hide the route initially if the user is not logged in or l ...

angulartypescriptauthenticationauthorization

Running a post-deploy script in Elastic Beanstalk

My application built using node.js consists of an express backend and a react frontend. In my project structure, I have two package.json files: package.json /app/package.json I am trying to execute a script in the frontend folder 'app' that w ...

node.jsamazon-web-servicesnpmamazon-elastic-beanstalk

What is the process for compiling sass during the npm start command?

Is there a more efficient way to compile sass to css during npm startup? I have tried using the following script, but it does not fulfill my requirements: "start": "nodemon ./bin/www & node-sass --watch scss -o public/stylesheets" If you have any sug ...

npmsassnodemonnode-sass

"Importing values from an external JSON file in the package.json configuration

I have a JSON file called metadata.json that contains the following values: {"build":{"major":0,"minor":88}} Within my create-react-app project, I am looking to execute a script that will upload sentry map files. The script is as follows: "sentry" : "se ...

reactjsnpmcreate-react-appsentry

What steps should I follow to integrate React and React-Redux into my project?

Hello there, I've been attempting to set up react and react-redux in my project, but I'm encountering some perplexing errors. $ npx create-react-app learn-redux npm ERR! code ENOLOCAL npm ERR! Could not install from "Phelps\AppData\R ...

npm

I'm attempting to retrieve mlab data in the console using node.js, but unfortunately encountering an error

I came across this helpful YouTube tutorial:https://www.youtube.com/watch?v=PFP0oXNNveg&t=460s. I followed the steps outlined in the video and made necessary code adjustments based on current updates found through a Google search (to resolve errors enc ...

node.jsangulartypescriptrxjsmongojs

Guide on removing a key from an object in TypeScript

My variable myMap: { [key: string]: string[] } = {} contains data that I need to modify. Specifically, I am trying to remove a specific value associated with a certain key from the myMap. In this case, my goal is to delete value1 from myMap[Key1]. Despit ...

typescriptecmascript-6

Encountered a problem while attempting to remove node version

When I run the command nvm ls -> v4.3.2 system default -> 4.3.2 (-> v4.3.2) node -> stable (-> v4.3.2) (default) stable -> 4.3 (-> v4.3.2) (default) iojs -> N/A (default) Upon running nodejs --version, it returns v0 ...

javascriptnode.jsnpm

Yarn throwing a "Manifest could not be located" error while transitioning symlinks from "link:" to "file:" within package.json

I am currently in the process of upgrading certain components to utilize Node version 16 instead of 12. As part of this update, npm has also been upgraded. Before the upgrade, there was a symbolic link specified in my package.json as link:./dist/src/share ...

npmyarnpkg-v3

Utilize ngx-translate with an array as interpolation values

When working with ngx-translate, I use the instant method to translate messages into the user's language. These messages are provided as JSON objects and some of them contain dynamic values: { "message.key": "First value is {{0}} and se ...

angulartypescriptngx-translate

What is the best way to retrieve data in my client component without risking exposing my API key to unauthorized users?

To retrieve information, I plan to use pagination in order to specify a particular page number within the API URL and fetch additional data by updating the value of page. The process of fetching data in my server component is as follows: // fetchData.tsx ...

typescriptnext.js

Encountered an error while attempting to run npm install for angular2-tree-component

I recently attempted to install the angular2-tree-component, but encountered a failure in the process. As I am still gaining experience with this technology stack, I would greatly appreciate some assistance in resolving this issue... /R/VKS/oryol/oryo ...

node.jsangularnpmtreeviewnpm-install

Developing a versatile Angular2 component that has the potential to be utilized across various sections of a website

Use Case: I need to display a processing screen during asynchronous calls to keep end users informed about ongoing activities across multiple sections of the website. To achieve this, I decided to create a reusable component at the global level. Issue: As ...

javascriptangulartypescript