如何配置Prettier使其同时支持TS与SCSS文件正常格式化

问题原因 #

你遇到的报错是因为在全局配置中硬编码了parser字段，强制所有类型的文件都使用同一种解析器处理，自然会在解析另一类语法不兼容的文件时抛出语法错误。

两种可行配置方案 #

方案1：删除全局parser配置（最简单） #

Prettier 原生内置了TypeScript、SCSS等常见文件类型的解析器，会自动根据文件扩展名匹配对应解析规则，你只需要删掉配置里全局的"parser": "typescript"行即可，修改后完整配置如下：

{
    "printWidth": 100,
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "arrowParens": "avoid"
}

方案2：通过overrides为不同文件类型指定独立配置 #

如果你需要为不同类型的文件设置差异化的格式化规则，可以用overrides字段单独指定对应文件的parser和配置，示例如下：

{
    "printWidth": 100,
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "arrowParens": "avoid",
    "overrides": [
        {
            "files": ["*.ts", "*.tsx"],
            "parser": "typescript"
        },
        {
            "files": ["*.scss", "*.css"],
            "parser": "scss",
            "singleQuote": false // 可单独为样式文件设置不同规则，按需添加
        }
    ]
}

验证方式 #

修改配置后执行以下命令即可同时格式化两类文件：

• 格式化项目内所有支持的文件：npx prettier --write .
• 单独格式化指定类型文件：npx prettier --write **/*.ts **/*.scss

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