JavaScript 美化工具

What

JavaScript 美化工具定义

JavaScript 格式化器将 JS/TS 代码整理为可读布局。

Cases

常见使用场景

1

格式化压缩代码以便调试

2

评审前整理代码片段

3

统一缩进与空格

How To

如何格式化 JavaScript 代码

整理 JS/TS 代码以提升可读性的分步指南。

1

粘贴代码

粘贴 JS/TS 代码。

2

选择选项

选择缩进与换行规则。

3

格式化并复制

执行格式化并复制结果。

Knowledge

了解 JavaScript 代码风格

JavaScript 风格指南

流行的风格指南包括 Airbnb、Google 和 StandardJS。它们定义了关于缩进、分号、引号、命名规范等规则。一致性比选择哪种特定风格更为重要。

分号之争

JavaScript 具有自动分号插入 (ASI) 机制。某些风格省略分号（如 StandardJS），而另一些则要求使用分号（如 Airbnb）。两者都可行：选择一种并保持一致。Prettier 等格式化工具可以强制执行您的选择。

ES6+ 特性

现代 JavaScript 提供了箭头函数、模板字面量、解构赋值、展开运算符等。这些特性通常使代码更简洁、更具可读性。格式化工具可以很好地处理这些较新的语法特性。

格式化工具

Prettier 是最流行的强制性格式化工具：它为您做出所有风格决策。ESLint 也可以进行格式化，但更侧重于发现 Bug。许多项目同时使用两者：Prettier 用于格式化，ESLint 用于代码检查 (Linting)。

TypeScript 注意事项

TypeScript 为 JavaScript 增加了类型标注。格式化工具在格式化时会保留类型语法。支持类型的 Linting（通过 typescript-eslint）可以捕捉到与类型相关的风格问题和潜在 Bug。

FAQ

JavaScript 美化 FAQ

支持哪些缩进宽度？

可选 Tab 或 2/4/8 空格，启用后会重新缩进花括号和 switch case。

能处理模板字符串或 JSX 吗？

模板字符串会保留，简单 JSX 保持原有空格（不解析复杂 JSX）。

换行逻辑是什么？

长行会在逗号或空格处分割到设定宽度，并添加续行缩进。

能去掉多余空行吗？

开启“限制空行”，设置允许的连续空行数即可。

JavaScript 的起源是什么？

JavaScript 由 Brendan Eich 于 1995 年为 Netscape Navigator 创建，之后发展成无处不在的 Web 语言。

现在 JavaScript 有多受欢迎？

凭借 Web 主导地位、Node.js 和前端框架，JavaScript 常年位居语言榜和 GitHub 仓库的前列。

在哪些地方 JS 格式化特别有帮助？

在不同编辑器和 CI 流水线中保持 React/Vue 组件、API 处理器和共享库的一致性时尤其有用。

维护 JS 代码风格的建议？

使用格式化工具和 lint 规则，避免混用制表符和空格，并在提交前运行格式化以防团队间偏差。

JavaScript 美化工具