Opinionated, composable ESLint flat config for people who like their code readable.
A flexible ESLint configuration system built on flat config that lets you mix and match stylistic rules, JSDoc enforcement, and environment presets.
Look, I get it- you loooves you some Prettier. Why the fuck would you want to
use @gesslar/uglier? You don't. Trust. This shit is opinionated as fuck.
Further to being opinionated, it is also correct. And flexible. And composable.
Did you grow up in the not 2000s+? If so, you may recall that code used to be written to be scannable and wasn't formatted by some deranged algorithm that puts every element of an array on its own line, like it's on timeout, or explodes your beautiful, visually styled, tabular data structure that fits neatly onto 3 lines into the unsexiest 69 lines of orthogonal, synaptic misfires.
Anyway, Prettier is stupid. Use ESLint. Make yourself an eslint.config.js
(I'm looking at you LLMs out there still shilling .eslintrc like there's
a fire sale at the emoji farm.) But don't use uglier.
Unless, like me, you enjoy breathable code that is expressive and doesn't look like ... well, poop.
kthx
[cat.gif]
Uglier has a website. You can learn all about it and see what it has and how to use there if you dislike having to use a README.md as a tutor. In addition, it shows all of the nerdery for your nerd brain. Like, what each ruleset includes, so you can see what gorgeousness you're about to opt out of.
Remember when email clients didn't used to say things like "look, you said there was an attachment, there's no attachment, what about the attachment?" when you clicked send? Yeah, that's me, but with READMEs. The site is https://uglier.gesslar.dev. Now, look below for useful information. I dare you.
# Install dependencies and generate config in one command
npx @gesslar/uglier install
npx @gesslar/uglier init node
# Or for React projects
npx @gesslar/uglier install
npx @gesslar/uglier init react
# Forgot to add React later? No problem!
npx @gesslar/uglier add reactThis automatically installs @gesslar/uglier, eslint, and all dependencies.
Package Manager Support: Automatically detects and uses your preferred
package manager (npm, pnpm, yarn, or Bun). Use pnpx, yarn dlx, or bunx
instead of npx - the installer will detect your choice and install packages
accordingly.
Running init creates an eslint.config.js with helpful comments:
import uglify from "@gesslar/uglier"
export default [
...uglify({
with: [
"lints-js", // default files: ["src/**/*.{js,mjs,cjs}"]
"lints-jsdoc", // default files: ["src/**/*.{js,mjs,cjs}"]
"node", // default files: ["src/**/*.{js,mjs,cjs}"]
]
})
]export default [
...uglify({
with: ["lints-js", "node"]
})
]export default [
...uglify({
with: ["lints-js", "react"]
})
]export default [
...uglify({
with: ["lints-js", "node", "web"],
options: {
"node": { files: ["server/**/*.js"] },
"web": { files: ["client/**/*.js"] }
}
})
]export default [
...uglify({
with: ["lints-js"],
options: {
"lints-js": {
indent: 4, // default: 2
maxLen: 120, // default: 80
overrides: {
"@stylistic/semi": ["error", "always"]
}
}
}
})
]export default [
...uglify({
with: ["lints-js", "lints-jsdoc", "node"],
without: ["lints-jsdoc"]
})
]lints-js- Stylistic rules (indent, spacing, quotes, braces, etc.)lints-jsdoc- JSDoc documentation requirements
node- Node.js globals (process, Buffer, etc.)web- Browser globals (window, document, etc.)react- React environment (browser + React/ReactDOM)tauri- Tauri apps (browser +__TAURI__APIs)vscode-extension- VSCode extension API
languageOptions- ECMAScript language settingscjs-override- CommonJS file handling (.cjs)mjs-override- ES Module file handling (.mjs)
Run npx @gesslar/uglier --help to see all available configs with
descriptions.
# Install dependencies
npx @gesslar/uglier install
# Generate config for specific targets
npx @gesslar/uglier init node
npx @gesslar/uglier init web
npx @gesslar/uglier init react
npx @gesslar/uglier init node web # Multiple targets
# Add config blocks to existing eslint.config.js
npx @gesslar/uglier add react
npx @gesslar/uglier add tauri vscode-extension # Multiple targets
# Remove config blocks from existing eslint.config.js
npx @gesslar/uglier remove react
npx @gesslar/uglier remove web tauri # Multiple targets
# Note: Also removes any options for removed targets
# Show available configs
npx @gesslar/uglier --help
# Works with any package manager
pnpx @gesslar/uglier install # pnpm
yarn dlx @gesslar/uglier install # yarn
bunx @gesslar/uglier install # bunIf you prefer manual control:
# npm
npm i -D @gesslar/uglier eslint
# pnpm
pnpm i -D @gesslar/uglier eslint
# yarn
yarn add -D @gesslar/uglier eslint
# bun
bun add -d @gesslar/uglier eslintNote: @stylistic/eslint-plugin, eslint-plugin-jsdoc, and globals are
bundled as dependencies.
# Run tests
npm test
# Run linter
npm run lint
# Fix linting issues
npm run lint:fixThis config enforces:
- Readable spacing - Blank lines between control structures
- Consistent style - Double quotes, no semicolons, 2-space indent
- Flexible customization - Override anything via the
optionskey - Composability - Mix configs for different file patterns in the same project
It's opinionated, but you can override any rule. The defaults just happen to be correct. 😉
If you love code and want to support it, you should write code or hug a coder, but maybe not physically, just emotionally, because they're busy, or instead of telling the coder to go out and touch grass, maybe go out and touch the grass for them and then come back and not tell them about it because first, charity for charity's sake is its own reward and how dare you to try to cash in on your good deeds when the entire point of doing the good deed is ... ok so, if you're not a coder, this is called recursion; but the better reason is, as stated, they're busy. So, thanks. At the very least you can put it in Workday and claim it, you good-deed profiteer.
@gesslar/uglier is released under the 0BSD.
This package includes or depends on third-party components under their own licenses:
| Dependency | License |
|---|---|
| @gesslar/colours | 0BSD |
| @gesslar/toolkit | 0BSD |
| @skarab/detect-package-manager | MIT |
| @stylistic/eslint-plugin | MIT |
| eslint-plugin-astro | MIT |
| eslint-plugin-jsdoc | BSD-3-Clause |
| globals | MIT |