Tslint: grouped-imports not working with baseUrl set to "src"

Created on 23 Apr 2019 · 5Comments · Source: palantir/tslint

Bug Report

I don't know if this bug is more related to react-scripts than to tslint. :/

Linting does not group imports on react-scripts: 3.0.0.
Files from src seem to be considered as librairies

TSLint version: 5.16.0
TypeScript version: 3.3.4000
Running TSLint via: CLI

TypeScript code being linted

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Navbar from 'components/Navbar';
import Dashboard from 'pages/Dashboard';
import NoMatch from 'pages/NoMatch';
import Settings from 'pages/Settings';

with `tslint.json` configuration:

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "jsRules": {},
  "rules": {
    "quotemark": false,
    "object-literal-sort-keys": false,
    "ordered-imports": [
      true,
      {
        "grouped-imports": true
      }
    ],
    "interface-name": false,
    "jsx-boolean-value": false,
    "jsx-equals-spacing": false,
    "jsx-no-bind": true,
    "jsx-no-lambda": true,
    "jsx-self-close": true,
    "no-relative-imports": true,
    "no-var-requires": false,
    "member-ordering": false,
    "no-any": true
  },
  "linterOptions": {
    "exclude": [
      "*.json",
      "**/*.json"
    ]
  },
  "rulesDirectory": [
    "node_modules/tslint-microsoft-contrib"
  ]
}

with `tsconfig.json` configuration:

React-scripts asks for baseUrl to be set to src OR node_modules.

Would this be what causes tslint to behave wrongly ?

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

Actual behavior

import Navbar from 'components/Navbar';
import Dashboard from 'pages/Dashboard';
import NoMatch from 'pages/NoMatch';
import Settings from 'pages/Settings';
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

Expected behavior

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Navbar from 'components/Navbar';
import Dashboard from 'pages/Dashboard';
import NoMatch from 'pages/NoMatch';
import Settings from 'pages/Settings';

Bug 🌹 R.I.P. 🌹

Source

TomBerriot

All 5 comments

Looks essentially the same as #3654. I don't think ordered-imports looks at tsconfig path mapping or baseUrl.

IMO this kind of pattern is still pretty awkward and confusing to me as a code reader (same as https://github.com/palantir/tslint/issues/3654#issuecomment-358027681). There's no indication of whether "components/**" is importing from an NPM package or from a local source file.

adidahiya on 24 Apr 2019

👍1

@adidahiya I usually prefer the src/* (from "src/components/File", from "src/App") path style but I guess i can't accomplish this reading because of react-scripts forcing baseUrl as "src" (and not ".").
"paths" are not supported by react-scripts as of right now

TomBerriot on 24 Apr 2019

👍1

I have the same issue in react project (create-react-app 3). Do you have some news ?

Paths seems to be fix but what about _baseurl_ ts compiler options ?

Thanks for infos.

arnaudforaison on 10 Jul 2019

💀 _It's time!_ 💀

TSLint is deprecated and no longer accepting pull requests other than security fixes. See #4534. ☠️
We recommend you instead use typescript-eslint to lint your TypeScript code with ESLint. ✅

👋 It was a pleasure open sourcing with you!