Vscode: error TS2307: Cannot find module 'vscode'

DORSETRIGS

2 min read

·

06-10-2024

12

0

Share

Conquering the "Cannot find module 'vscode'" Error in VS Code

Have you ever encountered the dreaded "Error TS2307: Cannot find module 'vscode'" while working on a VS Code extension? This error can be frustrating, but it usually stems from a simple configuration issue.

Scenario:

You're excited to build a new VS Code extension, but as soon as you write your first lines of code, you hit a wall with this cryptic error message. The code might look something like this:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // Your extension logic goes here
}

Analysis:

This error occurs because your TypeScript compiler doesn't know where to find the vscode module. The vscode module is a core part of VS Code's extension API, providing essential functionality like creating commands, working with the editor, and interacting with the workspace.

Solution:

The fix is straightforward: you need to tell your compiler the location of the vscode module. This is done by configuring the vscode package as a development dependency in your package.json file.

Steps:

1. Install the vscode package:

   npm install --save-dev vscode
   

2. Update tsconfig.json: Ensure that your tsconfig.json file has the following configuration:

   {
     "compilerOptions": {
       // ... other options ...
       "moduleResolution": "node",
       "typeRoots": [
         "node_modules/@types"
       ],
       "types": [
         "vscode"
       ]
     }
   }
   

Explanation:

• moduleResolution: "node" tells the compiler to use Node.js' module resolution logic, which is how VS Code extensions load modules.
• typeRoots: This option specifies the locations where the compiler should search for type definitions (.d.ts files).
• types: This option explicitly instructs the compiler to include the types from the vscode module.

Additional Considerations:

• Clean your project: Sometimes, restarting VS Code or cleaning your project cache can resolve this issue.
• Check for outdated dependencies: Ensure you're using the latest version of the vscode package and other dependencies.
• Consult VS Code documentation: For advanced troubleshooting, refer to the official VS Code documentation for extension development: https://code.visualstudio.com/api/references/vscode-api

Conclusion:

The "Cannot find module 'vscode'" error is usually easily fixed by configuring the vscode package and its types correctly in your project. By following the steps outlined above, you can eliminate this error and get back to building your VS Code extension!