Intro

This package provide strict ESLint rule which can be consistent across Setel. On top of that the package also provides formatter which turns ESLint errors and warnings into a single HTML page.

Getting Started

Installation

1. Run npm install @setel/eslint-config-setel --dev in your repo
2. Add / Update package.json by adding "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" -f ./node_modules/@setel/eslint-config-setel/dist/formatter.js --output-file .eslint/index.html"
3. Update eslintrc.js to

   1. module.exports = {
        parserOptions: { project: 'tsconfig.json', sourceType: 'module' },
        extends: ["@setel/eslint-config-setel"],
        root: true,
        rules: {}
      };

   2. If you encounter any error on eslintrc.js file
      1. Remove any eslint configs
      2. Do clean npm install
      3. Make sure tsconfig.json follows

         1. {
                "compilerOptions": {
                    "module": "commonjs",
                    "declaration": true,
                    "removeComments": true,
                    "emitDecoratorMetadata": true,
                    "experimentalDecorators": true,
                    "allowSyntheticDefaultImports": true,
                    "target": "es2017",
                    "sourceMap": true,
                    "outDir": "./dist",
                    "baseUrl": "./",
                    "incremental": true,
                    "skipLibCheck": true
                },
                "include": ["src", "test", ".eslintrc.js"],
                "exclude": [ "node_modules", "dist" ]
            }

4. Run npm run lint in your terminal
5. You should see .eslint/index.html file.

Build the package

1. Run npm run build
   1. This will run tsc
2. Javascript files can be viewed at ./dist/*

Architecture

ESLint

ESLint extends @typescript-eslint/eslint-recommended, @typescript-eslint/recommended, eslint-plugin-sonarjs and prettier. This is defined in index.js.

Formatter

ESLint will pass two objects results and context to formatter. Result object has the following type:

 {
    filePath: string;
    messages: {
        ruleId: string; // keys of context.rulesMeta
        severity: number; // 1 = warning , 2 = error 
        message: string;
        line: number;
        column: number;
        nodeType: string; // the type of the node in the AST
    }[];
    errorCount: number;
    warningCount: number;
    fixableErrorCount: number;
    fixableWarningCount: number;
    source: string // entire file
}[]

Context object has the following type:

{
    cwd: string; //  The current working directory
    maxWarningsExceeded: {
        maxWarnings: number;
        foundWarnings: number;
    };
    rulesMeta: {
        string: {
            type: string; // "problem", "suggestion", or "layout":
            docs: {
                description: string;
                recommended: boolean;
                url: string; // link to actual error description in github or npm
            };
            fixable: string; // "code" or "whitespace"
            schema: []
        }
    };
}

Further details can be found here

Formatter will go over items in Result array and get the rule using ruleId and form and accordion for each file.

Formatter will produce HTML including CSS and JS scripts.