eslint-config-torchbox
Advanced tools
Shareable ESLint config following Torchbox’s code style.
Install the config along with its peer dependencies:
# npm v7 and up:
npm install --save-dev eslint-config-torchbox@latest
# npm v6 and below:
npx install-peerdeps --dev eslint-config-torchbox@latest
Then configure ESLint to use this config. As a .eslintrc.js in the root of your project:
module.exports = {
// See https://github.com/torchbox/eslint-config-torchbox for rules.
extends: 'torchbox',
};
TypeScript support is currently experimental, and available separately. Make sure to install typescript v3 or v4 on your project, then:
module.exports = {
// See https://github.com/torchbox/eslint-config-torchbox for rules.
extends: 'torchbox/typescript',
};
The TypeScript configuration uses the same rules as the base configuration, with two exceptions:
This configuration can be used as-is even for mixed or JavaScript-only projects, but does require the typescript package to be installed.
For projects wanting stricter checks, consider using linting with type information. Here is a sample ESLint configuration:
module.exports = {
// See https://github.com/torchbox/eslint-config-torchbox for rules.
extends: [
'torchbox/typescript',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
// See https://typescript-eslint.io/docs/linting/type-linting/.
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
};
Review our CHANGELOG for guidance on how to upgrade a project’s linting to a specific version.
More generally, when retrofitting stricter linting onto an existing project, consider a gradual approach to linting strictness, so you can start using linting without having to change significant portions of the project’s code.
We recommend the following run script to add to your package.json:
"lint:js": "eslint --ext .js,.ts,.tsx --report-unused-disable-directives .",
--ext flag so ESLint knows which files to lint.--report-unused-disable-directives flag to ensure you do not use more eslint-disable comments than needed.--cache for larger projects..eslintignoreWe recommend using a .eslintignore to avoid running ESLint over large folders. Note the point of the ignore file isn’t just to determine which JS files we don’t want to be linted, but also speed up linting by excluding large folders. Here’s an example:
.git
node_modules
coverage
static_compiled
venv
overridesIf relevant, use ESLint’s overrides feature to make it more permissive for certain files – for example Storybook stories or unit tests, where code standards are different.
Here is an example of using overrides to disable a few specific rules for stories:
module.exports = {
// […]
overrides: [
{
files: ['*.stories.tsx'],
rules: {
// Don’t mandate typing for Storybook stories.
'@typescript-eslint/explicit-module-boundary-types': 0,
'@typescript-eslint/explicit-function-return-type': 0,
},
},
],
};
This config is meant first and foremost for React projects, where it will detect which rules to apply based on the version of React used on the project. The config can also be used on non-React projects – just make sure to disable the version check by adding the following in your config:
module.exports = {
// [...]
settings: {
// Manually set the version to disable automated detection of the "react" dependency.
react: { version: 'latest' },
},
};
We do not include linting for Vue out of the box. Have a look at the eslint-plugin-vue user guide, in particular:
--ext flag to lint .vue files..vue files.vue-eslint-parser as documented.This config is Prettier-compatible, there isn’t anything extra needed.
The pre-commit pre-commit hook framework doesn’t work well with ESLint. There are three major points to set up correctly:
additional_dependencies configuration..js files. Make sure to override its types attribute as well as files with the correct extensions (TypeScript, Vue).Here is a sample setup with our recommended configuration:
default_language_version:
node: system
repos:
- repo: https://github.com/pre-commit/mirrors-eslint
rev: v8.10.0
hooks:
- id: eslint
types: [file]
files: \.(js|ts|tsx)$
args: [--report-unused-disable-directives]
additional_dependencies:
# Use the same versions as the project’s package-lock.json.
- eslint@8.10.0
- eslint-config-torchbox@1.0.0
- typescript@4.6.2
# Even on npm v7+, we need to specify all peerDependencies
# as pre-commit installs `additional_dependencies` globally.
- '@typescript-eslint/eslint-plugin@5.14.0'
- '@typescript-eslint/parser@5.14.0'
- eslint-config-airbnb@19.0.4
- eslint-config-prettier@8.5.0
- eslint-plugin-import@2.25.4
- eslint-plugin-jsx-a11y@6.5.1
- eslint-plugin-react@7.29.3
- eslint-plugin-react-hooks@4.3.0
The latest versions to install can be resolved with either:
# Retrieve latest versions from npm:
npx install-peerdeps --dry-run --dev eslint-config-torchbox@latest
# Or retrieve currently-installed versions from the current project:
npm ls eslint eslint-config-torchbox typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks | grep -v deduped
By default, this config uses ESLint’s built-in parser, which doesn’t support experimental ECMAScript features. If your code uses experimental syntax with Babel, make sure to set the ESLint parser to babel-eslint:
module.exports = {
// See https://github.com/torchbox/eslint-config-torchbox for rules.
extends: 'torchbox',
// Support non-standard, experimental JS features that Babel knows how to process.
parser: 'babel-eslint',
};
This configuration strikes a balance between ease of use for users, and ease of maintenance.
The base configuration is kept very simple, extending from the Airbnb configuration, with Prettier compatibility and more permissive rules.
We use a separate TypeScript configuration file only due to its experimental nature. The TypeScript configuration does not rely on type checking, so it can also be used for JavaScript projects.
In the future, we may decide to use TypeScript for the default configuration, and have a separate configuration file for vanilla JS projects. Or document how to use the TypeScript configuration on vanilla projects (resetting the parser should be the only necessary change).
Most of the configuration’s dependencies are specified as peerDependencies. This is necessary due to how ESLint configurations resolve their dependencies – see Support having plugins as dependencies in shareable config #3458. This will be changed in a future version of ESLint.
See
config.jsfor the config definition, andsrc/rules.test.jsfor the whole set of rules and settings.
airbnbairbnb/hooksprettierplugin:@typescript-eslint/recommended2, props: false1, terms: todo, fixme, xxx, location: start2, allow: __REDUX_DEVTOOLS_EXTENSION__, __webpack_hash__, al…02, allow: error2, forbid: any02, extensions: .js002, devDependencies: **/tests/**, **/stories/**, **/storybook…0error, elements: img, object, area, inputtype=\image\, img: …error, components: error, components: Link, specialLink: to, aspects: noHref, i…error, ignoreNonDOM: falseerror, labelAttributes: label, controlComponents: , ignoreEl…error, components: error, labelComponents: , labelAttributes: , controlComponen…error, audio: , video: , track: error, ignoreNonDOM: trueerror, elements: marquee, blinkerror, tr: none, presentationerror, handlers: onClick, onMouseDown, onMouseUp, onKeyPress…error, ul: listbox, menu, menubar, radiogroup, tablist, tree…error, tags: , roles: tabpanelerror, handlers: onClick, onMouseDown, onMouseUp, onKeyPress…error, exceptMethods: render, getInitialState, getDefaultPro…error, never, always: error, ignoreCase: trueerror, allowAllCaps: true, ignore: warnerror, alwayserror, ignorePureComponents: trueerror, ignore: , customValidators: , skipUndeclared: falseerror, order: static-variables, static-methods, instance-var…error, enforceDynamicLinks: always, links: true, forms: falseerror, customValidators: , skipShapeProps: trueerror, forbidDefaultForRequired: truewarn, allowInPropTypes: trueerror, allowRequiredDefaults: falseerror, props: never, children: nevererror, alwayserror, button: true, submit: true, reset: falseerror, syntaxerror, alwayserror, property assignmenterror, html: enforce, custom: enforce, explicitSpread: ignor…error, name: Link, props: toerror, nevererror, commonjs: true, caseSensitive: true, caseSensitiveStrict: falseerror, ignorePackages, js: never, mjs: never, jsx: nevererror, groups: builtin, external, internal, warnOnUnassigned…error, maxDepth: ∞, ignoreExternal: falseerror, commonjs: trueerror, exceptions: error, as-needed, requireReturnForObjectLiteral: falseerror, restrictedNamedExports: default, thenerror, ignoreDestructuring: false, ignoreImport: false, igno…error, always, ignoreConstructors: false, avoidQuotes: trueerror, allowNamedFunctions: false, allowUnboundThis: trueerror, destructuring: any, ignoreReadBeforeAssign: trueerror, VariableDeclarator: array: false, object: true, Assig…error, name: isFinite, message: Use Number.isFinite instead …error, vars: all, args: after-used, ignoreRestSiblings: trueerror, functions: true, classes: true, variables: truewarnerror, always, exceptAfterSingleLine: falseerror, before: always, after: alwayserror, newIsCap: true, newIsCapExceptions: , capIsNew: false…error, selector: ForInStatement, message: for..in loops iter…error, defaultAssignment: falseerror, nevererror, alwayserror, always, line: exceptions: -, +, markers: =, !, /, blo…error, allowImplicit: trueerror, alwayswarnerror, ignore: error, disallowArithmeticOperators: trueerror, requireStringLiterals: trueerror, allowImplicit: true, checkForEach: falseerror, commentPattern: ^no default$error, allowKeywords: true, allowPattern: error, always, null: ignoreerror, 1warnerror, allowElseIf: falseerror, allow: arrowFunctions, functions, methodserror, exceptions: error, allowLoop: false, allowSwitch: falseerror, object: arguments, property: callee, message: argumen…error, alwayserror, props: trueerror, allowShortCircuit: false, allowTernary: false, allowT…error, allowEmptyReject: trueerror, disallowRedundantWrapping: trueSee the contribution guidelines for guidance and setup instructions.
FAQs
Shareable ESLint config following Torchbox’s code style
The npm package eslint-config-torchbox receives a total of 747 weekly downloads. As such, eslint-config-torchbox popularity was classified as not popular.
We found that eslint-config-torchbox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.