Catching errors with the lint:eslint script in the lit typescript starter project?

Question

I'm testing the lint:eslint script in the lit element typescript starter project.

I added a property with undefined any like this below the name property:

  /**
   * The name to say "Hello" to.
   */
  @property()
  name = 'World';

  test;

And the vscode linter catches this, but when I run npm run lint:eslint it does not catch it.

The linter is configured like this, so it seems that it should.

{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "env": {
    "browser": true
  },
  "rules": {
    "no-prototype-builtins": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_"
      }
    ]
  },
  "overrides": [
    {
      "files": ["rollup.config.js", "web-test-runner.config.js"],
      "env": {
        "node": true
      }
    },
    {
      "files": [
        "*_test.ts",
        "**/custom_typings/*.ts",
        "packages/labs/ssr/src/test/integration/tests/**",
        "packages/labs/ssr/src/lib/util/parse5-utils.ts"
      ],
      "rules": {
        "@typescript-eslint/no-explicit-any": "off"
      }
    }
  ]
}

I'm expecting the "@typescript-eslint/no-explicit-any": "error", rule to fire on the test property added without the any explicit type in the my-element.ts web component.

Thoughts?

Answer 1

I think perhaps the stack is just outdated. I ended up using typescript-eslint instead, and the setup is pretty simple.

For example

mkdir tstest
cd tstest
npm init -y
mkdir src

In the src directory create the file test.ts with this content:

class Person {
  name: string;
}

Then install the dependencies:

npm install --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint

Create the eslint.config.js configuration with the recommended settings:

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
);

And run npx eslint .. It lints as expected.