eslint-plugin-angular-greensight

eslint plugin for angular project

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-angular-greensight:

npm install eslint-plugin-angular-greensight --save-dev

Then, install eslint-plugin-eslint-plugin:

npm install eslint-plugin-eslint-plugin@latest --save-dev

Then, install typescript-eslint/eslint-plugin:

npm install @typescript-eslint/eslint-plugin@latest --save-dev

Then, install typescript-eslint/parser:

npm install @typescript-eslint/parser@latest --save-dev

Then, install eslint-plugin-postcss-modules:

npm install -D eslint-plugin-postcss-modules

Usage

Create a .eslintrc.js configuration file at the root of your Angular project and add typescript-eslint/parser to the parser section of your .eslintrc configuration file :

{
    parser: "@typescript-eslint/parser",
}

Add plugin:postcss-modules/recommended to the extends section of your .eslintrc configuration file :

extends: [
    "plugin:postcss-modules/recommended",
  ],

Add angular-greensight to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix. And add @typescript-eslint to the plugins section also :

{
    plugins: [
        'angular-greensight',
        '@typescript-eslint',
        'postcss-modules'
    ]
}

Then configure the rules you want to use under the rules section.

{
    rules: {
        'angular-greensight/check-gitignore-items': 'warn',
        'angular-greensight/no-empty-files': 'error',
        'angular-greensight/no-explicit-any-variable': 'warn',
        // uncomment the below rule to further check the usage of 'any' keyword ex. on function parameter declaration etc... 
        //'@typescript-eslint/no-explicit-any': 'warn',
        'angular-greensight/no-unclosed-subscription': 'error',
        'postcss-modules/no-unused-class': 'warn',
        'angular-greensight/no-css-duplicate': 'error',
        'angular-greensight/check-image-attribute': 'warn',
        'angular-greensight/no-unused-dependencies': ['warn', {"ignoreDependencies" : []}],
    }
}

You can also add options to some rules if they are defined.

For the rule no-unused-dependencies, you can define some dependencies to be excluded by the rule in ignoreDependencies option.

{
    rules: {
        'angular-greensight/no-unused-dependencies': ['warn', {"ignoreDependencies" : ['@angular/forms', '@angular/compiler-cli']}],
    }
}

Finally, add the files extentions

{
    overrides: [
      {
        files: ['*.jsx', '*.js', '*.vue', '*.ts'],
      },
    ],
}

Optional: You can add the ignorePattern to ignore files, Ex:

{
    ignorePatterns: ["**/vendor.js"]
}

Link

The link of the plugin is : https://www.npmjs.com/package/eslint-plugin-angular-greensight

Commands

To run the plugin add first the script below in the package.json

{
  "scripts": {
      "lint": "eslint ."
    },
}

Then, run the commands lint and test.

npm run lint

How to import ESLint issues into SonarQube

Introduction

This documentation aims to guide you through the process of integrating SonarQube into an Angular project. SonarQube is a static code analysis tool that helps you detect and fix code errors, vulnerabilities, and quality issues. Follow the steps below to integrate SonarQube into your Angular project.

Prerequisites

Before you begin, make sure you have the following installed on your machine:

• SonarQube: Download and install SonarQube from the official website https://www.sonarsource.com/products/sonarqube/downloads/.

Step 1: Launch SonarQube

Start SonarQube by running the following command in a terminal:

.\bin\windows-x86-64\StartSonar.bat

Ensure that SonarQube is up and running on localhost:9000. You can access it through a web browser. If you encounter a port problem, change the port number sonar.web.port in the configuration file.

Step 2: Implementing Sonar in the Angular Project

Step 2.1: Install Sonar Scanner

Install the SonarQube scanner globally via npm with the following command:

npm install sonar-scanner --save-dev

Step 2.2: sonar.properties Configuration File

Create a sonar-project.properties configuration file at the root of your Angular project. Here is an example of the content:

sonar.host.url=http://localhost:9000
sonar.login=admin
sonar.password=admin
sonar.projectKey=demo-app
sonar.projectName=demo-app
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
sonar.sources=.
sonar.exclusions=**/node_modules/**
sonar.tests=.
sonar.test.inclusions=**/*.spec.ts
sonar.typescript.lcov.reportPaths=coverage/lcov.info

Make sure to replace the appropriate values for sonar.host.url, sonar.projectKey, sonar.projectName, the SonarQube login information, sonar.source and sonar.test.

Step 2.3: Add sonarqube_formatter.js

• Create sonarqube_formatter.js and place the file in the root of your Angular project.

module.exports = function(results) {
    var summary = {issues: []};
    results.forEach(function(result) {
        result.messages.forEach(function(msg) {
            var logMessage = {
                engineId: "eslint",
                ruleId: msg.ruleId,
                primaryLocation: {
                    message: msg.message,
                    filePath: result.filePath,
                    textRange: {
                        startLine: msg.line,
                        endLine: msg.endLine,
                        endColumn: msg.endColumn
                    }
                }
            };

            // The log message type and severity is up to you but you need to take in consideration SonarQube properties
            if (msg.severity === 1) {
                logMessage.type = "CODE_SMELL";
                logMessage.severity = "INFO";
            }
            if (msg.severity === 2) {
                logMessage.type = "BUG";
                logMessage.severity="MAJOR";
            }
            summary.issues.push(logMessage);
        });
    });
    return JSON.stringify(summary);
}

Step 2.4: Update Scripts in package.json with "sendReport"

• Open your Angular project's package.json file.
• Add a script to execute the SonarQube scanner. Here's an example:

{
  "scripts": {
    "sendReport": "eslint . -f ./sonarqube_formatter.js -o path_to_file/eslint_report.json & sonar-scanner"
  }
}

This allows you to run the scanner using the npm run sendReport command.

Step 2.5: Add a new configuration into the sonar-project.properties file

sonar.externalIssuesReportPaths = path_to_file/eslint_report.json

Step 2.6: Run npm run sendReport

Execute the SonarQube scanner using the npm command:

npm run sendReport

Step 3: View Errors in SonarQube

• After running the scanner, access the SonarQube web interface via http://localhost:9000.
• Log in with the credentials specified in the sonar-project.properties configuration file.
• Search for your project within the SonarQube interface to view analysis reports and code errors.