Configured eslint to ignore redundant files and work with plugins (#509)

* Configured eslint to ignore redundant files and use plugins * Updated versions * Renamed defaultRules to useDefaultConfig * Resolved review comments * Updated changelog
microsoft · Mar 29, 2024 · a2e8d09 · a2e8d09
1 parent 2f8529c
commit a2e8d09
Show file tree

Hide file tree

Showing 7 changed files with 293 additions and 260 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -2,6 +2,10 @@
 
 This page contains information about changes to the PowerBI Visual Tools (pbiviz).
 
+## 5.4.3
+* Fixed bug with missing plugins for Eslint.
+* New flag `--use-default` for `pbiviz package` and `pbiviz lint` commands. Use this command to lint files according to recommended lint config.
+
 ## 5.4.2
 * Added the **node: false** option to the webpack plugin to eliminate the use of the potentially dangerous **new Function()** method, which ensures compatibility with the Node.js runtime.
 * Introduced support for *.mjs ECMAScript modules.

diff --git a/bin/pbiviz.js b/bin/pbiviz.js
@@ -72,6 +72,7 @@ pbiviz
 pbiviz
     .command('lint')
     .option('--fix', 'Enable autofixing of lint errors')
+    .option('--use-default', 'Use recommended eslintrc file')
     .action(options => {
         CommandManager.lint({ ...options, verbose: true }, rootPath);
     });
@@ -100,6 +101,7 @@ pbiviz
     .option('-l, --all-locales', "Keeps all locale files in the package. By default only used inside stringResources folder locales are included.")
     .option('-v, --verbose', "Enables verbose logging")
     .option('--fix', 'Enable autofixing of lint errors')
+    .option('--use-default', 'Use recommended eslintrc file')
     .option('-p, --pbiviz-file <pbiviz-file>', "Path to pbiviz.json file (useful for debugging)", pbivizFile)
     .addOption(new Option('-c, --compression <compressionLevel>', "Enables compression of visual package")
         .choices(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'])

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-tools",
-  "version": "5.4.2",
+  "version": "5.4.3",
   "description": "Command line tool for creating and publishing visuals for Power BI",
   "main": "./bin/pbiviz.js",
   "type": "module",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/Microsoft/PowerBI-visuals-tools#readme",
   "dependencies": {
-    "@typescript-eslint/parser": "^6.17.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "assert": "^2.1.0",
     "async": "^3.2.5",
     "browserify-zlib": "^0.2.0",
@@ -40,13 +40,13 @@
     "console-browserify": "^1.2.0",
     "constants-browserify": "^1.0.0",
     "crypto-browserify": "^3.12.0",
-    "css-loader": "^6.8.1",
+    "css-loader": "^6.10.0",
     "domain-browser": "^5.7.0",
     "events": "^3.3.0",
     "extra-watch-webpack-plugin": "^1.0.3",
     "fs-extra": "^11.2.0",
     "https-browserify": "^1.0.0",
-    "inline-source-map": "^0.6.2",
+    "inline-source-map": "^0.6.3",
     "json-loader": "0.5.7",
     "jszip": "^3.10.1",
     "less": "^4.2.0",
@@ -55,7 +55,7 @@
     "lodash.defaults": "4.2.0",
     "lodash.isequal": "4.5.0",
     "lodash.ismatch": "^4.4.0",
-    "mini-css-extract-plugin": "^2.7.6",
+    "mini-css-extract-plugin": "^2.8.1",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "powerbi-visuals-webpack-plugin": "4.1.0",
@@ -74,17 +74,17 @@
     "url": "^0.11.3",
     "util": "^0.12.5",
     "vm-browserify": "^1.1.2",
-    "webpack": "^5.89.0",
+    "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "4.10.1",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.2"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-powerbi-visuals": "^0.8.1",
     "jasmine": "5.1.0",
     "jasmine-spec-reporter": "7.0.0",
-    "semver": "7.5.4",
+    "semver": "7.6.0",
     "tree-kill": "1.2.2",
     "webpack-cli": "^5.1.4"
   },

diff --git a/src/CommandManager.ts b/src/CommandManager.ts
@@ -1,9 +1,15 @@
 
 import { createCertificate } from './CertificateTools.js';
 import ConsoleWriter from './ConsoleWriter.js';
-import VisualManager, { LintOptions, GenerateOptions } from './VisualManager.js';
+import VisualManager, { GenerateOptions } from './VisualManager.js';
 import { WebpackOptions } from './WebPackWrap.js';
 
+export interface LintOptions {
+    verbose: boolean;
+    fix: boolean;
+    useDefault: boolean;
+}
+
 interface StartOptions {
     port: number;
     stats: boolean;
@@ -24,6 +30,7 @@ interface PackageOptions {
     verbose: boolean;
     fix: boolean;
     pbivizFile: string;
+    useDefault: boolean; // related to Eslint config
 }
 
 interface NewOptions {
@@ -83,6 +90,7 @@ export default class CommandManager {
         const lintOptions: LintOptions = {
             verbose: options.verbose,
             fix: options.fix,
+            useDefault: options.useDefault
         }
         const visual = new VisualManager(rootPath).prepareVisual(options.pbivizFile)
         await visual.runLintValidation(lintOptions)

diff --git a/src/LintValidator.ts b/src/LintValidator.ts
@@ -1,36 +1,44 @@
 import { ESLint } from "eslint";
+import path from 'path';
+import fs from 'fs';
 
 import ConsoleWriter from "./ConsoleWriter.js";
-import { LintOptions } from "./VisualManager.js";
+import { LintOptions } from "./CommandManager.js";
 import { fileExists, getRootPath } from "./utils.js";
 
 export class LintValidator {
 
     private visualPath: string;
     private rootPath: string;
+    private isVerboseMode: boolean;
+    private useDefault: boolean;
+    private shouldFix: boolean;
     private config: ESLint.Options;
-    private defaultConfig: ESLint.Options;
     private linterInstance: ESLint;
 
-    constructor(fix: boolean = false) {
+    constructor({verbose, fix, useDefault}: LintOptions) {
         this.visualPath = process.cwd()
         this.rootPath = getRootPath();
-        this.prepareConfig(fix);
+        this.isVerboseMode = verbose;
+        this.useDefault = useDefault;
+        this.shouldFix = fix;
+
+        this.prepareConfig();
         this.linterInstance = new ESLint(this.config);
     }
 
     /**
      * Runs lint validation in the visual folder
      */
-    public async runLintValidation({ verbose, fix }: LintOptions) {
+    public async runLintValidation() {
         ConsoleWriter.info("Running lint check...");
         // By default it will lint all files in the src of current working directory, but some files can be excluded in .eslintignore
-        const results = await this.linterInstance.lintFiles("src/**/*");
+        const results = await this.linterInstance.lintFiles("src/");
 
-        if (fix) {
+        if (this.shouldFix) {
             await this.fixErrors(results);
         }
-        await this.outputResults(results, verbose);
+        await this.outputResults(results);
         ConsoleWriter.info("Lint check completed.");
     }
 
@@ -39,8 +47,8 @@ export class LintValidator {
         await ESLint.outputFixes(results);
     }
 
-    private async outputResults(results: ESLint.LintResult[], verbose: boolean) {
-        if (verbose) {
+    private async outputResults(results: ESLint.LintResult[]) {
+        if (this.isVerboseMode) {
             const formatter = await this.linterInstance.loadFormatter("stylish");
             const formattedResults = await formatter.format(results);
             console.log(formattedResults)
@@ -55,33 +63,42 @@ export class LintValidator {
         }   
     }
 
-    private prepareConfig(fix: boolean) {
-        this.defaultConfig = {
-            overrideConfig: {
-                env: {
-                    browser: true,
-                    es6: true,
-                    es2022: true
-                },
-                plugins: [
-                    "powerbi-visuals"
-                ],
-                extends: [
-                    "plugin:powerbi-visuals/recommended"
-                ]
-            },
-            extensions: [".ts", ".tsx"],
-            resolvePluginsRelativeTo: this.rootPath,
-            useEslintrc: false,
-            fix
+    private prepareConfig() {
+        const requiredConfig = {
+            extensions: [".js", ".jsx", ".ts", ".tsx"],
+            fix: this.shouldFix,
+            resolvePluginsRelativeTo: this.getPluginPath()
         }
-
-        const eslintrcExtensions = ['.json', '.js', '.ts']
-        if (eslintrcExtensions.some(el => fileExists(this.visualPath, `.eslintrc${el}`))){
-            this.config = { fix }
+        const eslintrcExtensions = ['.json', '.js', '.cjs', '.ts', '']
+        if (!this.useDefault && eslintrcExtensions.some(el => fileExists(this.visualPath, `.eslintrc${el}`))){
+            this.config = requiredConfig
         } else {
-            ConsoleWriter.warning("No .eslintrc file found in the visual folder. Using default config.")
-            this.config = this.defaultConfig
+            ConsoleWriter.warning("Using recommended eslint config.")
+            this.config = {
+                ...requiredConfig,
+                overrideConfig: {
+                    env: {
+                        browser: true,
+                        es6: true,
+                        es2022: true
+                    },
+                    plugins: [
+                        "powerbi-visuals"
+                    ],
+                    extends: [
+                        "plugin:powerbi-visuals/recommended"
+                    ]
+                },
+                useEslintrc: false,
+            }
         }
     }
+
+    private getPluginPath() {
+        const pluginPaths = [
+            path.resolve(this.visualPath, "node_modules", "eslint-plugin-powerbi-visuals"),
+            path.resolve(this.rootPath, "node_modules", "eslint-plugin-powerbi-visuals")
+        ]
+        return pluginPaths.find(fs.existsSync)
+    }
 }
diff --git a/src/VisualManager.ts b/src/VisualManager.ts
@@ -42,17 +42,13 @@ import { FeatureManager, Logs, Status } from "./FeatureManager.js";
 import { Severity, Stage } from "./features/FeatureTypes.js";
 import TemplateFetcher from "./TemplateFetcher.js";
 import { LintValidator } from "./LintValidator.js";
+import { LintOptions } from "./CommandManager.js";
 
 export interface GenerateOptions {
     force: boolean;
     template: string;
 }
 
-export interface LintOptions {
-    verbose: boolean;
-    fix: boolean;
-}
-
 const globalConfig = readJsonFromRoot('config.json');
 const PBIVIZ_FILE = 'pbiviz.json';
 
@@ -85,9 +81,17 @@ export default class VisualManager {
         return this;
     }
 
-    public runLintValidation(options: LintOptions) {
-        const linter = new LintValidator(options.fix);
-        linter.runLintValidation(options);
+    public async runLintValidation(options: LintOptions) {
+        try {
+            const linter = new LintValidator(options);
+            await linter.runLintValidation();
+        } catch (error) {
+            ConsoleWriter.error("Can't run lint validation.");
+            if(options.verbose) {
+                ConsoleWriter.error(error.message);
+            }
+        }
+
     }
 
     public createVisualInstance() {