Prettier对createAsyncThunk代码报错，TypeScript/ESLint未捕获原因排查

我在使用Prettier格式化代码时，所有createAsyncThunk相关的代码都抛出了语法错误，但这些代码在TypeScript编译和ESLint检查中完全正常，没有任何报错。

报错示例 #

• src\store\slices\calendarActionsSlice.ts: SyntaxError: Missing initializer in const declaration. (37:73)

export const getDateRangeActions = createAsyncThunk<IInitialState, number, { rejectValue: unknown }>(

• src\store\slices\calendarSlice.ts: SyntaxError: Unexpected token (54:76)

const fetchRoot = createAsyncThunk<{ message: string, calendar: IDayStorage[], rejectedValue: unknown }>(

• src\store\slices\monitoringSlice.ts: SyntaxError: Missing initializer in const declaration. (41:77)

export const getVacationMonitoring = createAsyncThunk<IVacMonitoring, unknown>(

• src\store\slices\profileSlice.ts: SyntaxError: Missing initializer in const declaration. (13:65)

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { getResolvedUrl } from "../../utils/getResolvedUrl";
import { responseWithReject } from "../../utils/responseWithReject";

interface IUserInfo {
    dep_name: string
    user_name: string
}

interface IInitialState {
    user_info: IUserInfo
}

export const getProfile = createAsyncThunk<IInitialState, unknown>(
//                                                              ^
    "profile/getProfile",
    async (_, ThunkApi) => {
    try {
        const res = await fetch(getResolvedUrl("profile"), {
            method: 'GET',
            headers: <HeadersInit>{
                "x-access-token": localStorage.getItem("token"),
            }
        })
        return await res.json()
            ;
    } catch (e) {
        return ThunkApi.rejectWithValue(e)
    }
});

// 其余代码省略

• src\store\slices\requestActionsSlice.ts: SyntaxError: Unexpected token (67:88)

export const getMyRequest = createAsyncThunk<{ message: string, vac_app_list: TRequests[] }>(
    "request_actions/getMyRequest",
    async (_, ThunkApi) => {
        try {
            const res = await fetch(getResolvedUrl("get_my_vac_app_list"), {
                method: "GET",
                headers: <HeadersInit>{
                    "Content-Type": "application/json",
                    "x-access-token": localStorage.getItem("token"),
                },
            });
            return await res.json();
        } catch (e) {
            return ThunkApi.rejectWithValue(e)
        }
    });

// 其余代码省略

当前Prettier配置 #

{
    "endOfLine": "auto",
    "tabWidth": 4,
    "printWidth": 100,
    "importOrder": ["^[./]"],
    "importOrderSeparation": true,
    "importOrderSortSpecifiers": true
}

可能的原因及解决方法 #

1. 解析器未正确识别TypeScript语法
   Prettier默认按文件后缀推断解析器，但如果存在配置冲突或插件干扰，可能错误使用Babel解析器而非TypeScript解析器。旧版Babel解析器无法正确处理createAsyncThunk<T1, T2, T3>这种多泛型参数格式，从而抛出语法错误。

解决方法：在配置中显式指定解析器为typescript：

{
    "endOfLine": "auto",
    "tabWidth": 4,
    "printWidth": 100,
    "parser": "typescript",
    "importOrder": ["^[./]"],
    "importOrderSeparation": true,
    "importOrderSortSpecifiers": true
}

2. 排序导入插件与Prettier版本不兼容
   配置中的importOrder等项属于@trivago/prettier-plugin-sort-imports插件，如果插件版本与Prettier不匹配，会破坏语法解析流程，导致泛型解析出错。

解决方法：

• 检查插件与Prettier的版本兼容性，确保二者版本匹配；
• 暂时移除插件及其配置项，验证是否仍报错，以此排查插件问题。

3. Prettier版本过旧
   旧版Prettier对TypeScript复杂泛型的支持不完善，无法正确解析createAsyncThunk的写法。

解决方法：升级Prettier到最新稳定版本，同时确保typescript等依赖版本兼容。

内容的提问来源于stack exchange，提问作者Semro