trivago/prettier-plugin-sort-imports

Plugin seems to be ignored when babel-ts parser is used for .tsx files

gugadev opened this issue · 1 comments

Environment

  • OS: macOS Ventura (13.3)
  • Prettier version: 2.8.6
  • node version: 16.16.0
  • package manager: npm v8.11.0
  • IDE: VSCode stable

Describe the bug

The plugin doesn't works when babel-ts is used as parser for .tsx files. However, it works well with .ts files.

Expected behavior

Actual imports:

import {
  type ComponentProps,
  type FC,
  useState,
  useEffect,
  useMemo
} from "react"
import { isNullOrUndefined } from "@mep/libs"
import { type GtmTrackingService, Logger, DI } from "@mep/infra" // this should be put before @mep/libs
import { type Token } from "~/domain/models/token"
import { type User } from "~/domain/models/user"
import { type SessionService } from "~/domain/services/session/session-service"
import { type CrmService } from "~/domain/types/external-dependencies"
import { Splash } from "~/presentation/components/splash/splash"
import { useRefreshToken } from "~/presentation/hooks/use-get-refresh-token/use-refresh-token"
import { useGetToken } from "~/presentation/hooks/use-get-token/use-get-token"
import { useGetUser } from "~/presentation/hooks/use-get-user/use-get-user"
import { useLogout } from "~/presentation/hooks/use-logout/use-logout"
import {
  AuthContext,
  type AuthContextType
} from "~/presentation/contexts/auth-context/auth-context"

Expected imports:

import {
  type ComponentProps,
  type FC,
  useState,
  useEffect,
  useMemo
} from "react"
import { type GtmTrackingService, Logger, DI } from "@mep/infra" // this should be put before @mep/libs
import { isNullOrUndefined } from "@mep/libs"
import { type Token } from "~/domain/models/token"
import { type User } from "~/domain/models/user"
import { type SessionService } from "~/domain/services/session/session-service"
import { type CrmService } from "~/domain/types/external-dependencies"
import { Splash } from "~/presentation/components/splash/splash"
import { useRefreshToken } from "~/presentation/hooks/use-get-refresh-token/use-refresh-token"
import { useGetToken } from "~/presentation/hooks/use-get-token/use-get-token"
import { useGetUser } from "~/presentation/hooks/use-get-user/use-get-user"
import { useLogout } from "~/presentation/hooks/use-logout/use-logout"
import {
  AuthContext,
  type AuthContextType
} from "~/presentation/contexts/auth-context/auth-context"

Configuration File (.prettierrc.cjs)

module.exports = {
  plugins: ["@trivago/prettier-plugin-sort-imports"],
  singleQuote: false,
  trailingComma: "none",
  printWidth: 80,
  bracketSpacing: true,
  tabWidth: 2,
  semi: false,
  endOfLine: "auto",
  overrides: [{ files: ["*.tsx"], options: { parser: "babel-ts" } }],
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrder: [
    "^./*.*.scss",
    "<THIRD_PARTY_MODULES>",
    "^@mep/infra",
    "^@mep/libs",
    "^~/domain",
    "^~/presentation",
    "^[./]",
  ],
  importOrderSeparation: false,
  importOrderSortSpecifiers: true,
  importOrderMergeDuplicateImports: true,
  importOrderCombineTypeAndValueImports: true
}

Error log

There is no error log. Prettier works, but without the plugin:

["INFO" - 11:06:33 PM] Formatting file:///Users/gugadev/Development/Pacifico/mep-web/packages/auth/src/presentation/components/auth-web/auth-web.tsx
["INFO" - 11:06:33 PM] Using config file at '/Users/gugadev/Development/Pacifico/mep-web/packages/auth/.prettierrc.cjs'
["INFO" - 11:06:33 PM] Using ignore file (if present) at /Users/gugadev/Development/Pacifico/mep-web/packages/auth/.prettierignore
["INFO" - 11:06:33 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel-ts"
}
["INFO" - 11:06:33 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 11:06:33 PM] Prettier Options:
{
  "filepath": "/Users/gugadev/Development/Pacifico/mep-web/packages/auth/src/presentation/components/auth-web/auth-web.tsx",
  "parser": "babel-ts",
  "plugins": [
    "/Users/gugadev/Development/Pacifico/mep-web/node_modules/@ianvs/prettier-plugin-sort-imports/lib/src/index.js"
  ],
  "singleQuote": false,
  "trailingComma": "none",
  "printWidth": 80,
  "bracketSpacing": true,
  "tabWidth": 2,
  "semi": false,
  "endOfLine": "auto",
  "importOrderParserPlugins": [
    "typescript",
    "jsx",
    "decorators-legacy"
  ],
  "importOrder": [
    "^./*.*.scss",
    "<THIRD_PARTY_MODULES>",
    "^@mep/infra",
    "^@mep/libs",
    "^~/domain",
    "^~/presentation",
    "^[./]"
  ],
  "importOrderSeparation": false,
  "importOrderSortSpecifiers": true,
  "importOrderMergeDuplicateImports": true,
  "importOrderCombineTypeAndValueImports": true
}
["INFO" - 11:06:33 PM] Formatting completed in 18ms.

Thank you.

I've found that this bug also applies to .ts files when the override configuration focuses on typescript files either alone or in addition to .tsx files inside .prettierrc. This is the override block that I'm using in my project, previously it included "*.tsx" in addition to "*.ts", but the .tsx override was removed because of this bug.

"overrides": [ { "files": ["*.ts"], "options": { "parser": "babel-ts" } } ]