@1password/eslint-config weekly downloads statistics

@1password/eslint-config

1Password’s shared ESLint configs:

• javascript: for vanilla JavaScript
• typescript: for TypeScript
• react: for React + TypeScript
• disabled-formatting-rules: for disabling deprecated ESLint formatting rules

Getting Started

1. Navigate to the root of your project. Note that the root is wherever your manifest (or package.json) file lives, and that can be a subdirectory or the root of your repo.

2. Use your project’s package manager to install @1password/eslint-config and ESLint:

pnpm add --save-dev @1password/eslint-config eslint

npm install --save-dev @1password/eslint-config eslint

yarn add --dev @1password/eslint-config eslint

1. Add an eslint.config.mjs file, if one does not yet exist:

touch eslint.config.mjs

1. Extend the appropriate ESLint config you need in your eslint.config.mjs file. The typescript-eslint package includes a nice config function that helps apply file rules to extended configs.

// Base config
import opLintConfig from "@1password/eslint-config";
// Alternatively, import `opLintConfig` from one of the other shared
// configurations listed above, according to the needs of your web project.
//
// For example, if your repo is a React project:
// import opLintConfig from "@1password/eslint-config/react";
import tseslint from "typescript-eslint";

export default tseslint.config({
	extends: [opLintConfig],
	files: ["src/**/*.ts"],
	// other settings
});

1. If needed, disable the formatting rules that have been deprecated in (but not yet removed from) ESLint, will be deprecated in typescript-eslint, and might be deprecated in eslint-plugin-react, by extending the config in which the formatting rules have been turned off:

import opLintConfig from "@1password/eslint-config";
import disabledFormattingRules from "@1password/eslint-config/disabled-formatting-rules";

// Base Config
export default tseslint.config({
	extends: [opLintConfig, disabledFormattingRules],
	// other settings
});

If the custom config can’t disable all of the formatting rules in your project, see if you’re using an ESLint plugin that isn’t included in @1password/eslint-config, but is included in this list:

  https://github.com/prettier/eslint-config-prettier#plugins

If you are, you’ll be able to turn off that plugin’s formatting rules through eslint-config-prettier instead of the custom config.

Customizing ESLint Rules

You can customize the ESLint configuration by adding or overriding specific rules in your eslint.config.mjs file. This is useful when your project has unique linting needs that differ from the defaults provided by @1password/eslint-config.

1. If your project does not use React, extend @1password/eslint-config and add or override rules under rules. Example:

import opLintConfig from "@1password/eslint-config";
import tseslint from "typescript-eslint";

export default tseslint.config({
	extends: [opLintConfig],
	rules: {
		"@typescript-eslint/switch-exhaustiveness-check": "error",
		"no-console": ["error", { allow: ["warn", "error"] }],
		// ...more rules
	},
});

1. If your project uses React, extend @1password/eslint-config/react and add or override React specific rules under rules. Example:

import opLintConfig from "@1password/eslint-config/react";
import tseslint from "typescript-eslint";

export default tseslint.config({
	extends: [opLintConfig],
	rules: {
		"react/react-in-jsx-scope": "off",
		"react/prop-types": "off",
		// ...more rules
	},
});

1. If your project requires additional ESLint plugins not included in @1password/eslint-config, install them separately and declare them in the eslint.config.mjs. For example, adding eslint-plugin-vitest for Vitest testing rules:

pnpm add --save-dev eslint-plugin-vitest

Then update your eslint.config.mjs file:

import opLintConfig from "@1password/eslint-config/react";
import tseslint from "typescript-eslint";
import vitest from "eslint-plugin-vitest";

export default tseslint.config({
	extends: [opLintConfig],
	plugins: { vitest },
	rules: {
		"vitest/no-focused-tests": "error",
	},
});

Config Format

In ESLint v9, the default config format has changed to "flat config", which is what you see above. See the docs for more information about migrating to the new format.

Integrating ESLint with Your Editor

If you want to integrate ESLint with your IDE or text editor so that you can have your JavaScript and TypeScript code linted as you code, visit

  https://eslint.org/docs/latest/use/integrations#editors

to see which integrations are currently supported.

Philosophy

Discussions around this package have caused us to identify a sort of philosophy to guide how we manage rules. The current state of the package may not meet these ideals completely.

1. Changes must consider that this package is intended to be used in every TypeScript project at 1Password. Thus, changes shouldn't focus on the needs of one particular project, and they should be kept as uncontroversial as possible, while considering that hundreds of people will rarely fully agree about anything.

2. If a rules package has broad acceptance within the JS/TS community, its recommended ruleset should be extended (e.g. eslint.configs.recommended), with minimal overrides as needed. See ./internal/eslint.js for an example.

3. If a rules package has a recommended set containing a good portion of controversial/preferential rules, that set should not be extended. Enable individual rules instead of enabling an entire set of rules and then disabling controversial rules. See ./internal/sonar.js for an example.