[Sonar] Use SonarQube to detect Vue project code

This article takes the Vue project as an example to introduce how to configure the Sonarqube detection tool environment

GitHub repository

Environment configuration

Confirm environment dependencies

https://docs.sonarqube.org/latest/requirements/requirements/

Sonarqube operation depends on the Java environment

Java 11 is recommended

Sonarqube supports connecting to the database to output detection results, but the database is not used in the functions currently involved

Install the body

1. download

   https://www.sonarqube.org/downloads/

   Version: This tutorial uses Community Edition 9.6, 8.9.x LTS version is also available

2. initialization

   1. run sonar

      Taking the windows environment as an example, the startup file is in the following directory

      

      If the following statement appears, the startup is successful

      

   2. After successful startup, visit the following host:

      http://localhost:9000/
      

   3. login, user creation

      For the first login, the default user is admin and the password is admin

      

      After logging in for the first time, you will be asked to change the password, which cannot be consistent with the initial password

      Just enter the interface

Download sonar-scanner

1. download

   https://docs.sonarqube.org/latest/analysis/scan/sonarscanner/

   

2. Configure environment variables

   1. Add system variable SONAR_RUNNER_HOME

      

   2. add path variable

      

   3. Check it out:

      In CMD, run:

      sonar-scanner -v
      

      

install plugin

The installation method of the sonar plug-in is to put the <plug-in name>.jar file in the following directory:

<your sonar root directory>\extensions\plugins

Then restart sonar

Attachment: Official plugin list https://docs.sonarqube.org/latest/instance-administration/plugin-version-matrix/

Chinese pack

Official website: https://github.com/xuhuisheng/sonar-l10n-zh/releases

After downloading the jar file, put it in the plugin directory

PDF generator plugin

Latest version: https://gitee.com/zzulj/sonar-pdf-plugin/releases/tag/v4.0.0

After downloading the jar file, put it in the plugin directory

Note: The latest support in the official website description is 8.9.1, but in fact, version 9.6 can also be used normally

run test

create project

In creating a project, select Manual, enter a custom project name and key

After this step is completed, the project has been successfully created

Create a test configuration file

Open the root directory of the project to be tested

In the directory to be tested, create a sonar configuration filesonar-project.properties

#sonarqube服务器地址，默认为9000
sonar.host.url=http://localhost:9000
#sonarqube用户名
sonar.login=<替换为你的用户名>
#sonarqube密码
sonar.password=<替换为你设置的密码>
#项目唯一标识（不能出现重复）
sonar.projectKey=<替换为你项目的key>
#项目名称
sonar.projectName=<替换为你的项目名称>
#源代码目录
sonar.sources=<你的源码目录>
# 用逗号分割来指定多个目录
# sonar.sources=src, tests
# 测试代码目录
sonar.tests = <你的测试代码目录>
#语言
sonar.language=js
# sonar.language=javascript
#源代码文件编码
sonar.sourceEncoding=UTF-8

# 更多参数：https://docs.sonarqube.org/latest/analysis/analysis-parameters/

Please note the replacement of the content

More configuration parameters: https://docs.sonarqube.org/latest/analysis/analysis-parameters/

run scanner

Run in the root directory:

sonar-scanner

Wait for the scan to complete, open 9000 to view the scan results

report generation

In the project that has been tested, select Download Pdf Report under More

See leafletDemo.pdf for report sample

sonar rules

Sonar is a project-specific rule set

Reference: https://sqa.stackexchange.com/questions/24734/how-to-deactivate-a-rule-in-sonarqube/36023#36023

illustrate:

• Sonar pre-defines the set of inspection rules (ie Quality Profile) for each language
• When running a check for a project, sonar-scanner binds the default Quality Profile for the current project
• Therefore, if you need to manually edit the effective and ineffective rules, you need to create a new Quality Profile independently and set it as the default Quality Profile of the current project

Operating procedures:

1. Create a new custom Quality Profile

   Open the Quality Profiles tab and select the language to customize the Profile

   Click Copy to copy a default rule (the default rule cannot be edited

   Come up with a nice name for the new ruleset

   

2. Edit custom rulesets

   There can be multiple entries for editing a new rule set, and you can enter like this:

   

   

   You can also enter like this (use the filter panel of the rules tab):

   

   Click Activate/Disactivate on the right to specify the rules that take effect or do not take effect

3. Designate the new ruleset as the project's default ruleset

   On the project page, open the drop-down box of project settings

   

   Replace default rules

   

   Under the project, re-run sonar-scanner, the new rules will take effect

sonar editing rules

First, to edit a rule, you need to ensure that the current user has permission

In the administration-security-global permission, confirm that the two permissions are checked

Sonar has limited editing freedom for predefined rules, and only supports the following edits:

• Extend the description for the rule

  

• Edit tags for rules

  

  Attachment: Catalog of predefined rule tags

  https://docs.sonarqube.org/latest/user-guide/built-in-rule-tags/

Sonar creates a new custom rule

simple case

In simple cases, sonar only supports deriving rules from existing templates, with poor degrees of freedom

Currently sonar supports templates for custom rules: (JS, TS, HTML, XML

Based on these templates, only some simple error checking can usually be implemented, such as checking comments that match a regular expression

Case: see demo

Get rules through plugins

With some rule plugins, more rules can be obtained

The official plug-in list is mainly for Java, and there are basically no front-end related rule plug-ins

Here is just a way to get more rules

Write code rules yourself

See: https://docs.sonarqube.org/latest/extend/adding-coding-rules/

And: https://docs.sonarqube.org/latest/analysis/generic-issue/

(researching

Attachment 1: Configure sonar environment for VSCode

Install the sonarlint plugin

Search for Sonarlint on the VSCode plugin page

Connect sonarqube for vscode

See https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode#connected-mode

Attachment 2: Sonar's support for Vue files

Regarding Sonar's support for Vue, the official did not give a detailed description, only mentioned the support on the introduction page

Therefore, in order to test Sonar's support for Vue, the following experiments were performed:

• Vue file html part

  

  Test successful

• Vue file script part

  

  Test successful

• The style part of the vue file

  

  Test successful

Therefore, it shows that sonar can detect all three parts of the vue file normally.

Attachment 3: Reasons why the sonar rule does not work

In the initial scan of the demo, the problem of switch nesting does not seem to be checked out

Possible Causes:

• Error checking is step-by-step, and other errors need to be corrected after the existing errors are corrected×

• The relevant rule is not activated √

  By default, switch nested checks are not activated

  

• After rerunning, the error was checked out