Code Linting

Linting your code greatly improves consistency and readability. This leads to improved maintainability, and often reduces bugs caused to coding quirks. Whilst completely optional, it is encouraged to lint your code; to assist with this, Elgato provides pre-defined configurations that we use for our projects.

Prettier

Prettier is a configurable "opinionated code formatter" that makes formatting code effortless. The prettier configuration used within Elgato's projects is available publicly, and can optionally be added to your projects to improve readability and code consistency.

Installation

1. Install @elgato/prettier-config as a devDependency.

Terminal

npm install @elgato/prettier-config --save-dev

2. Configure prettier within your package.json to use the configuration.

package.json

"prettier": "@elgato/prettier-config"

3. Add the accompanying .editorconfig file to the root of your project. Download the .editorconfig file.

Useful Scripts

The Prettier CLI provides an array of useful commands. These can optionally be added to your package.json scripts object to further streamline checking and formatting, for example.

Check Files

Terminal

prettier . --check

package.json

{
	"scripts": {
		"lint:check": "prettier . --check",
	},
	// Omitted for brevity...
}

Format Files

Terminal

prettier . --write

package.json

{
	"scripts": {
		"lint:fix": "prettier . --write",
	},
	// Omitted for brevity...
}

Format on save

Prettier provides a VS Code extension to further streamline formatting your files. Once installed and configured, you can configure VS Code to format files when they're saved by setting editor.formatOnSave to true in your VS Code preferences.

Default Configuration

Option	Value
endOfLine	lf
printWidth	120
singleQuote	❌ Prefer double
semi	✅ Prefer semicolons
tabWidth	4 spaces (2 spaces for .yaml, .yml)
useTabs	✅ Except .json, .jsonc, .md, .yaml, .yml
trailingComma	All, except .jsonc
multilineArraysWrapThreshold (multiline-arrays)	-1 (manual)
importOrder (sort-imports)	Third-party modules first
importOrderSeparation (sort-imports)	✅
importOrderSortSpecifiers (sort-imports)	✅
importOrderCaseInsensitive (sort-imports)	✅
importOrderParserPlugins (sort-imports)	TypeScript

Overrides

Overriding configuration can be achieved by removing the prettier entry from your package.json, and instead using a .prettierrc.js file. For example, to prefer spaces over tabs:

.prettierrc.js

module.exports = {
	...require("@elgato/prettier-config"),
	tabWidth: 2,
	useTabs: false,
};