Linting TypeScript in 2023 Code

Demo app for linting React and TypeScript with typescript-eslint, formed from my template-typescript-node-package. ✨

<img alt="Code Style: Prettier" src="https://img.shields.io/badge/code_style-prettier-21bb42.svg" />
<a href="https://github.com/JoshuaKGoldberg/linting-typescript-in-2023/blob/main/.github/CODE_OF_CONDUCT.md">
    <img alt="Contributor Covenant" src="https://img.shields.io/badge/code_of_conduct-contributor_covenant-21bb42" />
</a>
<a href="https://github.com/JoshuaKGoldberg/linting-typescript-in-2023/blob/main/LICENSE.md">
    <img alt="License: MIT" src="https://img.shields.io/github/license/JoshuaKGoldberg/linting-typescript-in-2023?color=21bb42">
</a>
<a href="https://github.com/sponsors/JoshuaKGoldberg">
    <img alt="Sponsor: On GitHub" src="https://img.shields.io/badge/sponsor-on_github-21bb42.svg" />
</a>
<img alt="TypeScript: Strict" src="https://img.shields.io/badge/typescript-strict-21bb42.svg" />

Usage

First make sure you have Node installed and Yarn installed. Then, after forking the repo from GitHub:

git clone https://github.com/<your-name-here>/linting-typescript-in-2023
cd linting-typescript-in-2023
yarn

React Site Demo

To start a Next dev server, yarn dev. It displays a page with four buttons, each of which is meant to set the page background to a random color.

1. "Violate await-thenable": Shows what happens when code violates @typescript-eslint/await-thenable
2. "Violate no-floating-promises": Shows what happens when code violates @typescript-eslint/no-floating-promises
3. "Violate no-misused-promises": Shows what happens when code violates @typescript-eslint/no-misused-promises
4. "This may fail, safely": It works, no issues!

Each of those lint rules are disabled in .eslintrc.cjs. Uncomment those disables and run yarn lint to enable the rules and see their complaints in source code.

Development

See .github/CONTRIBUTING.md. Thanks! 💖

Contributors

Vim 📖

János Orcsik 📖