如何在浏览器端运行Prettier格式化代码（ReactJS应用场景）

浏览器环境无法直接运行Node.js版本的Prettier，官方提供了裁剪掉Node原生依赖的standalone独立构建版本，直接引入即可实现和Node端一致的格式化调用效果，适配React + CodeMirror v6的完整实现步骤如下：

1. 安装依赖 #

你只需要安装Prettier核心包，以及业务需要格式化的语言对应的解析器包即可，不需要额外的polyfill或者服务端支持：

npm install prettier

按需安装对应语言的解析器，不需要全部安装：

• @prettier/parser-babel：支持JS/JSX/JSON格式化
• @prettier/parser-typescript：支持TS/TSX格式化
• @prettier/parser-postcss：支持CSS/SCSS/Less格式化
• @prettier/parser-html：支持HTML/Vue格式化

对应安装命令示例：

npm install @prettier/parser-babel @prettier/parser-typescript

2. 封装通用格式化方法 #

注意不要直接导入prettier的默认入口（那个是Node版本，带大量Node原生依赖，浏览器运行会报错），要导入prettier/standalone入口，同时把用到的解析器作为插件传入：

// 导入浏览器端Prettier核心
import prettier from 'prettier/standalone';
// 导入你需要的解析器
import parserBabel from '@prettier/parser-babel';
import parserTypescript from '@prettier/parser-typescript';
import parserPostcss from '@prettier/parser-postcss';
import parserHtml from '@prettier/parser-html';

/**
 * 格式化代码，调用方式和Node端prettier.format完全一致
 * @param {string} code 待格式化的原始代码
 * @param {object} options Prettier配置，支持所有官方配置项
 * @returns {string} 格式化后的代码
 */
export function format(code, options = {}) {
  const baseConfig = {
    semi: true,
    singleQuote: true,
    tabWidth: 2,
    trailingComma: 'es5',
    plugins: [parserBabel, parserTypescript, parserPostcss, parserHtml],
    parser: 'babel', // 默认用babel解析JS，可根据当前编辑的文件类型切换
    ...options
  };

  try {
    return prettier.format(code, baseConfig);
  } catch (e) {
    // 代码存在语法错误时格式化会失败，直接返回原始代码避免打断编辑
    console.warn('格式化失败，已返回原始代码:', e);
    return code;
  }
}

3. 和CodeMirror v6集成 #

你可以根据业务需求选择触发格式化的时机：比如绑定快捷键、点击格式化按钮、编辑器失焦、用户停止编辑多少秒后自动格式化都可以。以下是快捷键触发的示例：

import { useRef } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { format } from './format';

export default function CodeEditor() {
  return (
    <CodeMirror
      value={`const hello=()=>{console.log('test')}`}
      height="400px"
      extensions={[javascript({ jsx: true })]}
      // 绑定Ctrl+Alt+F触发格式化
      extraKeys={{
        'Ctrl-Alt-F': (cm) => {
          const originCode = cm.getValue();
          const formattedCode = format(originCode, { parser: 'babel' });
          cm.setValue(formattedCode);
        }
      }}
    />
  );
}

注意点 #

• 解析器按需引入即可，全量引入会增大打包体积
• 必须传入和当前代码语言匹配的parser参数，否则格式化会报错
• 浏览器版Prettier的格式化结果和Node端完全一致，所有Prettier官方配置项都可以正常使用
• 如果需要支持其他语言，安装对应的@prettier/parser-*包后加入plugins数组即可

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