JavaScript

The JavaScript Analyzer analyzes your JavaScript, TypeScript, and Vue files and raises issues if they don't follow the best practices and methods to build an efficient JavaScript Application.

Configuration - .deepsource.toml

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

name

• Type: String (opens new window)
• Presence: mandatory
• Description: Shortcode of the analyzer.
• Example:

name = "javascript"

enabled

• Type: Boolean (opens new window)
• Presence: mandatory
• Description: Toggle whether this analyzer should be run.
• Example:

enabled = true

meta

• Type: Table (opens new window)
• 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"

plugins

• Type: Array (opens new window)
• Presence: optional
• Description: The JavaScript Frameworks being used in the project. Currently, we support React (opens new window),Vue (opens new window), EmberJS (opens new window), Meteor (opens new window), Angular (opens new window) and AngularJS (opens new window).
• Available Values: react, vue, ember, meteor, angular and angularjs
• Default Value: None
• Example:

plugins = ["react"]

TIP

If you use frameworks like React then we recommend you to use the module_system = "es-modules" when you are using the latest import/export.

dependency_file_paths

• Type: Array (opens new window)
• Presence: optional
• Description: List of file paths (package.json) that contain the list of external dependencies, relative to the repository's root. The analyzer uses this to report dependency metrics.
• Example:

dependency_file_paths = [
  "src/client/package.json",
  "src/server/package.json",
  "app/package.json"
]

TIP

When you are using a monorepo to analyze on DeepSource, we recommend you define the package.json paths for each package for better code analysis of your monorepo.

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

environment

• Type: Array (opens new window)

• 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

  • nodejs - Adds Node.js global variables and Node.js scoping
  • browser - Adds all the Browser global variables
  • jest - Adds Jest global variables
  • mocha - Adds all the Mocha testing global variables
  • jasmine - Adds all the 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

• Default Values: ["nodejs", "browser"]

• Example:

environment = ["nodejs","browser","jest"]

TIP

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

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

module_system

• Type: String (opens new window)

• 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: "commonjs"

• Example:

module_system = "es-modules"

dialect

• Type: String (opens new window)
• Presence: optional
• Description: The dialect of JavaScript used in the project. Currently, we support TypeScript (opens new window) and Flow (opens new window).
• Available Value: typescript and flow
• Default Value: "typescript"
• Example:

dialect = "flow"

style_guide

• Type: String (opens new window)

• 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 all the conventions laid down by it and would raise issues whenever there's a violation.

• Available Values: airbnb, google and standard

  • airbnb - Airbnb JavaScript Style Guide (opens new window)
  • google - Google JavaScript Style Guide (opens new window)
  • standard - Standard JavaScript Style Guide (opens new window)

• 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

When you are using JavaScript Frameworks like React, Angular, 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"

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 :

• Node
  • eslint-plugin-node (opens new window)
• TypeScript
  • @typescript-eslint/eslint-plugin (opens new window)
• React
  • eslint-plugin-react (opens new window)
  • @babel/eslint-plugin (opens new window)
• Vue
  • eslint-plugin-vue (opens new window)
• Flow
  • eslint-plugin-flowtype (opens new window)
• Ember
  • eslint-plugin-ember (opens new window)
• Meteor
  • eslint-plugin-meteor (opens new window)
• Angular
  • @angular-eslint/eslint-plugin (opens new window)
  • @angular-eslint/eslint-plugin-template (opens new window)
• AngularJS
  • eslint-plugin-angular (opens new window)
• Security
  • eslint-plugin-security (opens new window)

Dependencies Calculation

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

If you have the lockfile and you receive 0 direct and indirect dependencies, it may be because of the following reasons :

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