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.

Quick Start

Install the ESLint and Prettier configurations.

Terminal

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

Update your package.json file to include a lint script, and configure Prettier.

package.json

{
	"scripts": {
		"lint": "eslint --max-warnings 0"
	},
	"prettier": "@elgato/prettier-config"
}

At the root of your project, download the .editorconfig file to configure your IDE, and create a eslint.config.js file to configure ESLint.

eslint.config.js

import { config } from "@elgato/eslint-config";

export default config.recommended;

ESLint

ESLint is a popular static code analysis tool for JavaScript and Typescript projects, allowing you to quickly identify and resolve problems. The ESLing configuration used within Elgato's project is available publicly, and can optionally be added to your projects.

Installation

Install @elgato/eslint-config as a devDependency.

Terminal

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

Create an eslint.config.js file at the root of your project.

eslint.config.js

import { config } from "@elgato/eslint-config";

export default config.recommended;

There are two configurations available:

• Recommended — config.recommended
• Strict — config.strict (stricter type enforcing)

Usage

The ESLint 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.

NPM Script

package.json

{
	"scripts": {
		"lint": "eslint --max-warnings 0"
	}
}

Terminal

Terminal

eslint --max-warnings 0

Configuration

Extends

• JSDoc recommended
• ESLint recommended
• TypeScript ESLint recommended

Rules

Rule	Recommended	Strict	Notes
Indent: Tabs	⚠️ Warn	⚠️ Warn
JSDoc: Check tag names	⚠️ Warn	⚠️ Warn	Additional tags: csspart, cssproperty, jest-environment, slot
JSDoc: No undefined types	⚠️ Warn	⚠️ Warn
JSDoc: Require JSDoc	⚠️ Warn	⚠️ Warn
JSDoc: Require Returns	⚠️ Warn	⚠️ Warn	Disabled for getters.
TypeScript: Explicit function return types	✅ Off	⚠️ Warn	Disabled for JavaScript, tests, and mock files.
TypeScript: Explicit member accessibility	⚠️ Warn	⚠️ Warn	No public required constructor.
TypeScript: Member ordering	⚠️ Warn	⚠️ Warn	Grouped by type and then access, and ordered alphabetically.
TypeScript: Sort type constituents	⚠️ Warn	⚠️ Warn

Member Ordering

Members of a class should be grouped by type and then by access, and ordered alphabetically. The ordering is as follows:

Type Order

• Fields
• Constructors
• Signatures / call signatures
• Properties (get / set)
• Methods

Access Order

• Public (static / abstract / regular)
• Protected (static / abstract / regular)
• Private (static / abstract / regular)

Ignored Files

By default, the following files are ignored:

• .github/
• bin/
• dist/
• node_modules/

Overrides

Configuration settings can be overridden using the defineConfig helper function from ESLint, extending @elgato/eslint-config, and then defining your preferred settings.

eslint.config.js

import { config } from "@elgato/eslint-config";
import { defineConfig } from "eslint/config";

export default defineConfig([
	{
		extends: [config.recommended],

		// Anything from here will override @elgato/eslint-config
		rules: {
			"no-unused-vars": "warn",
		},
	},
]);

Learn more about overriding settings.

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

Install @elgato/prettier-config as a devDependency.

Terminal

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

Configure Prettier within your package.json to use the configuration.

package.json

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

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

Usage

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

NPM Script

package.json

{
	"scripts": {
		"lint": "prettier . --check",
	}
}

Terminal

Terminal

prettier . --check

Format Files

NPM Script

package.json

{
	"scripts": {
		"lint:fix": "prettier . --write",
	}
}

Terminal

Terminal

prettier . --write

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.

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,
};