Is there any way to visually reformat this code? Why does this happen?

Question

I'm pretty new to the software development world. Why do I keep coming across files that look like this? Is there any setting/way to automatically reformat files like this so they're easier to read? i.e. spacing, line breaks, etc.

Answer 1

These files are “minified”; that is, they are preprocessed using a utility which removes unnecessary whitespace, reduces the length of variable/function names, and other optimizations. These serve to reduce the file’s size, thus reducing bandwidth required to transmit this content over the wire and improving network performance.

This is a common paradigm in web development. Minified files tend to have the .min.js extension to denotate their minified stature.

There are a slew of “beautification” utilities out there (for example, Beautifier.io) to make these minified files easier to read, but processed files will sometimes still be hard for human eyes to follow largely because of the renaming of variables and functions piece, as the names themselves will no longer be descriptive of the contents/functionality of said variable/function.

Libraries reduced in this manner generally offer a normal (.js) file for those curious to see the source code before it's been processed in this manner. In your case, popper.js's unminified version is available from its GitHub repository or from any trusted CDN, like cdnjs.

Wikipedia's page on Minification (programming) has a short-yet-informative explanation of this.