Introduction

Motivation

Years ago when I was working at Travelocity we had three code environments: dev, cert, and production. The dev environment contained the latest code, the cert environment contained the latest code in a minified form, and the production environment contained minified code from the previous release. If a regression error slipped through the unit tests into production it could be hard to immediately identify against the code. Even the most intelligent diff tools proved worthless.

Another motivation was linting in the popular JSLint. When I first needed this application tools like JSHint and ESLint did not exist. JSLint was the go to tool for validation. It complained about white space, so I needed something that could beautify code according to the rules of JSLint. As far as I could tell nothing like that existed at the time. The popular js-beautify tool could not do this at the time and was painful to extend.

I wrote this application as a personal tool. It helped me to become a more productive coder. By having flexible pocket parsers at my disposal I could instantly beautify and compare code against a variety of needs. Never again would I have to worry if a team or tool demanded a certain kind of formatting. Instead of wasting time on unnecessary tasks that software is better suited to perform I can reserve my concentration on my challenging problems. Eventually other people found the tool useful as well and provided suggestions and recommendations that others also needed.

About the tool

Pretty Diff combines language parsers for popular web languages with a comparison tool to create a language aware diff tool. This tool can instantaneously compare minified code to its development counterpart.

Since the tool contains language parsers that perform beautify (pretty print) operations a large number of features are available and many more are possible.

Wish to Contribute?

Writing and maintaining multiple language parsers is hard work. Sometimes help is needed to identify a defect. When defects are identified please let the world know! Pretty Diff also accepts pull requests and feature requests.

Major Features

  • ES6 / JS2015 ready! — Pretty Diff provides support for the new technologies available in the latest version of ECMAScript.
  • Atom.io integration — Integrated directly into the popular IDE Atom.io as the default beautifier for several languages thanks to atom-beautify.
  • React JSX format support — JSX format can be a real challenge to parse and beautify. It is XML embedded within JavaScript that can then be embedded within HTML. Pretty Diff has this covered with complete support. Read this guide for information on how Pretty Diff accomplished JSX support.
  • LESS and SCSS (Sass) CSS support — Pretty Diff's CSS parser is fully aware that CSS can be extended in support for more powerful languages. This support has earned Pretty Diff inclusion to the atom-beautify project for the popular IDE Atom.io.
  • Command Line — According to my stats Pretty Diff appears to be several times more popular on the command line. Pretty Diff provides a handy library, api/node-local.js, that is Node.js and io.js compatible. The command line operation can read/write files and even recursively crawl entire directory trees. This could be helpful when you need to compare dependencies by project version. Read this handy guide for examples and instructions.
  • jsscope — Ever curious where a variable is declared in a mess of large code? Ever wish you could more easily understand closure and lexical scope? The jsscope feature provides colorful output to identify scope by color and color variables by the scope they are declared. Read these guides about closure with jsscope and generating color JavaScript for examples and instructions.
  • style guide — There is a fantastic tool called JSCS that validates code against a variety of style guide rules. Conformance to many of these rules can be easily automated. Pretty Diff added support for style guides which bundle a variety of option settings so that when used with JSCS code authors can focus on more important decisions related to style validation. Read the Pretty Diff guide for support and documentation. Pretty Diff is always willing to support additional style guides. If you wish for your organization's style guide to be presented just open an issue on Github.
  • markup tag ignore — When beautifying markup sometimes there are elements that should not be altered. This is particularly true for any element that receives a CSS rule of white-space: pre. Pretty Diff provides this support via a data attribute. Read the tag ignore guide for details.
  • intelligent markup beautification — White space in XML and HTML is a text node. Pretty Diff is aware that accidentally creating these text nodes can introduce problems when using the DOM or rendering content to the user. Intelligent beautification is a foundational concern of markup parsing in both the beautification and minification processes.
  • JavaScript auto-correct — Missing curly braces, missing semicolons, and other things can make code really hard to read and guess at the author's intentions. Pretty Diff can supply corrections to the code for these issues. For more information read the details and the documentation.