A highly opinionated, yet maintainable, style guide with first class support for TypeScript.
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).
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
.
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.
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.
This config provides support for React. You can use this config by extending
modern-classic/configs/react
.
This config provides support for Vue 2. You can use this config by extending
modern-classic/configs/vue
.
This config provides support for Vue 3. You can use this config by extending
modern-classic/configs/vue3
.
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.
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
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
};