告别混乱代码：js-beautify 完美格式化 Vue 单文件组件全指南

【免费下载链接】js-beautify Beautifier for javascript 项目地址: https://gitcode.com/gh_mirrors/js/js-beautify

引言：你还在为 Vue 组件格式混乱而头疼吗？

作为前端开发者，你是否经常遇到以下问题：接手的 Vue 项目代码缩进不一致、括号位置混乱、HTML/CSS/JS 代码风格迥异？当团队协作时，代码格式化问题常常导致无意义的争论和 PR 审核延迟。据统计，开发者平均每天要花费 15% 的时间处理代码格式问题，而使用自动化工具可以将这一比例降低至 3% 以下。

本文将全面介绍如何使用 js-beautify（JavaScript 代码美化工具）解决 Vue 单文件组件（SFC）的格式化难题。通过本文，你将学到：

• 如何配置 js-beautify 同时美化 Vue 组件中的 HTML 模板、CSS 样式和 JavaScript 代码
• 针对 Vue 特殊语法的格式化技巧（指令、单文件组件结构等）
• 集成到开发流程中的自动化方案（VS Code、构建工具）
• 高级自定义配置，解决 99% 的格式化需求

为什么选择 js-beautify 处理 Vue 组件？

市场主流格式化工具对比

js-beautify 的独特优势在于其高度可定制性和对 Vue 单文件组件各部分的深度支持。它允许你分别控制 HTML 模板、CSS 样式和 JavaScript 代码的格式化规则，完美适应 Vue 组件的复杂结构。

js-beautify 工作原理

js-beautify 通过内置的解析器将 Vue 单文件组件分解为 HTML、CSS 和 JavaScript 三部分，分别应用不同的格式化规则，最后重组为美观的代码。这种架构使其能够处理复杂的嵌套结构和特殊语法。

快速开始：10 分钟上手配置

安装与基础使用

# 全局安装
npm install -g js-beautify

# 本地安装（推荐）
npm install js-beautify --save-dev

基础命令行使用：

# 格式化单个 Vue 文件
js-beautify -r -t -s 2 src/components/HelloWorld.vue

# 批量格式化所有 Vue 文件
find src -name "*.vue" -exec js-beautify -r -t -s 2 {} \;

参数说明：

• -r：原地替换文件
• -t：使用制表符缩进（或 -s 2 使用 2 空格缩进）
• --config .jsbeautifyrc：指定配置文件

项目级配置文件

在项目根目录创建 .jsbeautifyrc 文件，这是 js-beautify 的核心配置方式：

{
  "indent_size": 2,
  "indent_char": " ",
  "indent_level": 0,
  "indent_with_tabs": false,
  
  // HTML 相关配置
  "html": {
    "indent_inner_html": true,
    "vue_indent_script": true,
    "vue_indent_style": true
  },
  
  // CSS 相关配置
  "css": {
    "indent_size": 2
  },
  
  // JavaScript 相关配置
  "js": {
    "preserve_newlines": true,
    "max_preserve_newlines": 2,
    "brace_style": "collapse-preserve-inline"
  }
}

这个基础配置已经能解决大部分 Vue 组件的格式化需求。接下来我们将深入各个部分的高级配置。

深度配置：Vue 单文件组件各部分优化

HTML 模板格式化（ ）

Vue 模板包含大量特殊指令和语法，需要针对性配置：

{
  "html": {
    "indent_inner_html": true,
    "indent_size": 2,
    "wrap_attributes": "force-aligned",
    "wrap_line_length": 120,
    "preserve_newlines": true,
    "max_preserve_newlines": 1,
    "unformatted": ["code", "pre", "em", "strong"],
    "void_elements": ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"],
    "end_with_newline": true,
    "vue_indent_script": true,
    "vue_indent_style": true
  }
}

关键配置项解析

1. wrap_attributes: 控制 Vue 指令和属性的换行方式

   • "auto" (默认): 自动决定是否换行
   • "force" : 强制所有属性换行
   • "force-aligned" : 强制换行并对齐
   • "force-expand-multiline": 强制换行但不对齐

   <!-- wrap_attributes: "force-aligned" -->
   <template>
     <MyComponent
       v-if="showComponent"
       :prop1="value1"
       :prop2="value2"
       @event="handleEvent"
     />
   </template>
   

2. unformatted: 保持原始格式的标签列表，对于 <code>、<pre> 等标签非常重要

3. vue_indent_script 和 vue_indent_style: 确保 <script> 和 <style> 标签内的代码正确缩进

JavaScript 代码格式化（<script></script>