Eslint-config-modern-classic NPM

`eslint-config-modern-classic`

A highly opinionated, yet maintainable, style guide with first class support for TypeScript.

Introduction

This is the ESLint config for the Modern Classic style guide. While TypeScript gets first class support in our style guide, in the process of supporting TypeScript, we do most of the work to support JavaScript, so we might as well support JavaScript as well. That said, this style guide has 5 configs intended for usage (ignore the common config in the configs directory).

`default` config

The default config, which can be used by extending either modern-classic or modern-classic/configs/default (more on that later), provides support for JavaScript and TypeScript. This config is equivalent to extending modern-classic/configs/javascript and modern-classic/configs/typescript.

`javascript` config

If you don't need TypeScript support (why are you following a style guide with first class TypeScript support?), then you can extend modern-classic/configs/javascript. This config uses the same ESLint rules as our TypeScript config (minus the TypeScript specific rules), and parses JavaScript using @babel/eslint-parser.

`typescript` config

This boy is the star of the show. This config, which you can use by extending modern-classic/configs/typescript provides just that TypeScript support using the ever popular @typescript-eslint/parser.

`react` config

This config provides support for React. You can use this config by extending modern-classic/configs/react.

`vue` config

This config provides support for Vue 2. You can use this config by extending modern-classic/configs/vue.

`vue3` config

This config provides support for Vue 3. You can use this config by extending modern-classic/configs/vue3.

`prettier` config

What's this? An ESLint config with prettier support out of the box? Yup. Just extend modern-classic/configs/prettier. IMPORTANT: if you are combining configs (which we openly support), this config MUST be last. You have been warned.

Installation

If you looked at our package.json, you may have noticed something strange. There isn't a million peerDependencies. In fact, there is only 2 peerDependencies. How? Is it witchcraft? It might as well be, and it comes from a very unlikely source: Microsoft. Way back in 2019, the Rush Stack team got tired of dealing with the peerDependency problem, so they proposed a change to the core of ESLint. Predictably, the ESLint team decided they wanted nothing to do with it because it doesn't fit "their vision" (side note: if anyone comes up with another linter that can be extended as well as ESLint, let me know. This style guide will switch ASAP). So, they decided to publish their patch for others to use. That patch @rushstack/eslint-patch, allows us to hard depend on everything except ESLint, TypeScript and Prettier. Neat, huh?

All that said, all you need to do is install our config and 2 other dependencies. If you want to use the prettier config, you'll also need prettier.

NPM

npm install --save-dev eslint-config-modern-classic eslint typescript

Yarn

yarn add -D eslint-config-modern-classic eslint typescript

pnpm

pnpm add -D eslint-config-modern-classic eslint typescript

Usage

The patched mentioned in the last section, does come with one minor drawback. Because it's a JavaScript patch that overrides some internals of ESLint, your config file must be a JavaScript config. Tradeoffs are something that has to happen. Basic usage is listed below. The config below has React and Prettier support enabled, so if you don't want that, you can simply remove those.

.eslintrc.js:

require("eslint-config-modern-classic/patch/eslint-patch");

/** @type {import("eslint").Linter.Config} */
module.exports = {
  env: {
    // Don't forget to set your environments
    browser: true
  }
  extends: [
    // This config enables JS/TS support
    "modern-classic",

    // If you want React support
    "modern-classic/configs/react",

    // If you want Vue 2 support
    "modern-classic/configs/vue",

    // If you want Vue 3 support
    "modern-classic/configs/vue3",

    // If you want Prettier support
    // DANGER: THIS CONFIG MUST BE LAST!!!!!
    "modern-classic/configs/prettier"
  ],
  root: true
};

If you enable prettier, you'll also need a prettier config file. Below is our recommended prettier config, in JS form since ESLint's config is already in JS form.

.prettierrc.js:

module.exports {
  arrowParens: "always",
  bracketSameLine: false,
  bracketSpacing: true,
  endOfLine: "lf",
  printWidth: 80,
  proseWrap: "preserve",
  quoteProps: "as-needed",
  semi: true,
  singleQuote: false,
  tabWidth: 2,
  trailingComma: "none",
  useTabs: false
};