'ComponentFramework' is not defined - eslint with pac pcf init

At some point, over the last few months, a change was introduced to the Power Platform CLI such that if you have the ESLint VS Code add-in installed, after using pac pcf init, you may see an error in VS code:

• 'ComponentFramework' is not defined.eslint(no-undef)

This might look something like this in the index.ts file:

The reason for this is that the pac pcf init template now includes an .eslintrc.json however, it is configured to use JavasScript rules rather than TypeScript ones.

To fix this you simply need to edit the .eslintrc.json  file.

Find the extends section and replace the standard ruleset with;

"extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ]

You also might see some other odd errors such as:

• Unexpected tab character.eslint(no-tabs)
• Mixed spaces and tabs.eslint(no-mixed-spaces-and-tabs)

The reason for this is that the template used to create the index.ts file contains a mix of tabs and spaces for indentation. eslint is warning about this - so you can either add the following lines to the top of the file, or you can change the indentation to use spaces using the Format Document command.

/* eslint-disable no-mixed-spaces-and-tabs */
/* eslint-disable no-tabs */

Hope this helps!