CODEWITHSUNDEEP
javascriptpluginssonarqubeeslint
Stelos10
Stelos10

Reputation: 451

SonarQube: Integrate ESLint for JavaScript in SonarQube?

We have determined our rules, which should be used for JavaScript code, with ESLint. Now we want to integrate ESLint to SonarQube as we did it before the same way with Checkstyle for JavaCode.

Under the following link it is described why SonarQube doesn't want to provide a plugin for ESLint: http://www.sonarqube.org/sonarqube-javascript-plugin-why-compete-with-jslint-and-jshint/

Is there still no plugin fir ESLint in SonarQube? Isn't this part of a marketing strategy? There is also a plugin for Checkstyle, FindBugs etc... Why does SonarQube suddenly stop to support the integration of other code analysing tools?

Upvotes: 17

Views: 26091

Answers (4)

Vikash Choudhary
Vikash Choudhary

Reputation: 1619

I came across a similar requirement and the following are the steps that I followed to achieve the ESLint report output integration into the Sonarqube dashboard:

  1. Switch to the project directory.

  2. Run: npx eslint <source_code_to_be_scanned> --format json --output-file <file_name>.json

    For e.g. npx eslint ./src/**/*.js --format json --output-file eslint-result.json

  3. Cope the relative path of the generated report.

  4. Add an additional property in your sonar-project.properties file as below:

    sonar.eslint.reportPaths=app/eslint-result.json

  5. Perform the scan

Output: I was able to see the expected output within my Sonarqbue dashboard.

I hope some of you find it helpful and save a bit of time.

Upvotes: 1

G. Ann - SonarSource Team
G. Ann - SonarSource Team

Reputation: 22824

Yes, there is still no plugin for ESLint, and this is part of the strategy, but in the other direction.

In fact, our first plugins were for external analyzers, and over time we realized that simply aggregating other tools' results didn't truly serve the community because that community was coming to us with rule bugs, requests and suggestions for improvement - and all we could do was refer them on the tools' makers.

So we started writing our own rules instead for better responsiveness and, we believe, enhanced accuracy.

I urge you to take the rules you feel are missing to the SonarQube Google Group

Edit The strategy has come full circle. SonarJS now imports ESLint reports.

Upvotes: 13

Roc&#237;o Garc&#237;a Luque
Roc&#237;o Garc&#237;a Luque

Reputation: 3857

You have a good option here: https://github.com/sleroy/SonarEsLintPlugin

From the docs:

• Install Node.js

• Install EsLint (3+) with npm install -g eslint, or ensure it is installed locally against your project

• If you're installing globally, find the path to EsLint and copy it - will be similar to C:\Users\ [Username]\AppData\Roaming\npm\node_modules\eslint\bin\eslint.js on Windows

• Copy .jar file (downloaded from https://github.com/sleroy/SonarEsLintPlugin/releases page) to SonarQube extensions folder

• Restart SonarQube server

• Browse to SonarQube web interface, login as Admin, hit up Settings

• Hit the Rules tab, then the EsLint rule set, then apply it to your project - alter rule activation as required

Upvotes: 1

Carlos Melo
Carlos Melo

Reputation: 899

I have not tried it yet, but I've just discovered this plugin that seems to be very promising for any front end project:

https://github.com/groupe-sii/sonar-web-frontend-plugin

It may worth giving a try

Upvotes: 1

Related Questions