javascript 如何自动缩进/格式化一行 js 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10791797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to automatically indent/format a one-line-js-file?
提问by RollRoll
a nice former developer wanted to make our lives harder before leaving our company and developed a whole javascript UI framework in one single line. I mean...probably he messed up after the development...
一位优秀的前开发人员希望在离开我们公司之前让我们的生活更加艰难，并在一行中开发了一个完整的 javascript UI 框架。我的意思是......可能他在开发后搞砸了......
the point is... there are a lot of bugs I need to fix.. and I am wondering how you guys would approach to automatically indent the whole code.
关键是……我需要修复很多错误……我想知道你们会如何自动缩进整个代码。
thanks
谢谢
回答by Joseph
a whole javascript UI framework in one single line
一行完整的 javascript UI 框架
The process of turning readable development code into gibberish production code is called minification/uglification. In a gist, this process optimizes the code for production use. Depending on the implementation, it could do (but not limited to) the following:
将可读的开发代码变成乱码的生产代码的过程称为缩小/丑化。总而言之，此过程优化了用于生产用途的代码。根据实现，它可以（但不限于）执行以下操作：
- compress the code by removing whitespace (which turns it into a one-liner)
- compress by renaming variables and functions into shorter ones
- compress syntax by using alternative syntax (like
ifs to ternaries,fortowhile) - remove dead/unreachable code
- 通过删除空格来压缩代码（将其变成单行）
- 通过将变量和函数重命名为较短的变量和函数来压缩
- 使用替代语法压缩语法（如
ifs 到三元组、fortowhile） - 删除无效/无法访问的代码
how you guys would approach to automatically indent the whole code
你们将如何自动缩进整个代码
There are a lot of tools for this task:
这个任务有很多工具：
You can use JSBeautifier, an online tool for formatting JS and HTML. Handy for a quick format. There's a plugin for thatif you happen to use Sublime Text editor.
If you use Grunt, there's a JSBeautifier taskbuilt to perform the same functionality as the online version of JSBeautifier.
Chrome has a pretty print option in the Sources tab of dev tools. This indents the compressed code on the debugger(it does not modify the file).
If the file happens to have an accompanying source map(a file with the same name as the file of the code, but has a
*.mapextension), then you're in luck. A source map is like a dictionary containing a mapping of the raw names with the compressed names. Source maps are supported in Chrome and Firefox dev tools, but not enabled by default. If you enable it, the browser will try to download them (assuming they are contained together with the minified file) and use them for view in the Source tab of the developer tools.
您可以使用JSBeautifier，这是一种用于格式化 JS 和 HTML 的在线工具。方便快速格式化。如果您碰巧使用 Sublime Text 编辑器，则有一个插件。
如果您使用 Grunt，则会构建一个JSBeautifier 任务来执行与在线版本的 JSBeautifier 相同的功能。
Chrome 在开发工具的 Sources 选项卡中有一个漂亮的打印选项。这会缩进调试器上的压缩代码（它不会修改文件）。
如果该文件碰巧有一个随附的源映射（一个与代码文件同名但有
*.map扩展名的文件），那么你很幸运。源映射就像一个字典，其中包含原始名称与压缩名称的映射。Chrome 和 Firefox 开发工具支持源映射，但默认情况下不启用。如果启用它，浏览器将尝试下载它们（假设它们与缩小的文件一起包含）并在开发人员工具的“源”选项卡中使用它们进行查看。
