Visual Studio Code extensionThe Snyk Visual Studio Code extension is available for installation on the marketplace: https://marketplace.visualstudio.com/items?itemName=snyk-security.snyk-vulnerability-scanner The Visual Studio Code extension requires the Snyk CLI; see Install the Snyk CLI. Supported languages, package managers, and frameworks
Install the extensionYou can find the Snyk Extension in the Visual Studio Code Marketplace. To install, do one of the following:
When the extension is installed you can find a Snyk icon in the sidebar . The Snyk extension provides all the suggestions in a concise and clean view containing the information you need to decide how to fix or act on.  (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png>) ConfigurationEnvironmentTo analyze projects, the plugin uses the Snyk CLI which requires environment variables:
Setting these variables only in a shell environment (for example,using
ProxyIf you are behind a proxy, proxy settings are configured either using VS Code proxy settings or set using AuthenticationThe extension uses your Snyk API token for authentication. To store the token securely, we utilize Secret Storage API, which uses the system's keychain to manage the token. Logging inTo authenticate follow these steps:
Switching accountsTo re-authenticate with a different account, follow the steps below:
Or you run  (1).png>) \ Run analysisIn the IDE note that the extension is already picking up the files and uploading them for analysis. Snyk Open Source requires the Snyk CLI, so it downloads in the background. Snyk Code analysis runs quickly without the CLI, so results may already be available. Otherwise, you see the following screen while Snyk scans your workspace for vulnerabilities:  (1) (1) (1) (1) (1).png>) Snyk analysis runs automatically when you open a folder or workspace.
 (1) (1) (1) (1) (1) (1) (1) (1).png>) Tip: if you do not like to manually save while working, enable AutoSave. RescanTo manually trigger a scan, either Save or manually rescan using the rescan icon:  (1) (1).png>) If you only need the Code Quality, Code Security, or Open Source Security portion of the findings, you can easily disable the feature with the results you do not want to see or collapse the view: Snyk Code advanced modeSnyk Code has "Advanced" mode that allows you to control how scan is performed. To manually perform the analysis, in the configuration of the extension you can enable Advanced Mode which enables you to control the scanning process: View analysis resultsSnyk 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. Snyk suggestion information for the issue selected appears in a panel on the right side:  (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (10).png>) Snyk analysis panelThe Snyk analysis panel on the left of the preceding code screen shows how much time the analysis took plus a list of issues with the suggestions found for them. The icons have the following meaning:
You can filter the issues by setting the severities you want to see using the  (2) (1).png>) Snyk Code editor windowThe 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 Code vulnerability window (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (4).png>) The Snyk Suggestion panel on the right of the results screen shows the recommendation of the Snyk engine using, for example, variable names of your code and the line numbers in red. You can also see the following:
Snyk also includes a feedback mechanism to report false positives so others do not see the same issue. Snyk Open Source editor windowThe editor window shows security vulnerabilities in open source modules while you code in JavaScript, TypeScript, and HTML. Receive feedback in-line with your code, such as how manyvulnerabilities a module contains that you are importing. The editor exposes only top-level dependency vulnerabilities; for the full list of vulnerabilities refer to the side panel. You can find security vulnerabilities in the npm packages you import and see the number of known vulnerabilities in your imported npm packages as soon as you require them: Code inline vulnerability counts are also shown in your Find security vulnerabilities in your JavaScript packages from well-known CDNs. The extension scans any HTML files in your projects and displays vulnerability information about the modules you include from your favorite CDN.
You can navigate to the most severe vulnerability by triggering the provided code actions. This opens a vulnerability window to show more details:  (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (5).png>) Snyk Open Source vulnerability windowThe Open Source Security (OSS) vulnerability window shows information about the vulnerable module.
Extension configurationAfter the extension is installed, you can set the following configurations for the extension:
Organization settingThe value of organization setting If not specified, the preferred organization as defined in your web account settings is used to run tests. Create a .dcignore fileTo 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 .
Support and contact informationNeed more help? Submit a request to Snyk support. Share your experience. Snyk continuously strives to improve the Snyk plugins experience. Would you like to share your feedback about the Snyk Visual Studio Code extension? Schedule a meeting. |