PCF Controls Tips and Tricks : How to skip Linting at Build-Time

Have you ever been unable to properly build a PCF control because of linting errors? Well, lately I have, and it can get really frustrating. Especially when the errors have nothing to do with your code, but are caused by an unexpected failure in the way the PCF framework handles the linting process.

Turns out I’m not alone as other members of the PCF community like Charles Channon have recently flagged linting issues with recent pcf-scripts releases.

In this post, I’ll show you how I found a way to skip linting during the PCF control build process. This keeps you focused on building and deploying your controls, even if the linter crashes.

But while we are at it, let’s talk about what linting is and how it’s implemented in PCF projects.

Linting in PCF controls

In a nutshell, linting is a static code analysis process that checks your code for errors, potential bugs, and style violations. By enforcing coding standards, it helps catch problems early in the development cycle, and improve overall code quality.

Many projects run linting automatically during builds, commits, and even within the IDE during development to catch issues early.

The PCF framework integrates ESLint, a popular linting tool, into the scaffolded code generated by the pac pcf init command. When a PCF project is initialized, a file named eslint.config.mjs is added to the project structure.

The eslint.config.mjs file contains a set of recommended rules, along with a rules section that you can customize to your liking. There’s a lot more more to dive into, but that’s beyond the scope of this post.

With proper setup in your IDE this will make you editor scream when rules are infringed.

In typical TypeScript projects, linting is generally under your control and can be executed on demand. But in PCF control development, linting is baked into the build process. The pcf-scripts package runs ESLint every single time you call npm run build.

While this setup works well in an ideal world, I’ve occasionally run into unexpected crashes during the linting step.

In my experience, these issues rarely relate to actual linting rules. They usually stem from deeper configuration quirks or conflicts with other dependencies. It’s really annoying and makes it impossible to move on.

So, let’s look at how we can separate the linting step from the PCF build,

Skipping Linting during PCF Build

With a bit of reverse engineering, I tracked down the part of the pcf-scripts package where the linting task is invoked during the build.

Located deep in node_modules\pcf-scripts\tasks\validateTask.js, I discovered that linting could be skipped if context.getSkipBuildLinting() returned true. Looks promising, but how is this property set ?

I figured out that the build context was defined in this file node_modules\pcf-scripts\buildContext.js, and found that getSkipBuildLinting() gets is value from a configuration switch. Getting closer…

Digging further, I found that the context object is configured in node_modules\pcf-scripts\buildConfig.js. I’m nearly there, I can tell…

From there, I traced the configuration source to node_modules\pcf-scripts\constants.js, where the constant CONFIGURATION_FILE_NAME revealed that the settings are loaded from the project’s own pcfconfig.json. BINGO!.

💡That’s when it clicked—and I knew I had blog post material on my hands.

Now, by simply adding a line of code to the pcfconfig.json and setting skipBuildLinting to true…

…we can see that the Linting step gets properly skipped when we build the control. 😎

By doing this, I was able to decouple linting from the build, and go back to the real development of the control.

Also, like Charles Channon pointed out in the LinkedIn post mentioned earlier, you can still run EsLint manually at any time using a command that doesn’t rely on the PCF framework. The best of both worlds!

npx eslint './**/*.{ts,tsx}' --format stylish

TakeAway

Linting is a powerful tool that helps keep your code clean, consistent, and error-free. It’s important for any serious project. But sometimes, you just need to get things done and can’t afford to be blocked by unexpected linting crashes.

In PCF projects, linting is enforced as part of the build by default. But, you can skip the linting step by adding "skipBuildLinting": true to your pcfconfig.json file—something that’s not officially documented, but works.

You can still run linting manually at any time using a standalone command that bypasses the PCF Framework scripts.

Hope this helps!

I haven't needed to build a #PCF in a few months, but just initted one and hit a strange error related to the eslint formatter. | Charles Channon

I haven't needed to build a #PCF in a few months, but just initted one and hit a strange error related to the eslint formatter. For some reason, it kept spitting out an empty error (no warnings or errors, just a flat failure) – this appears to be an issue in the pcf-scripts invocation of eslint and the default formatter. The fix is easy: don't rely on pcf-scripts to lint for you: just invoke eslint yourself with: “`
npx eslint './**/*.{ts,tsx}' –format stylish
“`

Find and fix problems in your JavaScript code – ESLint – Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.