🪷 serenity

👀 Motivation

Every time starting new project I was catching frustration due to ESLint / Prettier / Standard etc. setup. So decided to have a single source of truth for linting and formatting purposes for my fullstack JS / TS projects.

✨ Features

• Very (VERY) opinionated
• Tabs + single quotes + no semicolons => minimalism
• Focused on readability and consistency
• Easy setup for new projects
• Supports JS, TS, CSS
• Support for both backend and frontend

🪐 Object key spacing

• Default (@hetchet/serenity):
  • Keys in objects are spaced only after semicolon. E.g.:

   const obj = {
   	a: 1,
   	some_key: 2,
  
   	b: 3,
   	key: 55
   }

  • For ['*.interface.ts', '*.type.ts', '*.d.ts', '*.config.+(js|ts)'] object keys spacing is aligned on the longest key, new line breaks alignment. E.g.:

   const obj = {
   	a        : 1,
   	some_key : 2,
  
   	b   : 3,
   	key : 55
   }

• Always spaced (@hetchet/serenity/object-key-spaced) = second variant from above for all files. Personal preference for NestJS projects.

📦 Installation

Package dependencies

To get this config working it is required to have installed several packages:

• eslint: >=8
• prettier: >=2
• prettier-eslint: >=15

To install of these with single lint:

npx install-peerdeps --dev @hetchet/eslint-config-serenity

Even if you use yarn, this utility will detect that and use yarn instead of npm.

Config inheritance

There are several options how to use this linting/formatting/styling configuration. Preferred one is via package.json because of minimalism.

Via package.json

package.json:

{
	...
	"prettier": "@hetchet/eslint-config-serenity/prettier",
	"eslintConfig": {
		"extends": "@hetchet/serenity"
	},
	...
}

Via config files

.prettierrc.js:

module.exports = {
	...require("@hetchet/eslint-config-serenity/prettier")
	// Any Prettier overrides go here
}

.eslintrc.json (or whatever you prefer, see options in ESLint docs):

{
	extends: "@hetchet/serenity"),
	// Any ESLint overrides go here
}

VSCode

For the best experience in VSCode code editor, I can recommend installing these two extensions:

• ESLint - to show linting errors
• Prettier-ESLint