Implementation

• Monorepo friendly: The @under-io/eslint package comes with direct dependencies on all the necessary ESLint plugins, eliminating the need for each individual project to handle peer dependencies. This approach guarantees that the installed plugin versions have been thoroughly tested for compatibility with one another, streamlining the setup process and enhancing overall stability.

• Battle tested: The @under-io/eslint rules have been vetted on large production monorepos, acrossa broad set of projects, teams, and requirements. These rules embody a way of working that scales.

• Designed for Prettier: The @under-io/eslint ruleset is intentionally designed to be paired with the Prettier code formatter. This synergy streamlines development by sparing developers from being inundated with lint "errors" for minor concerns such as spaces and commas. These issues are resolved automatically when you save or commit a file. Prettier also circumvents unnecessary debates, as its default settings have undergone extensive community discussions and widespread adoption, eliminating the need to rehash established conventions.

• Explicit: The ruleset deliberately refrains from importing any "recommended" templates from other ESLint packages (other than comments). This choice alleviates concerns related to precedence issues arising from import order and mitigates the confusion associated with files overriding or undoing settings from one another. Instead, the ruleset takes a transparent approach by explicitly defining all the rules it deems important, ensuring clarity and consistency in rule configuration.

• Minimal configuration: To implement this ruleset, you'll need to configure your ..eslintrc.js file by selecting one primary "profile" and, if necessary, one or two "mixins" to address specific use cases. Our aim is to streamline repository maintenance by offering a concise collection of .eslintrc.js configurations that can be shared across various projects. Occasionally, this approach may include rules that have no impact on a particular project. However, in practice, the cost of installing and executing unused rules proves to be minimal.

Getting Started

Implementing the ruleset into your project is an easy and straightforward process. Start by installing the package, then proceed to generate an .eslintrc.js configuration file and choose the relevant project profile. Additionally, you have the option to incorporate "mixins" to activate supplementary rules based on your project's needs.

Installation

To install the package, do this:

$ cd your-project-folder

$ npm install --save-dev eslint typescript @under-io/eslint

Choose a Profile

The ruleset currently offers support for two distinct "profile" strings. These profiles allow you to choose the appropriate set of lint rules tailored to your specific project needs.

• @under-io/eslint/profile/node - This profile enables lint rules designed for a broad-spectrum Node.js project, typically associated with web services. It also enables security rules that consider the possibility of the service handling potentially malicious inputs from untrusted users.

• @under-io/eslint/profile/web-app - This profile enables lint rules that cater to web applications, encompassing security guidelines that pertain to web browser APIs like DOM.

  It's also the recommended profile if you're developing a library that may be utilized by both Node.js and web applications, ensuring consistent code quality across different environments.

After choosing a profile, create an .eslintrc.js config file that provides the NodeJS __dirname context for TypeScript. Add your profile string in the extends field, as shown below:

.eslintrc.js

// This is a workaround for https://github.com/eslint/eslint/issues/3458
require('@under-io/eslint/patch/modern-module-resolution');

module.exports = {
  extends: ['@under-io/eslint/profile/web-app'], // <---- put your profile here
  parserOptions: { tsconfigRootDir: __dirname },
};

The @under-io/eslint ruleset is designed and intended to be used in conjunction with the Prettier code formatter. For general instructions on setting that up, please refer to the Prettier docs.

Add Mixins

Optionally, you can add some "mixins" to your extends array to opt-in to some extra behaviors.

Important: Your .eslintrc.js "extends" field must load mixins after the profile entry.

• @under-io/eslint/mixins/react - This mixin enables some recommended additional rules for projects using the React library. These rules are selected via a mixin because they require you to:

  • Add "jsx": "react" to your tsconfig.json
  • Configure your settings.react.version as shown below. This determines which React APIs will be considered to be deprecated. (If you omit this, the React version will be detected automatically by loading the entire React library into the linter's process, which is costly.)

  Add the mixin to your "extends" field like this:

  .eslintrc.js

  // This is a workaround for https://github.com/eslint/eslint/issues/3458
  require('@under-io/eslint/patch/modern-module-resolution');
  
  module.exports = {
    extends: [
      '@under-io/eslint/profile/web-app',
      '@under-io/eslint/mixins/react', // <---- Add mixin
    ],
    parserOptions: { tsconfigRootDir: __dirname },
  
    settings: {
      react: {
        version: '18.0', // <---- Select React version
      },
    },
  };

License

Distributed under the MIT License. See LICENSE.txt for more information.

@under-io/eslint is part of the Under family of projects.