๐ง Configuration
Base optionsโ
The eslint-config-sheriff
package exports a sheriff
function.
You can configure Sheriff as desired using a simple javascript object as the first input parameter of the sheriff
function.
Every config option can be set on/off (you just pass them a boolean value). As they are all opt-in, they are all disabled by default. If you bootstrapped the config with @sherifforg/cli
some of these values will be inferred automatically from your project.
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
// Sheriff configuration object
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
// Sheriff configuration object
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
Remodelingโ
You can override any Sheriff rule as desired in the eslint.config.js
file.
For example, let's say you want to disable a Sheriff rule, like import/first
:
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"import/first": 0, // 'import/first' is now disabled everywhere.
},
},
]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"import/first": 0, // 'import/first' is now disabled everywhere.
},
},
]);
Likewise, let's say you want to enable a new rule:
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"import/first": 2, // 'import/first' is now enabled everywhere.
},
},
]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"import/first": 2, // 'import/first' is now enabled everywhere.
},
},
]);
This is just the standard behavior of the FlatConfig
system of ESLint, which is being illustrated here for your convenience. Sheriff doesn't alter this in any way.
For more in-depth information, refer to the official docs.
Advanced optionsโ
The upcoming configuration options are meant to be situational, tailored to serve only a niche group of users and designed to address specific use cases. Use these only if and when you end up needing them.
files
โ
This option is primarily meant to be used while introducing Sheriff to an existing project.
Learn more in the โป Migration guide.
ignores
โ
By default, Sheriff will ignore certain filepaths, but you can choose to opt-out of this behavior.
ignores: {
recommended: boolean;
inheritedFromGitignore: boolean;
}
ignores.recommended
โ
With this option, Sheriff will ignore a list of commonly ignored folders:
**/node_modules/**
**/dist/**
**/build/**
**/artifacts/**
**/coverage/**
eslint.config.{js,mjs,cjs}
Example:
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
ignores: {
recommended: true, // true by default. False to disable.
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
ignores: {
recommended: true, // true by default. False to disable.
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
ignores.inheritedFromGitignore
โ
With this option, Sheriff will ignore the same filepaths specified in your .gitignore
file.
Example:
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
ignores: {
inheritedFromGitignore: true, // true by default. False to disable.
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
ignores: {
inheritedFromGitignore: true, // true by default. False to disable.
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
pathsOverrides
โ
As outlined in the criteria page, Sheriff comes with sensible defaults. However, as your project grows, your team may come across the need to override some of these defaults. This option lets you do just that.
pathsOverrides: {
tsconfigLocation: string | string[];
tests: string[];
}
pathsOverrides.tsconfigLocation
โ
By default, Sheriff will use the project: true
option to locate the tsconfig.json
of your project.
But, if you have multiple tsconfig.json
files in your project (like tsconfig.json
, tsconfig.eslint.json
, tsconfig.node.json
, etc...), you can use this parameter to specify which config Sheriff will pickup.
You can pass it a path as a string (or a list of paths as a array of strings, see: one-tsconfigjson-per-package).
Example:
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
pathsOverrides: {
tsconfigLocation: "./tsconfig.eslint.json",
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
pathsOverrides: {
tsconfigLocation: "./tsconfig.eslint.json",
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
pathsOverrides.tests
โ
By default, Sheriff will apply Jest or Vitest rules only on specific files.
[
"**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts}",
"**/tests/**/*.{js,mjs,cjs,ts,mts,cts}",
"**/__tests__/**/*.{js,mjs,cjs,ts,mts,cts}"
]
This setting overrides this default.
It accepts an array of filepaths, dictaced by minimatch syntax.
Example:
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
pathsOverrides: {
tests: [
"**/*.mySpecialName.{js,mjs,cjs,ts,mts,cts}",
"**/mySpecialFolder/**/*.{js,mjs,cjs,ts,mts,cts}",
"**/__mySpecialFolder__/**/*.{js,mjs,cjs,ts,mts,cts}",
],
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
pathsOverrides: {
tests: [
"**/*.mySpecialName.{js,mjs,cjs,ts,mts,cts}",
"**/mySpecialFolder/**/*.{js,mjs,cjs,ts,mts,cts}",
"**/__mySpecialFolder__/**/*.{js,mjs,cjs,ts,mts,cts}",
],
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
pathsOverrides.playwrightTests
โ
By default, Sheriff will apply Playwright rules only on specific files.
"js,mjs,cjs,ts,mts,cts"
This setting overrides this default.
It accepts an array of filepaths, dictaced by minimatch syntax.
Example:
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
playwrightTests: {
tests: [
"**/*.mySpecialName.{js,mjs,cjs,ts,mts,cts}",
"**/mySpecialFolder/**/*.{js,mjs,cjs,ts,mts,cts}",
"**/__mySpecialFolder__/**/*.{js,mjs,cjs,ts,mts,cts}",
],
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
pathsOverrides: {
playwrightTests: [
"**/*.mySpecialName.{js,mjs,cjs,ts,mts,cts}",
"**/mySpecialFolder/**/*.{js,mjs,cjs,ts,mts,cts}",
"**/__mySpecialFolder__/**/*.{js,mjs,cjs,ts,mts,cts}",
],
},
};
export default defineFlatConfig([...sheriff(sheriffOptions)]);
Customizing the no-restricted-syntax
โ
ESLint provides a very powerful rule called no-restricted-syntax
(docs). It accepts an array of objects. Each object represent a specific Javascript syntax feature that you may want to forbid.
Sheriff already come with a preconfigured no-restricted-syntax
entry. However, you can customize it in different ways.
Overrideโ
Override the rule in full.
You provide your own no-restricted-syntax
rule and it will override the Sheriff one. You can do this as you normally would, appending the rule to the FlatConfig
array, after Sheriff.
Example:
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"no-restricted-syntax": [
2,
// your custom rules here...
],
},
}
]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false,
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"no-restricted-syntax": [
2,
// your custom rules here...
],
},
}
]);
Extendโ
Conveniently, Sheriff exports it's own no-restricted-syntax
entry as the baseNoRestrictedSyntaxRules
array.
To extend the Sheriff entry of no-restricted-syntax
, you can use the Javascript spread syntax.
Example:
- JS
- TS
import sheriff, { baseNoRestrictedSyntaxRules } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"no-restricted-syntax": [
2,
...baseNoRestrictedSyntaxRules,
// your custom rules here...
],
},
}
]);
import sheriff, { baseNoRestrictedSyntaxRules, type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"no-restricted-syntax": [
2,
...baseNoRestrictedSyntaxRules,
// your custom rules here...
],
},
}
]);
Shrinkโ
Conveniently, Sheriff exports it's own no-restricted-syntax
entry as the baseNoRestrictedSyntaxRules
array.
To shrink the Sheriff entry of no-restricted-syntax
, you can use the Javascript toSpliced() method to remove the entries that you don't like.
Every entry prints the index of itself at the end of the message
property, so you can easily identify which one you want to remove.
Example:
- JS
- TS
import sheriff from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"no-restricted-syntax": [
2,
...baseNoRestrictedSyntaxRules.toSpliced(2, 1) // this will result in baseNoRestrictedSyntaxRules without the third element.
],
},
};
]);
import sheriff, { type SheriffSettings } from "eslint-config-sheriff";
import { defineFlatConfig } from "eslint-define-config";
const sheriffOptions: SheriffSettings = {
react: false,
next: false,
astro: false,
lodash: false,
remeda: false,
playwright: false,
jest: false,
vitest: false
};
export default defineFlatConfig([
...sheriff(sheriffOptions),
{
rules: {
"no-restricted-syntax": [
2,
...baseNoRestrictedSyntaxRules.toSpliced(2, 1) // this will result in baseNoRestrictedSyntaxRules without the third element.
],
},
};
]);