Tslint: Linting while running webpack raise error (lacking type info)

[Simply007]

Bug Report

• __TSLint version__: [email protected]
• __TypeScript version__: [email protected]
• __Running TSLint via__: Node.js API (using webpack)

TypeScript code being linted (Not dependent on code)

import { pageBuilder } from "@/pageBuilder";
import "../dist/components";

window.kentico = window.kentico || {};
window.kentico.pageBuilder = pageBuilder;

with tslint.json configuration:

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {
    "indent": [true, "spaces", 2],
    "interface-name": [
      false
    ],
    "no-default-export": true,
    "no-unused-variable": true,
    "object-literal-sort-keys": [true, "ignore-case", "match-declaration-order", "shorthand-first"], 
    "max-line-length": [true, 180]
  },
  "rulesDirectory": []
}

I am also getting that underlined in vscode with message (but it is may separate issue):

Array has too many items. Expected {0} or fewer.

Webpack config part

module.exports = {
  entry: ['./src/main.ts', './src/assets/styles/icon-font-face.scss'],
  output: isProduction ? productionOutput : devOutput,
  module: {
    rules: [
    ........,
    {
      test: /\.tsx?$/,
      use: [
        'babel-loader',
        {
          loader: 'ts-loader',
          options: { // Dont thing is related
            appendTsSuffixTo: [/\.vue$/],
          }
        },
        'tslint-loader'  // <--- Here is the linter configured
      ],
      exclude: /node_modules/
    },

Actual behavior

While running webpack, I am getting the error:

CENSORED\Client\src\main.tsError: object-literal-sort-keys needs type info to use "match-declaration-order".
    at Rule.apply (CENSORED\Client\node_modules\tslint\lib\rules\objectLiteralSortKeysRule.js:45:19)
    at Linter.applyRule (CENSORED\Client\node_modules\tslint\lib\linter.js:197:29)
    at CENSORED\Client\node_modules\tslint\lib\linter.js:139:85
    at Object.flatMap (CENSORED\Client\node_modules\tslint\lib\utils.js:151:29)
    at Linter.getAllFailures (CENSORED\Client\node_modules\tslint\lib\linter.js:139:32)
    at Linter.lint (CENSORED\Client\node_modules\tslint\lib\linter.js:99:33)
    at lint (CENSORED\Client\node_modules\tslint-loader\index.js:70:10)
    at Object.module.exports (CENSORED\Client\node_modules\tslint-loader\index.js:140:3)
    at LOADER_EXECUTION (CENSORED\Client\node_modules\loader-runner\lib\LoaderRunner.js:119:14)
    at runSyncOrAsync (CENSORED\Client\node_modules\loader-runner\lib\LoaderRunner.js:120:4)
    at iterateNormalLoaders (CENSORED\Client\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
    at Array.<anonymous> (CENSORED\Client\node_modules\loader-runner\lib\LoaderRunner.js:202:4)
    at Storage.finished (CENSORED\Client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:40:15)
    at CENSORED\Client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:77:9
    at CENSORED\Client\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)

Expected behavior

no error while linting

[Simply007]

There is a sample project for reproducing the error:
https://github.com/Simply007/tslint/tree/master/typescript-match-declaration-order

There is used rule in tslint.json
"object-literal-sort-keys": [true, "ignore-case", "match-declaration-order", "shorthand-first"]
from documentation
https://palantir.github.io/tslint/rules/object-literal-sort-keys/

"match-declaration-order" is causing the error

just run:

npm install
npm run build

[shockthetoast]

I'm not using Webpack, but I am getting the same "Array has too many items. Expected {0} or fewer."message on my tslint.json file in vscode. I am also using the exact same rule:

"object-literal-sort-keys": [true, "ignore-case", "match-declaration-order", "shorthand-first"]

For me, this issue goes away if I delete any of the three string options. (It also goes away if I delete the boolean option, but then I get the expected error Incorrect type. Expected "boolean".

[sjmcdowall]

I as well! Just to chime in..

[adidahiya]

The error tells you that you need to configure tslint to use type information. Seems like a tslint-loader configuration issue.

[sjmcdowall]

How does that error mean that @adidahiya ?? And maybe a more specific hint as to what configuration? Your link isn't very helpful and is fairly generic. I am having no problems with TSLINT at all EXCEPT when I tried to add a 4th parameter to the very specific object-literal-sort-keys .. then it says it's expecting only 3. That seems like a bug in the tslint logic that isn't allowing 4 parameters.. And I think my tslint is configured to use Type Information -- at least I have a project file and configuration file -- and have had for a while.

Cheers

[JoshuaKGoldberg]

Client\src\main.tsError: object-literal-sort-keys needs type info to use "match-declaration-order".

@sjmcdowall The type information link from adidahiya goes over how type information works with some TSLint rules. object-literal-sort-keys is an example of these and is an optionally typed rule, meaning it can have extra behavior added when provided with type information (a tsconfig.json). The match-declaration-order option requires type information to be able to tell what that declaration order is.

The issue here is that, in order to have the TSLint running in Webpack via tslint-loader use that option, you need to provide type information tslint-loader's configuration. See https://github.com/wbuchwalter/tslint-loader#loader-options.

Closing the issue as there's nothing actionable on TSLint's end, but please do comment here if that's not enough info to go off of!

[sjmcdowall]

Thanks @JoshuaKGoldberg -- I will follow the link etc. and see if that fixes the issue!