Code Analysis

.deepsource.toml

This section covers .deepsource.toml configuration specific to the javascript analyzer. Please make sure to read the general configuration guide first.

name

  • Type: String
  • Presence: mandatory
  • Description: Shortcode of the analyzer.
  • Example:
name = "javascript"

enabled

  • Type: Boolean
  • Presence: optional
  • Description: Toggle whether this analyzer should be run.
  • Example:
enabled = true

meta

  • Type: Table
  • Presence: optional
  • Description: Any supported metadata to pass to the analyzer.
  • Example:
[analyzers.meta]
  plugins = ["react"]
  environment = ["mongo", "jquery"]
  module_system = "es-modules"
  dialect = "flow"
  skip_doc_coverage = ["class-expression", "method-definition"]
plugins
  • Type: Array
  • Presence: optional
  • Description: The JavaScript Frameworks being used in the project. Currently, we support React,Vue, EmberJS, Meteor, Angular and AngularJS.
  • Available Values: react, vue, ember, meteor, angular and angularjs
  • Default Value: None
  • Example:
plugins = ["react"]

If you use frameworks like React with ES6 modules, we recommend you set module_system to "es-modules".

dependency_file_paths
  • Type: Array
  • Presence: optional
  • Description: A list of paths having files (e.g. package.json or tsconfig.json) relative to the repository’s root that specify external dependencies. The analyzer uses this to report dependency metrics and improve analysis accuracy.
  • Example:
dependency_file_paths = [
  "src/client/",
  "src/server/",
  "app/"
]

If you want to analyze a monorepo on DeepSource, we recommend defining the package.json paths for each package for better analysis results.

By default, the analyzer automatically detects and scans the package.json file if found in the repository’s root.

environment
  • Type: Array
  • Presence: optional
  • Description: The global variables related to the environments used that need to be predefined for the project.
  • Available Values: nodejs, browser, jest, mocha, jasmine, jquery, mongo, cypress, vitest
    • nodejs - Adds Node.js global variables and Node.js scoping
    • browser - Adds Browser specific global variables
    • jest - Adds Jest global variables
    • mocha - Adds Mocha testing global variables
    • jasmine - Adds Jasmine testing global variables for version 1.3 and 2.0
    • jquery - Adds jQuery global variables
    • mongo - Adds MongoDB global variables
    • cypress - Adds Cypress global variables
    • vitest - Adds Vitest global variables
  • Default Values: [“nodejs”, “browser”]
  • Example:
environment = ["nodejs","browser","jest"]

The analyzer can automatically detect nodejs, browser, jest, mocha, jasmine and, cypress at the moment.

If your project uses Jquery or MongoDB, please mention them explicitly.

globals
  • Type: Array
  • Presence: optional
  • Description: The list of global variables that are used in the project. Helps the analyzer recognize global variables and not report them as undefined.
  • Example:
globals = ["CUSTOM_GLOBAL"]
module_system
  • Type: String
  • Presence: optional
  • Description: The type of modules used in the project.
  • Available Values: commonjs, es-modules and amd
    • commonjs - The CommonJS Module System. (require / exports)
    • es-modules - ES Modules (import / export)
    • amd - Asynchronous Module Definition (define / require)
  • Default Value: “es-modules”
  • Example:
module_system = "es-modules"
dialect
  • Type: String
  • Presence: optional
  • Description: The dialect of JavaScript used in the project. Currently, we support TypeScript and Flow.
  • Available Value: typescript and flow
  • Default Value: “typescript”
  • Example:
dialect = "flow"
skip_doc_coverage
  • Type: Array
  • Presence: optional
  • Description: Specify which artifacts to skip when detecting documentation issues and calculating documentation coverage.
  • Available Values: function-declaration, function-expression, arrow-function-expression, class-declaration, class-expression and method-definition
    • function-declaration - Ignore function declarations
    • function-expression - Ignore function expressions
    • arrow-function-expression - Ignore arrow function expressions
    • class-declaration - Ignore class declarations
    • class-expression - Ignore class expressions
    • method-definition - Ignore method definitions
  • Default Value: []
  • Example:
skip_doc_coverage = ["class-expression", "method-definition"]
cyclomatic_complexity_threshold
  • Type: String
  • Presence: optional
  • Description: Specify the acceptable risk category for your project as the threshold. All functions with complexity beyond this threshold will raise an issue. For example, setting the threshold to low will flag all functions that have a cyclomatic complexity of more than 5, while setting the threshold to critical will not flag any function.
  • Available Values: low, medium, high, very-high and critical
