JFrog Visual Studio Code Extension

Table of Contents

• General
• Viewing Project Dependencies Information
• General Configuration
  • Configuring JFrog Xray
  • Proxy Configuration
    • Proxy Authorization
  • Exclude Paths from Scan
  • Extension Settings
• Npm Projects
• Go Projects
• Pypi Projects
• Troubleshooting
• License
• Building and Testing the Sources
• Code Contributions
  • Guidelines

General

The cost of remediating a vulnerability is akin to the cost of fixing a bug. The earlier you remediate a vulnerability in the release cycle, the lower the cost. JFrog Xray is instrumental in flagging components when vulnerabilities are discovered in production systems at runtime, or even sooner, during the development.

The JFrog VS Code Extension adds JFrog Xray scanning of npm, Go and Python project dependencies to your VS Code IDE. It allows developers to view panels displaying vulnerability information about the components and their dependencies directly in their VS Code IDE. With this information, a developer can make an informed decision on whether to use a component or not before it gets entrenched into the organization’s product.

Viewing Project Dependencies Information

View the dependencies used by the project in a tree, where the direct dependencies are at the top:

The JFrog extension automatically triggers a scan of the project's npm dependencies whenever a change in the package-lock.json file is detected. To invoke a scan manually, click on the Refresh button or click on Start Xray Scan from within the editor:

View existing issues:

View licenses directly from within the package.json, requirements.txt or go.mod:

View additional information about a dependency:

View dependency in package.json, requirements.txt or go.mod:

Search for a dependency in the tree:

To filter scan results, click on the Filter button:

General Configuration

Configuring JFrog Xray

Connect to JFrog Xray by clicking on the green Connect button:

Proxy Configuration

If your JFrog Xray instance is behind an HTTP/S proxy, follow these steps to configure the proxy server:

1. Go to Preferences --> Settings --> Application --> Proxy
2. Set the proxy URL under 'Proxy'.
3. Make sure 'Proxy Support' is 'override' or 'on'.

• Alternatively, you can use the HTTP_PROXY and HTTPS_PROXY environment variables.

Proxy Authorization

If your proxy server requires credentials, follow these steps:

1. Follow 1-3 steps under Proxy configuration.
2. Encode with base64: [Username]:[Password].
3. Under 'Proxy Authorization' click on 'Edit in settings.json'.
4. Add to settings.json: "http.proxyAuthorization": "Basic [Encoded credentials]".

Example

• Username: foo
• Password: bar

settings.json:

{
   "http.proxyAuthorization": "Basic Zm9vOmJhcg=="
}

Exclude Paths from Scan

By default, paths containing the words test, venv and node_modules are excluded from Xray scan. The exclude pattern can be configured in the Extension Settings.

Extension Settings

To open the extension settings, use the following VS Code menu command:

• On Windows/Linux - File > Preferences > Settings > Extensions > JFrog
• On macOS - Code > Preferences > Settings > Extensions > JFrog

Npm Projects

Behind the scenes, the extension builds the npm dependencies tree by running npm list. View licenses and top issue severities directly from the package.json.

Important: To have your project dependencies scanned by JFrog Xray, make sure the npm CLI is installed on your local machine and that it is in your system PATH. In addition, the project dependencies must be installed using npm.

Go Projects

Behind the scenes, the extension builds the Go dependencies tree by running go mod graph. View licenses and top issue severities directly from go.mod. To scan your Go dependencies, just make sure to have Go CLI in your system PATH.

Pypi Projects

Behind the scenes, the extension builds the Pypi dependencies tree by running pipdeptree on your Python virtual environment. It also uses the Python interpreter path configured by the Python extension. View licenses and top issue severities directly from your requirements.txt files. The scan your Pypi dependencies, make sure the following requirements are met:

1. The Python extension for VS Code is installed.
2. Depending on your project, Python 2 or 3 most be your system PATH.
3. Create and activate a virtual env as instructed in VS-Code documentation. Make sure that Virtualenv Python interpreter is selected as instructed here.
4. Open a new terminal and activate your Virtualenv as instructed here.
5. Install your python project and dependencies according to your project specifications.

Troubleshooting

View the extension log:

License

The extension is licensed under Apache License 2.0.

Building and Testing the Sources

To build the extension sources, please follow these steps:

1. Clone the code from Github.
2. Build and create the VS-Code extension vsix file by running the following npm command.

npm run package

After the build finishes, you'll find the vsix file in the jfrog-vscode-extension directory. The vsix file can be loaded into VS-Code

To run the tests:

npm t

Code Contributions

We welcome community contribution through pull requests.

Guidelines

• Before creating your first pull request, please join our contributors community by signing JFrog's CLA.
• If the existing tests do not already cover your changes, please add tests.
• Pull requests should be created on the dev branch.
• Please run npm run format for formatting the code before submitting the pull request.