trivago / prettier-plugin-sort-imports

A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.
Apache License 2.0
3.25k stars 128 forks source link

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

Open gugadev opened 1 year ago

gugadev commented 1 year ago

Environment

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.

ericaolliges commented 1 year ago

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" } } ]