System StatusCommunity Forum

VS Code

Perform analysis and resolve issues directly from the convenience of your VS Code environment.

Suggest Edits

DeepSource's integration with Visual Studio Code lets you to run comprehensive analyses, identify and address potential problems, and synchronize existing as well as new issues directly from the cloud — all without the need to create a pull request.

📘

Private Beta

DeepSource VS Code Extension is in private beta. If you would like to use the extension, please request access here.

In addition to issue detection, we have also introduced support for AI-based Autofix. With this feature, you can automatically generate fixes for your code health issues by harnessing the capabilities of AI.

Installation

  1. Open Visual Studio Code (VS Code).
  2. Go to the VS Code Marketplace by clicking on the Extensions icon in the Activity Bar on the side of the window or using the keyboard shortcut Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X(Mac).
  3. In the Extensions view, search for "DeepSource" in the search bar.
  4. Click on the "Install" button next to the DeepSource extension in the search results.
  5. Wait for the installation to complete. You should see a notification confirming successful installation.

Activation

  1. Once the extension is installed, you should see the DeepSource icon in VS Code’s sidebar (usually located on the left-hand side).
  2. Click on the DeepSource icon to open the DeepSource panel.

Log-in

  1. Upon opening the DeepSource panel for the first time, you'll be prompted to log in.
  2. For cloud users, click the “Connect to DeepSource” button. This will redirect you to the DeepSource website for authentication.
  3. For enterprise users, click “Connect to DeepSource Enterprise Sever”, and you'll be asked to enter the URL for your DeepSource installation in the prompt. After entering the URL, click on “Connect” to proceed.
  1. A browser window will be launched, taking you to the DeepSource login page.

Authentication

  1. In the browser window, enter your DeepSource credentials (username and password) to log in.
  2. If it's your first time logging in, you might need to follow some additional setup steps, such as configuring repositories or setting up analysis preferences. Follow the on-screen instructions to complete the setup.

Extension activation

  1. After successful authentication, the VS Code extension should now be fully activated.
  2. The DeepSource panel in VS Code will display information about your currently open project, and any existing code health issues.

Run analysis in VS Code

Prerequisites

  1. Make sure you have the DeepSource extension installed and activated in your VS Code, as outlined in the previous installation steps.
  2. Ensure that you have a project open in VS Code that meets the following criteria:
    • It should be a git repository.
    • The project should be activated on DeepSource. If it's not already activated, you'll receive a prompt in the VS Code sidebar to activate it.

Activation Check

If your repository is already activated on DeepSource but the sidebar hasn't updated to show the DeepSource panel, click on the refresh button in the VS Code sidebar to trigger a refresh. This should load the DeepSource panel with the relevant information.

Accessing Commands

To see all available commands provided by the DeepSource extension, press Cmd + Shift + P (Windows/Linux: Ctrl + Shift + P) to open the VS Code command palette. Type "DeepSource" in the command palette search bar, and you'll see a list of DeepSource-specific commands.

Starting Analysis

To initiate the code analysis, select the "DeepSource: Start analysis" command from the command palette, or click on the play button on the DeepSource sidebar's top-right section.. This will schedule an analysis run for all files modified between the last commit analyzed on DeepSource, and the last edit made locally. For IDE runs, only changed files are analyzed.

📘

Analyses do not happen on your local machine. Your editor will only receive the analysis results from DeepSource's servers.

Viewing Results

Once the analysis is complete and the results are received, you should be able to see the results in the DeepSource side pane within VS Code.

The sidebar has two tabs:

  • Current file: Shows all issues detected in the file that is currently open.
  • Affected files: Shows all files where DeepSource detected issues in the last analysis run.

In the Current file tab, you'll notice two panes, each containing a set of issues for the currently open file:

  • Existing issues: Shows all issues in the currently open file that were detected in your repository's default branch. These issues should be identical to those shown on your DeepSource dashboard.
  • New issues: Shows all issues that were newly introduced by the programmer in the current branch. You should probably take care of these before pushing your code!
  • Syncing issues: Clicking on the refresh button on the sidebar's header will sync any issues from DeepSource cloud to your local machine. You can use this when analysis is triggered on cloud and you want to see the results locally.

When the DeepSource sidebar is open, all lines where DeepSource has detected problems will be highlighted.
To see the description for issues raised on a line, simply place your cursor on that line and a description panel will pop-up on the sidebar.

Pull Request and Cloud Analysis

  1. When you open a pull request or commit your code to a branch on an existing pull request, DeepSource will automatically schedule a cloud analysis run.
  2. After your pull request is merged, all "New issues" found in the branch will transfer to "Existing issues" in DeepSource cloud and your IDE.

📘

Sidebar Highlight

The DeepSource extension only highlights issues in the VS Code sidebar when the DeepSource panel is active. So, ensure the DeepSource panel is open while reviewing issues.

📘

Issue Descriptions

While the DeepSource sidebar is open, you can place your cursor at any line in the document to view descriptions of all issues associated with that specific line of code.

AI-based Autofix

The VS Code extension offers Autofix, a powerful feature that provides automatic suggestions for fixing code issues. This feature utilizes artificial intelligence to intelligently propose code changes — enabling you to review and select the best-fit options that align with your coding style and preferences.

❗️

Autofix utilizes the capabilities of OpenAI's language model, offering automated suggestions. However, it's important to acknowledge that the results may not always be completely accurate, as the feature is currently in an experimental phase.

How to Use Autofix

  1. After locating a problematic line of code, you will notice an "Autofix" button at the bottom of the sidebar. Click on this button to trigger the Autofix feature.
  1. Once you have clicked the "Autofix" button, Autofix will begin generating suggestions for code fixes. The suggested fixes will appear in your editor one line at a time. Each suggestion is based on the AI's analysis of the code context and best practices.
  1. As the AI generates the suggested fixes, you have the flexibility to review each proposed change. You can accept or reject each suggestion by clicking on the respective buttons in the editor.

🚧

While Autofix offers valuable suggestions, it's essential to carefully review the changes before accepting them to ensure they align with the intended functionality of your code.

Support

Your feedback is invaluable in helping us refine and improve the extension further. If you encounter any bugs, hiccups, or have any questions while using the extension, we are here to assist you. Please don't hesitate to reach out for support by visiting app.deepsource.com/support for cloud users, or <HOST_URL>/support if you are on the Enterprise Server. Our dedicated support team will be glad to address your concerns and ensure a smooth experience with DeepSource. We appreciate your collaboration and look forward to hearing from you.

Updated about 2 months ago