Snowball ESLint Config

This package provides a rich, composable and opinionated ESLint configuration based on Snowball engineering standards.

This configuration supports:

• ECMAScript /JavaScript based on the Airbnb's JavaScript Style Guide and using the Airbnb's ESLint base configuration and `eslint-plugin-unicorn
• (auto-fixable) Object keys alphabetical sorting
• Proper promise handling using eslint-plugin-promise
• Protect from potential secrets leak using eslint-plugin-no-secrets
• HTML using eslint-plugin-html
• JSON, JSONC (JSON with comments) and JSON5 using eslint-plugin-jsonc and eslint-plugin-json5
• Markdown (JS/TS in Markdown) using eslint-plugin-markdown
• SQL using eslint-plugin-sql
• YAML using eslint-plugin-yaml
• Imports check and ordering using eslint-plugin-import
• TypeScript using TypeScript ESLint (with or without type checking linting)
• React based on the Airbnb's JavaScript Style Guide and using the Airbnb's ESLint React configuration as well as React Hooks and JSX Accessibility
• Next.JS using eslint-plugin-next and eslint-config-next
• MDX files using eslint-plugin-mdx and Storybook using eslint-plugin-storybook
• Testing with Jest using eslint-plugin-jest and adding Testing Library support using eslint-plugin-testing-library
• Lodash using eslint-plugin-lodash and eslint-plugin-lodash-fp
• Code sorting using eslint-plugin-perfectionist (learn more)
• TailwindCSS linting using eslint-plugin-tailwindcss
• Prettier using eslint-plugin-prettier and eslint-config-prettier

Checkout all the js files to learn more about the configurations.

Installation

Using Yarn:

yarn add --dev @snowball-tech/eslint-config eslint

Or using NPM:

npm install --save-dev @snowball-tech/eslint-config eslint

Note that depending on the configuration you use, you might need to install additionals dependency like prettier or typescript

Usage

This package comes with a patch coming from the Rushstack project

This patch allows to use ESLint dependencies bundled with the package instead of having to manually install them in your repository.

To be able to properly use the config thanks to the patch, you must use the JavaScript style of ESLint configuration (e.g. .eslintrc.js) and start your configuration by importing the patch:

// This allows to use the dependencies installed by the package instead of
// having to manually install all dependencies.
require('@snowball-tech/eslint-config/patch')

Default configuration

The package offers a default ESLint configuration containing:

• base rules (including promise & unicorn)
• HTML
• JSON/JSONC/JSON5
• Markdown
• Y(A)ML
• secrets
• import
• Lodash
• Prettier

To use this default configuration, simply extend it in you own ESLint configuration using JavaScript configuration file .eslintrc.js:

require('@snowball-tech/eslint-config/patch')

module.exports = {
  extends: ['@snowball-tech/eslint-config'],
}

Ignored files

Ignored files are defined in the ignorePatterns config of the base configuration.

Complete configuration

You also have the possibility to use the full configuration, including:

• base rules (including promise & unicorn)
• HTML
• JSON/JSONC/JSON5
• Markdown
• SQL
• Y(A)ML
• secrets
• React, hooks and JSX accessibility
• import
• TypeScript
• Type checking linting
• Next.JS
• Jest and Testing Library
• Lodash
• MDX and Storybook
• Perfectionist
• TailwindCSS
• Prettier

require('@snowball-tech/eslint-config/patch')

module.exports = {
  extends: ['@snowball-tech/eslint-config/full'],
}

Make your own configuration

Finally, you can also compose you own configuration using each set of configuration exposed by the config.

To do so, simply extend the configuration you want to use in your own ESLint and pick whichever you want in the list below:

It's recommended to always include the base configuration in the first position.

Note that the base configuration also contains the default ignorePatterns.

{
  "extends": [
    "@snowball-tech/eslint-config/base",
    "@snowball-tech/eslint-config/html",
    "@snowball-tech/eslint-config/json",
    "@snowball-tech/eslint-config/markdown",
    "@snowball-tech/eslint-config/sql",
    "@snowball-tech/eslint-config/yml",
    "@snowball-tech/eslint-config/secrets",
    "@snowball-tech/eslint-config/import",
    "@snowball-tech/eslint-config/typescript",
    "@snowball-tech/eslint-config/typescript-with-type-checking",
    "@snowball-tech/eslint-config/react",
    "@snowball-tech/eslint-config/next",
    "@snowball-tech/eslint-config/jest",
    "@snowball-tech/eslint-config/testing-library",
    "@snowball-tech/eslint-config/lodash",
    "@snowball-tech/eslint-config/storybook",
    "@snowball-tech/eslint-config/perfectionist",
    "@snowball-tech/eslint-config/tailwind",
    "@snowball-tech/eslint-config/prettier"
  ]
}

⚠️ Important notes: when composing your own configuration, try to keep the configurations files in the order above to ensure the proper behavior of the linter.

Prettier must always be the last!

typescript-with-type-checking must always be after typescript!

Note that enabling type checking linting might have a serious impact on your linter performances. Also note that when enabling type checking linting, you will have to add additional configuration to your own linter configuration:

module.exports = {
  // [...] skipped for brevity.

  parserOptions: {
    // You can also use `__dirname`.
    tsconfigRootDir: './',
  },

  // [...] skipped for brevity.
}

Also, to improve performances, you can specify the tsconfig.json file name(s) you want to use instead of relying on project: true. For example:

module.exports = {
  // [...] skipped for brevity.

  parserOptions: {
    project: ['apps/**/tsconfig.json', 'packages/**/tsconfig*.json'],
    // You can also use `__dirname`.
    tsconfigRootDir: './',
  },

  // [...] skipped for brevity.
}

See https://typescript-eslint.io/linting/typed-linting/#how-is-performance and more generally see https://typescript-eslint.io/linting/typed-linting/ for more information

Of course, you can also extend any other configuration coming from any other config or plugin and add you own rules and overrides to your configuration.

Development

If you want to contribute, update or edit this ESLint configuration:

• First, install the needed dependencies:

yarn

Or (if you use NPM):

npm install

• Make the modifications you want
• Test your updates

All your modification should be immediately picked up by the linter in your IDE or using the CLI scripts, so you can check that everything works as expected.

• Commit and push your changes and open a Pull Request.
• When your changes are approved and merged in the main branch, a new release will be automatically created and published to NPM.

Useful Commands

• yarn run format-fix to format the code according to our formatting guidelines (using Prettier);
• yarn run lint-fix: to check that the code matches our coding guidelines and automatically fix what can be fixed (using ESLint);
• yarn run test: run all the unit tests;
• yarn run test-dev: run the tests for modified components and re-trigger runs everytime something is modified;

Linting & Formatting

See the dedicated CONVENTIONS.md and TOOLING.md documentations.

Dependencies

Always remember to add dependency if you really need it to avoid cluttering the packages and degrading the performance both in the developers and users side.

It is your duty as a member of the Snowball's engineering team to help mainting the dependencies up to date. This means that you are expected and should help reviewing, testing and merging dependencies updates PRs on a regular basis.

The best way to do so is to regularly check the Renovate dashboard and the list of Pull Requests, for example every morning at the beginning of your day.

Also, see the dedicated TOOLING.md documentation for more information.

Tooling

See the dedicated TOOLING.md documentation.

Contributing

See the dedicated CONTRIBUTING.md documentation.

Conventions

See the dedicated CONVENTIONS.md documentation.

Help and feedback

If you have any questions or feedback, feel free to reach out to us using this repository issues or discussions.

You can also use the internal #engineering Slack channel if you are a member of the Snowball tech team.