esthetic

WIP ~ WORK IN PROGRESS

The new generation code beautification tool for formatting HTML, Liquid, CSS/SCSS, JavaScript, TypeScript and more! Æsthetic leverages the Sparser lexing algorithm and its parse approach has been repurposed from the distributed source of the late and powerful PrettyDiff.

Documentation

Documentation lives on æsthetic.dev

Features

• Fast, performant and lightweight (50kb gzip).
• Format, parse and language detection capabilities.
• Provides a granular set of beautification rules.
• Supports 10+ different front~end facing languages.
• Uniformed data structures with incremental traversal.
• Simple and painless integration within existing projects.

Installation

Æsthetic is supports both CJS/ESM environments and also provides basic CLI support.

PNPM

pnpm add esthetic

YARN

yarn add esthetic

NPM

npm install esthetic --save

CDN

https://unpkg.com/esthetic

Usage

Consult the documentation for a better understanding.

CLI

$ esthetic <file> --flag

ESM

import esthetic from 'esthetic';

esthetic.format('...', { /* rules */ })

CJS

const esthetic = require('esthetic');

esthetic.format('...', { /* rules */ })

Contributing

Looking to contribute? Æsthetic leverages pnpm so ensure you're using it as your package manager. Development is intended to be conducted within the vscode text editor. Fork or clone the project and install dependencies.

Pre-requisites

• Git
• Node v16^
• Pnpm v7^
• VSCode

Testing / Development

Æsthetic uses the powerful AVA test runner together with a small helper utility that helps alleviate some of the complexities involved with testing tools of its criteria. It's recommended that you develop in a two pane terminal. The dev.test.mjs and dev.txt files are core to testing and working on the module, they will be called when running pnpm play

Commands

The following commands are available as executable scripts.

pnpm dev         Bundles module with ESBuild (via tsup) in watch mode
pnpm play        Starts up AVA in development mode and runs the dev.txt
pnpm build       Generates the distribution bundles
pnpm pack        Packages the module up for distribution on NPM registry
pnpm test        Runs all the tests
pnpm tests       Cherry pick test cases to run

Consult the tests readme for more information on test prefixed commands

Acknowledgements

Æsthetic owes its existence to Sparser and PrettyDiff. This project has been adapted from these 2 brilliant tools and while largely refactored + overhauled the original parse architecture remains intact.

PrettyDiff and Sparser

Æsthetic is made possible because of the Austin Cheney who is the original author of Sparser and PrettyDiff. Austin is one of the great minds in JavaScript and I want to thank him for open sourcing these tools.

Both PrettyDiff and Sparser were retired in 2019 after a nearly a decade of production. Austin has since created Shared File Systems which is a privacy first point-to-point communication tool. Please check it out and also have a read of wisdom which personally helped me become a better developer.

Author 🥛 Νίκος Σαβίδης

Follow me on Twitter or shoot me an Email.