Snyk for Visual Studio Code
Table of Contents
Use this documentation to get started with the Visual Studio Code extension for Snyk Code.
like Vue and React. See Snyk Code language and framework support
Install the plugin
You can find the Snyk Extension in the Visual Studio Code Marketplace. To install, either:
Once installed you can find a Snyk icon in the sidebar .
Snyk’s extension provides all the suggestions in a concise and clean view containing all information you need to decide how to fix or act upon:
To authenticate follow the steps:
In the IDE you will notice that the extension is already picking up the files and uploading them for analysis. Snyk Code analysis runs quickly, so results may even already be available:
Snyk's analysis runs automatically when you open a folder or project, or when you save your work.
Tip: if you don't like to manually save while working, enable AutoSave.
To manually perform the analysis, in the configuration of the extension, you can enable Advanced Mode which enables you to control the scanning process:
To manually trigger a scan, either Save or manually rescan using the rescan icon:
View analysis results
Snyk Code analysis shows a list of security vulnerabilities and code issues found in the application code. For more details and examples of how others fixed the issue, select a security vulnerability or a code security issue. Once selected you will see the Snyk suggestion information in a panel on the right side:
The Snyk analysis panel (on the left of the code screen in the above screenshot) shows how much time the analysis took plus a list of files with the suggestions found for them.
The icons here mean:
The editor window (in the middle of the results screen) shows the code that is inspected. This ensures that when you are inspecting a Snyk issue, you always have the code context close to the issue.
Snyk suggestions window
The Snyk Suggestion panel (on the right of the results screen) shows the argumentation of the Snyk engine using for example variable names of your code and the line numbers in red. You can also see:
We also include a feedback mechanism to report false positives so you others do not see the same issue.
After the plugin is installed, you can set the following configurations for the extension:
Create a .dcignore file
To ignore certain files and directories (for example, node_modules), create a .dcignore file. You can create it in any directory on any level starting from the directory where your project resides. The file syntax is identical to .gitignore.