Loading...

Power Apps ESLint plugin replaces Solution Checker for TypeScript code

Power Apps ESLint plugin replaces Solution Checker for TypeScript code

The Power Apps team have had a long-standing quality tool called the Solution Checker. This was built into the Dataverse solution management interface, ALM Power Platform Build Tools and even a PowerShell version. The challenge with the Solution Checker has always been that by the time you find out about the issues, it's often too late and the solution has been committed to source control and is already in the CI/CD pipeline, and furthermore the results were often false positives due to the way that TypeScript 'transpiles' into JavaScript.

Now the Power Apps team have released an ESLint plugin that gives you warnings and errors as you write your code (if you have the eslint extension installed), or when you run ESLint at the command line.

I've previously written on using ESLint in your development environment - and this is a really welcome addition to the rule set. 

At this time, the rule-set is most applicable for Web Resource development at the moment with the majority describing deprecations, however, it is certainly worth adding them to PCF projects as well (alongside the other react recommended rules).

To install you use:

npm install @microsoft/eslint-plugin-power-apps --save-dev

To add to your existing .eslint.json file, add @microsoft/power-apps to the plugins section:

"plugins": [
    ...
    "@microsoft/power-apps"
],

Then add each of the rules to the rules section with the level you want to enforce: 

"rules": {
  "@microsoft/power-apps/avoid-2011-api": "error",
  "@microsoft/power-apps/avoid-browser-specific-api": "error",
  "@microsoft/power-apps/avoid-crm2011-service-odata": "warn",
  "@microsoft/power-apps/avoid-crm2011-service-soap": "warn",
  "@microsoft/power-apps/avoid-dom-form-event": "warn",
  "@microsoft/power-apps/avoid-dom-form": "warn",
  "@microsoft/power-apps/avoid-isactivitytype": "warn",
  "@microsoft/power-apps/avoid-modals": "warn",
  "@microsoft/power-apps/avoid-unpub-api": "warn",
  "@microsoft/power-apps/avoid-window-top": "warn",
  "@microsoft/power-apps/do-not-make-parent-assumption": "warn",
  "@microsoft/power-apps/use-async": "error",
  "@microsoft/power-apps/use-cached-webresource": "warn",
  "@microsoft/power-apps/use-client-context": "warn",
  "@microsoft/power-apps/use-global-context": "error",
  "@microsoft/power-apps/use-grid-api": "warn",
  "@microsoft/power-apps/use-navigation-api": "warn",
  "@microsoft/power-apps/use-offline": "warn",
  "@microsoft/power-apps/use-org-setting": "error",
  "@microsoft/power-apps/use-relative-uri": "warn",
  "@microsoft/power-apps/use-utility-dialogs": "warn"
}

I would really like to see a recommended set of rules that can be used like other ESLint rule sets, so when more rules are added we don't need to explicitly add them to the config. If you agree - please consider upvoting my suggestions!

My .esconfig looks something like the following for a Web Resource project:

{
  "parser": "@typescript-eslint/parser",
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true,
    "jasmine": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier",
    "plugin:sonarjs/recommended"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint",
    "prettier",
    "@microsoft/power-apps",
    "sonarjs"
  ],
  "ignorePatterns": [
    "**/generated/*.ts"
  ],
  "rules": {
    "prettier/prettier": "error",
    "eqeqeq": [
      2,
      "smart"
    ],
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "linebreak-style": [
      "error",
      "windows"
    ],
    "quotes": [
      "error",
      "double"
    ],
    "semi": [
      "error",
      "always"
    ],
    "@microsoft/power-apps/avoid-2011-api": "error",
    "@microsoft/power-apps/avoid-browser-specific-api": "error",
    "@microsoft/power-apps/avoid-crm2011-service-odata": "warn",
    "@microsoft/power-apps/avoid-crm2011-service-soap": "warn",
    "@microsoft/power-apps/avoid-dom-form-event": "warn",
    "@microsoft/power-apps/avoid-dom-form": "warn",
    "@microsoft/power-apps/avoid-isactivitytype": "warn",
    "@microsoft/power-apps/avoid-modals": "warn",
    "@microsoft/power-apps/avoid-unpub-api": "warn",
    "@microsoft/power-apps/avoid-window-top": "warn",
    "@microsoft/power-apps/do-not-make-parent-assumption": "warn",
    "@microsoft/power-apps/use-async": "error",
    "@microsoft/power-apps/use-cached-webresource": "warn",
    "@microsoft/power-apps/use-client-context": "warn",
    "@microsoft/power-apps/use-global-context": "error",
    "@microsoft/power-apps/use-grid-api": "warn",
    "@microsoft/power-apps/use-navigation-api": "warn",
    "@microsoft/power-apps/use-offline": "warn",
    "@microsoft/power-apps/use-org-setting": "error",
    "@microsoft/power-apps/use-relative-uri": "warn",
    "@microsoft/power-apps/use-utility-dialogs": "warn"
  }
}

 

Note: This uses the prettier and sonarjs plugins that you will also need to install.

I also add the following scripts to my package.json:

"lint": "eslint **/*.ts",
"lint:fix": "npm run lint -- --fix",

These then allow you to run the rules across the entire project and automatically fix them where possible using npm run lint:fix.

I really love how the solution package has evolved into this set of pro-coder-friendly ESLint rules. I can't wait to see how it develops with more rules over time.

Read more on the official blog post from Microsoft.

Take a look at the npm package information for eslint-plugin-power-apps.

Published on:

Learn more
Develop 1 - Dynamics 365 Architecture Services
Develop 1 - Dynamics 365 Architecture Services

Share post:

Related posts

Build intelligent and scalable solutions with Microsoft Power Apps and Microsoft Power Platform 

In this blog post and the accompanying demo video, we want to highlight what is possible with Microsoft Power Apps and Microsoft Power Platfor...

2 days ago

How to create a new Prospect in Power Apps based Project tracking tool?

Here are the steps to perform to create a new Prospect in Power Apps based Project Tracking system. Read more about the Prospect and Project M...

3 days ago

How to Integrate Power Apps with Microsoft Planner using Microsoft Teams

This blog will thoroughly explore the seamless integration of Power Apps with Microsoft Planner to effectively create and assign tasks to user...

3 days ago

Refresh a roll-up field in Power Apps using the Web API

In this blogpost, we will learn to refresh a roll-up field in Power Apps / Dynamics 365 using the Web API. Before we begin, ensure you subscri...

3 days ago

Set an app (Model-driven or Canvas App) as a startup app – Power Apps Mobile

Microsoft has introduced a new feature, through which we can now specify a particular app as a start-up app, that will open up when we launch ...

4 days ago

How to create a new Project in Power Apps based Project tracking tool?

Here are the steps to perform to create a new Project in Power Apps based Project Tracking system. Read more about the Prospect and Project Ma...

4 days ago
Stay up to date with latest Microsoft Dynamics 365 and Power Platform news!
* Yes, I agree to the privacy policy