实现 代码格式化 工具

分类：developer ｜ 标签：格式化、Prettier、代码 HTML/CSS/JS/JSON/Markdown/YAML 美化

2.1 功能说明

HTML/CSS/JS/JSON/Markdown/YAML 美化

核心能力

• 语言
• o.label

2.1.1 使用指南

支持 JavaScript / TypeScript / JSON / CSS / HTML / Markdown / YAML 的美化与缩进统一。

• 选择对应语言后点击「格式化」，结果在同一页面右侧输出。
• JSON 仅做美化（键序不变）；语法错误会给出具体行号提示。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• format()
• copyOut()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'
import * as prettier from 'prettier/standalone'
import babel from 'prettier/plugins/babel'
import estree from 'prettier/plugins/estree'
import typescript from 'prettier/plugins/typescript'
import postcss from 'prettier/plugins/postcss'
import html from 'prettier/plugins/html'
import yaml from 'prettier/plugins/yaml'
import markdown from 'prettier/plugins/markdown'

const langs = [
  { label: 'JavaScript', value: 'babel' },
  { label: 'TypeScript', value: 'typescript' },
  { label: 'JSON', value: 'json' },
  { label: 'CSS', value: 'css' },
  { label: 'HTML', value: 'html' },
  { label: 'Markdown', value: 'markdown' },
  { label: 'YAML', value: 'yaml' }
]
const source = ref('')
const output = ref('')
const lang = ref('babel')
const error = ref('')

async function format() {
  error.value = ''
  const code = source.value
  if (!code || !code.trim()) {
    error.value = '请输入需要格式化的代码'
    return
  }
  try {
    output.value = await prettier.format(code, {
      parser: lang.value,
      plugins: [babel, estree, typescript, postcss, html, yaml, markdown],
      semi: true,
      singleQuote: false,
      tabWidth: 2,
      printWidth: 100
    })
  } catch (e) {
    error.value = '格式化失败：' + (e && e.message ? e.message : String(e))
  }
}

function copyOut() {
  if (!output.value) return
  navigator.clipboard?.writeText(output.value).then(
    () => ElMessage.success('已复制'),
    () => ElMessage.warning('复制失败，请手动选择')
  )
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/code-format