使用Prettier处理SVG转JSX时，如何将kebab-case属性转camelCase？

Prettier没有内置配置项可以将SVG的kebab-case属性自动转换为JSX的camelCase格式。因为Prettier的定位是代码格式化工具，而非代码转换工具，它只会调整代码的排版格式（缩进、引号、换行等），不会修改属性名这类语法层面的内容。

针对你的SVG转TSX脚本场景，有两种可行的解决思路：

1. 在Prettier处理前手动转换属性名 #

可以通过正则表达式批量将kebab-case属性名替换为camelCase，确保在Prettier格式化前完成语法修正。

示例Node.js代码：

// 假设rawTsx是你转换后未处理的TSX字符串
const camelCaseTsx = rawTsx.replace(
  /(\s+)([a-z]+)-([a-z])/g,
  (_, prefix, firstPart, char) => `${prefix}${firstPart}${char.toUpperCase()}`
);

// 再用Prettier格式化处理后的代码
const formattedTsx = prettier.format(camelCaseTsx, { parser: 'typescript' });

这个正则会匹配属性名中的连字符，将连字符后的小写字母转为大写，同时保留属性名前的空格，避免误替换属性值里的内容。

2. 使用专门的SVG转JSX工具 #

直接使用支持属性名自动转换的SVG转JSX工具，这类工具会在转换过程中自动将kebab-case属性转为JSX合法的camelCase格式，同时支持TSX输出。

比如@svgr/core就是一个常用的选择，示例代码：

import svgr from '@svgr/core';
import fs from 'fs';
import prettier from 'prettier';

async function svgToTsx(svgFilePath) {
  const svgContent = fs.readFileSync(svgFilePath, 'utf8');
  // 直接转换为符合规范的TSX代码
  const tsxContent = await svgr(svgContent, {
    typescript: true, // 启用TSX输出
  });
  // 最后用Prettier格式化
  return prettier.format(tsxContent, { parser: 'typescript' });
}

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