Risk categoryCyclomatic complexity rangeRecommended action
low1-5No action is needed.
medium6-15Review and monitor.
high16-25Review and refactor. Recommended to add detailed comments if the function absolutely needs to be kept as it is.
very-high26-50Refactor to reduce the complexity.
critical> 50Must refactor this. This can make the code untestable and very difficult to understand.
  • Default Value: high
  • Example:
[analyzers.meta]
cyclomatic_complexity_threshold = "very-high"
style_guide
  • Type: String
  • Presence: optional
  • Description: A style guide is a set of standards that outline how code should be written and organized. Setting this will ensure that you follow established conventions, and will also allow the analyzer to raise issues for any style guide violations.
  • Available Values: airbnb, google and standard
  • Default Value: None
  • Example:
style_guide = "airbnb"

Sample config

Configuration without meta

version = 1

test_patterns = ["*/test/**"]

exclude_patterns = [
    "public/**,",
    "dist/**"
]

[[analyzers]]
name = "javascript"
enabled = true

If you use JavaScript Frameworks like React, Angular or Vue, we recommend you add meta fields to fine-tune the analyzer.

Configuration with meta

version = 1

test_patterns = ["*/test/**"]

exclude_patterns = [
    "public/**,",
    "dist/**"
]

[[analyzers]]
name = "javascript"
enabled = true

  [analyzers.meta]
  plugins = ["react"]
  module_system = "es-modules"
  environment = [
    "jquery",
    "mongo"
  ]
  dialect = "flow"
  skip_doc_coverage = ["class-expression", "method-definition"]

ESLint Rules & Plugins

The DeepSource JavaScript analyzer fully supports all the ESLint core JavaScript rules. Along with that, it currently supports the following ESLint plugins:

Custom plugins specific to your project, and other third party plugins are not supported. If a specific rule is explicitly disabled in your repository’s ESLint config, DeepSource will respect that and not raise any issues that are similar to that rule.

Code Coverage

Jest

The analyzer supports the Cobertura XML format for JavaScript test coverage.

Here’s how you can generate a coverage report and submit it to the analyzer:

# Make sure `jest` is installed. If not, install it using `yarn`
yarn add --dev jest
# OR `npm`
npm install --save-dev jest

# Add the following options to the jest config to get a cobertura report
"collectCoverage": true,
"coverageReporters": ["cobertura"]

# Or, add these options as flags to test script in package.json
{
  "scripts": {
    "test": "jest --coverage=true --coverageReporters=cobertura"
  }
}

# Run the tests
yarn test
# OR
npm test

# Install 'deepsource CLI'
curl https://deepsource.io/cli | sh

# Set DEEPSOURCE_DSN env variable from repository settings page
export DEEPSOURCE_DSN=https://sampledsn@deepsource.io

# From the root directory, run the report coverage command
./bin/deepsource report --analyzer test-coverage --key javascript --value-file ./coverage/cobertura-coverage.xml

If the coverage file is generated at a path other than the root directory, pass that path to the value-file flag of the last command.

Example:

./bin/deepsource report --analyzer test-coverage --key javascript --value-file ./src/app/coverage/cobertura-coverage.xml

Code Formatter (Transformer)

Prettier

Transform all incoming JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, and YAML code with Prettier.

This section covers .deepsource.toml configuration specific to the prettier transformer. Please make sure to read the general configuration guide first.

name

  • Type: String
  • Presence: mandatory
  • Description: Shortcode of this transformer.
  • Example:
name = "prettier"

enabled

  • Type: Boolean
  • Presence: optional
  • Description: Toggle whether this transformer should be run.
  • Example:
enabled = true

StandardJS

Transform all incoming JavaScript code with StandardJS.

This section covers .deepsource.toml configuration specific to the standardjs transformer. Please make sure to read the general configuration guide first.

name

  • Type: String
  • Presence: mandatory
  • Description: Shortcode of this transformer.
  • Example:
name = "standardjs"

enabled

  • Type: Boolean
  • Presence: optional
  • Description: Toggle whether this transformer should be run.
  • Example:
enabled = true

Dependency Metric Calculation

DeepSource uses package-lock.json and yarn.lock to calculate direct and indirect dependencies. We don’t update any of the lock files.

If you have a lock file and zero (0) direct and indirect dependencies are reported, it may be because of the following reasons:

  • You have not installed peerDependencies correctly.
  • You are using a private node package.

Vulnerability Scanning

Supported target files:

  • package.json
  • package-lock.json
  • yarn.lock
  • pnpm-lock.yaml

The analyzer supports vulnerability scanning for dependencies managed by npm, yarn, and pnpm.

Was this page helpful?