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.
npm install @elgato/eslint-config @elgato/prettier-config --save-dev
Update your package.json
file to include a lint
script, and configure Prettier.
{
"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.
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
.
npm install @elgato/eslint-config --save-dev
Create an eslint.config.js
file at the root of your project.
import { config } from "@elgato/eslint-config";
export default config.recommended;
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
- Terminal
{
"scripts": {
"lint": "eslint --max-warnings 0"
}
}
eslint --max-warnings 0
Configuration
Extends
- JSDoc recommended
- ESLint recommended
- TypeScript ESLint recommended
Rules
Rule | Severity | Notes |
---|---|---|
Indent: Tabs | ⚠️ Warn | |
JSDoc: Check tag names | ⚠️ Warn | |
JSDoc: No undefined types | ⚠️ Warn | |
JSDoc: Require JSDoc | ⚠️ Warn | |
TypeScript: Explicit function return types | ⚠️ Warn | Disabled for JavaScript, tests, and mock files. |
TypeScript: Explicit member accessibility | ⚠️ Warn | No public required constructor . |
TypeScript: Member ordering | ⚠️ Warn | Grouped by type and then access, and ordered alphabetically. |
TypeScript: Sort type constituents | ⚠️ 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.
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
.
npm install @elgato/prettier-config --save-dev
Configure Prettier within your package.json
to use the configuration.
"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
- Terminal
{
"scripts": {
"lint": "prettier . --check",
}
}
prettier . --check
Format Files
- NPM Script
- Terminal
{
"scripts": {
"lint:fix": "prettier . --write",
}
}
prettier . --write
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:
module.exports = {
...require("@elgato/prettier-config"),
tabWidth: 2,
useTabs: false,
};