@ryanatkn/eslint-config

an ESLint config for TypeScript, Svelte, and Prettier

npm i -D @ryanatkn/eslint-config

I use this ESLint config for TypeScript and Svelte in all of my projects. It's fairly strict, adding many rules beyond the ESLint recommended config. It extends the typescript-eslint strict and stylistic typechecked configs, modifying or removing some rules and adding others. See index.js for details.

It's designed to complement TypeScript and Prettier, so all redundant rules are omitted. It doesn't use the Prettier ESLint plugin - you can add it yourself, I prefer running Prettier with --check separately.

To distinguish linting problems from type errors visually in your editor, all of the rules are set to warn, not error, and users are expected run eslint --max-warnings 0 to treat them as errors when desired, like in CI. (my preference is to block CI on all linting problems) This works well to get yellow squigglies in text editors for linting problems while reserving red for type errors, without losing other error behaviors.

Have any questions or change requests? Open issues or drop by my Discord. I'm happy to discuss my choices - if something feels restrictive without fixing actual mistakes, it's likely to reduce cognitive load when reading code.

⚠️ Some rules may be annoyingly strict and you should override to your preference. Some rules require tsconfig options like strictNullChecks, and more nags go way if you enable noUncheckedIndexedAccess and exactOptionalPropertyTypes. (I personally don't use these yet, will revisit) Some annoyances are caused by bugs or limitations in the implementations. For example @typescript-eslint/no-unnecessary-condition appears to have both bugs and limits, but it also catches many easy-to-make mistakes. If anything is too cumbersome or lax for your taste, see below for the simple way to change the global rules, and maybe hop on Discord to discuss.

⚠️ The peer dependency versions may be overly restrictive. Please let me know if it's causing a problem.

Usage

Install ESLint dev dependencies with TypeScript and Svelte plugins via npm (here's the package on npm):

npm i -D eslint \
         typescript-eslint \
         eslint-plugin-svelte \
         @ryanatkn/eslint-config

Then add your ESLint config file:

// eslint.config.js
import {configs} from '@ryanatkn/eslint-config';

export default configs;

To override rules, you can map or modify configs or mutate the exported ts_config and svelte_config:

// eslint.config.js
import {configs, ts_config, svelte_config} from '@ryanatkn/eslint-config';

ts_config.rules['no-console'] = 1;

svelte_config.rules['svelte/button-has-type'] = 0;

export default configs;

Instead of the values 'off', 'warn', and 'error', this config uses 0 (off) and 1 (warn). Because it doesn't use errors, this feels clearer, but you can use whichever you prefer. Using numbers also makes it easy to distinguish this config's rules from the configs extended from eslint, typescript-eslint, and eslint-plugin-svelte when inspecting the data.

⚠️ The dependencies do not provide appear to provide typed rules, but missing rules do throw errors at runtime.

Features

One useful opt-in feature is implemented with the following:

'no-warning-comments': [1, {terms: ['todo block']}],

This can be used to leave notes to yourself while you develop a set of changes, and combined with CI, you'll be blocked from merging until they're all resolved. I use this constantly:

// TODO BLOCK
// TODO BLOCK do the thing
// todo block is case insensitive

VSCode setup

To make the VSCode ESLint plugin work with Svelte, add the following to VSCode's settings.json:

{
    // ctrl+shift+P then `> Preferences: Open Settings (JSON)`
    // ...other config
    "eslint.validate": ["svelte", "javascript", "javascriptreact"],
}

See also the eslint-plugin-svelte integrations docs.

Develop

Edit index.js and see the ESLint docs. Run npm link ../eslint-config from projects in sibling directories to test your changes.

Publish

This repo uses changesets:

npm i -g @changesets/cli # install yourself, it's not a dev dep, maybe it should be
changeset # add a changeset
git add .
git commit -am "some message, maybe the same as the changeset"
git push
changeset version # when ready to publish
changeset publish
git commit -am vX.Y.Z
git push
git push --tags

See the official docs for npm version and npm publish.

Credits 🐢_🐢🐢

ESLint ∙ typescript-eslint ∙ eslint-plugin-svelte ∙ TypeScript ∙ Svelte ∙ Prettier & more

License 🐦

public domain ⚘ The Unlicense