@1password/eslint-config

@1password/eslint-config

1Password’s shared ESLint configs, one of which is a base config that includes a specific set of rules, the other of which is the base config plus a set of rules that are specific to React.

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 a .eslintrc.js file, if one does not yet exist:

touch .eslintrc.js

1. Depending on whether your project uses React, extend the appropriate ESLint config in your .eslintrc.js file:

// Base Config
module.exports = {
	extends: "@1password/eslint-config",
	// other settings
};

// Base Config plus React-specific Rules
module.exports = {
	extends: "@1password/eslint-config/react",
	// other settings
};

1. 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 a custom config in which the formatting rules have been turned off:

// Base Config
module.exports = {
	extends: [
		"@1password/eslint-config",
		"@1password/eslint-config/disabled-formatting-rules",
	],
	// other settings
};

// Base Config plus React-specific Rules
module.exports = {
	extends: [
		"@1password/eslint-config/react",
		"@1password/eslint-config/disabled-formatting-rules",
	],
	// 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.

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:recommended), with minimal overrides as needed. See ./.eslintrc.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 ./sonar.js for an example.