Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gugadev opened this issue Apr 1, 2023 · 1 comment
Open

Comments

@gugadev
Copy link

gugadev commented Apr 1, 2023

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.

@ericaolliges
Copy link

ericaolliges commented Apr 18, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants