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 moreRelated posts
Boost Reusability and Performance in Power Apps Controls Framework with Dependent Libraries
In this blog, we’ll explore how using dependent libraries can significantly improve maintainability, reusability, and performance in Power App...
Does Copilot help us write good expressions in Power Apps?
It is Friday and I thought to get the weekend started I try-out Copilot to generate an expression for me. When using Copilot it is so easy to ...
How to use the Azure AI Foundry connector in Power Apps
Yesterday I looked at how to use the Azure AI Foundry connector in Power Automate today I'm doing the same within Power Apps, creating a Q...
Power Apps – Edit new and existing tables in Plan designer
We are announcing the ability to edit new and existing tables in Plan designer, ensuring a seamless integration between the Plan designer and ...
The refresh token has expired due to inactivity when connecting to Power Pages using Power Apps CLI – Quick Fix
Hi Folks, This post is about a quick fix for an error occurred with Power Apps CLI. I was trying to connect to my organization using CLI and t...
Reimagining human-agent collaboration for a new era of app development with Microsoft Power Apps
Today, we’re announcing three major updates that bring the Microsoft Power Apps vision to life. The post Reimagining human-agent collaboration...
Power Apps – Makers can select from existing apps when using the plan designer
We are announcing the ability to select from existing apps when using the plan designer in Power Apps. This feature will reach general availab...
Transform Your Power Apps UI with SVG Animations
Power Platform admin center – View usage and value metrics for Copilot agents in Power Apps
We are announcing the ability to view usage and value metrics for Copilot agents in Power Apps in Copilot hub in the Power Platform admin cent...