Guide to style issues in JavaScript

Recently we removed style issues from our Javascript Analyzer. In this post, we will discuss this in detail.

Why did we do this?

Style guidelines are very opinionated in the JavaScript ecosystem and there are always at least two ways to code a JavaScript program. As these are always based on the author’s preference, enforcing a style that goes against that preference results in conflicts or false positives. We’ve learned that there’s no way to satisfy everyone’s style preferences. And most of the time, these result in noise that doesn’t really affect the codebase with regards to performance or possible bug risks.

What is DeepSource’s recommendation to take care of the style issues?

At Deepsource, we recommend using transformers to do the formatting and stylistic changes according to the user’s preference like through a prettier config. We are working to make sure that no changes after the transformer’s run would be conflicting with our analyzer’s issues. These would be independent of each other and will be focused on specific goals.

Currently, we support two kinds of transformers for JavaScript

To add support for the transformer (if you have not done already), add the following in your .deepsource.toml

Prettier

Prettier transformer in this example

// ...

[[transformers]]
    name = "prettier"
    enabled = true

// ...

To add style preference using prettier, you can configure prettier using following configuration

// prettier.config.js or .prettierrc.js

module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

Please read more about this in prettier’s documentation

Standardjs

Or if you want to use the standardjs transformer, add the following

// ...

[[transformers]]
    name = "standardjs"
    enabled = true

// ...

You can configure your style preference for this by configuring standardjs using eslint’s config

Read more about configuring Eslint here and read more about Standardjs here