Skip to content

docs: blog post for v7 #8400

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion docs/packages/TypeScript_ESLint.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,23 @@ This package exports the following:
| `parser` | [Our parser](./Parser.mdx) |
| `plugin` | [Our plugin](./ESLint_Plugin.mdx) |

## Installation

```bash npm2yarn
npm i typescript-eslint
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TS eslint is usually used as a dev tool. So would it make sense to instruct to install it with -D?

```

### Migrating from "legacy" config setups

If you're migrating from a "legacy" `.eslintrc` configuration setup you likely have our plugin and parser installed separately. This package includes these as dependencies so you can freely uninstall your local references:

```bash npm2yarn
npm un @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

## Usage

The `tseslint.config` function is a simple utility which does a few things. First and foremost it is a strictly typed function - meaning it allows you to write type-safe configs!
The `config` function is a simple utility which does a few things. First and foremost it is a strictly typed function - meaning it allows you to write type-safe configs!

The simplest usage would be:

Expand Down
101 changes: 101 additions & 0 deletions packages/website/blog/2024-02-12-announcing-typescript-eslint-v7.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
---
authors:
- image_url: /img/team/bradzacher.jpg
name: Brad Zacher
title: typescript-eslint Maintainer
url: https://github.com/bradzacher
description: Announcing the release of typescript-eslint's stable v7 release
slug: announcing-typescript-eslint-v7
tags: [breaking changes, typescript-eslint, v6, v7, flat configs]
title: Announcing typescript-eslint v7
---

[typescript-eslint](https://typescript-eslint.io) is the tooling that enables standard JavaScript tools such as [ESLint](https://eslint.org) and [Prettier](https://prettier.io) to support TypeScript code.

We've been working on infrastructure improvements that will help ensuring long-term interoperability with other tools in the ecosystem. In particular this major release tightens our dependency requirements to help set us up for ESLint v9 and includes a new package `typescript-eslint` providing full support for flat config files!

## Breaking Changes

This is a small major release with just three breaking changes:

1. Update Node.js engine requirement to `^18.18.0 || >=20.0.0`. This means we are dropping support for Node 16, 19, and Node 18 versions prior to `18.18.0`. Note that this is the same requirement that ESLint v9 will impose.
1. Update the TypeScript peer dependency requirement to `>=4.7.4`.
1. Update the ESLint peer dependency requirement to `^8.56.0`.

For most users this means that an upgrade from v6 should just look like this:

```bash npm2yarn
npm i eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

<!-- truncate -->

### Into the Future

The intent behind this release is for us to constrain variance in our dependencies to help set us up for the future. The upcoming ESLint v9 release will contain many API removals - all of which had replacements added in some of the latest ESLint v8 releases. By enforcing that you have the latest ESLint v8 release we ensure that you have the replacement APIs. This significantly reduces our maintenance burden and should mean we can release v9 support sooner and with less pain and effort.

## New Features - Flat Config Support

There is one big feature that's also shipping with this release:<br />
🎉 **_Official support for ESLint Flat Configs!_** 🎉

With v7 we're releasing a new package, **`typescript-eslint`**. This package can be imported within your [flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new) to access our configs, plugin, and parser. This package also exports a utility function called `config` which will allow you to write type-checked configuration files!

### Switching to `typescript-eslint`

Because this new package includes dependencies on our plugin and parser, you can replace those dependencies entirely:

```bash npm2yarn
npm un @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm i typescript-eslint
```

The simplest of this new tooling would be the following which will enable the ESLint recommended config and our recommended config (including turning on our plugin and parser):

```js title="eslint.config.js"
// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
);
```

If you're into having a bit more control then you can also declare our plugin and parser in your config - both are exported from this package! For example this config would enable our plugin, our parser, and type-aware linting with a few of our popular type-aware rules:

```js title="eslint.config.js"
// @ts-check

import tseslint from 'typescript-eslint';

export default tseslint.config({
plugins: {
'@typescript-eslint': tseslint.plugin,
},
languageOptions: {
parser: tseslint.parser,
parserOptions: {
project: true,
},
},
rules: {
'@typescript-eslint/no-unsafe-argument': 'error',
'@typescript-eslint/no-unsafe-assignment': 'error',
'@typescript-eslint/no-unsafe-call': 'error',
'@typescript-eslint/no-unsafe-member-access': 'error',
'@typescript-eslint/no-unsafe-return': 'error',
},
});
```

You don't have to use this package if you haven't yet migrated to flat configs.
But once you do, this is our recommend way to set up our tooling.

For more information check out:

- [ESLint's docs on flat configs](https://eslint.org/docs/latest/use/configure/configuration-files-new)
- [ESLint's docs on migrating to flat configs](https://eslint.org/docs/latest/use/configure/migration-guide)
- [The `typescript-eslint` package documentation](/packages/typescript-eslint)
4 changes: 3 additions & 1 deletion packages/website/docusaurusConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const githubUrl = 'https://github.com/typescript-eslint/typescript-eslint';
const presetClassicOptions: PresetClassicOptions = {
blog: {
blogSidebarCount: 'ALL',
beforeDefaultRemarkPlugins: [...beforeDefaultRemarkPlugins],
remarkPlugins,
},
docs: {
id: 'rules-docs',
Expand All @@ -32,7 +34,7 @@ const presetClassicOptions: PresetClassicOptions = {
...beforeDefaultRemarkPlugins,
generatedRuleDocs,
],
remarkPlugins: remarkPlugins,
remarkPlugins,
exclude: ['TEMPLATE.md'],
breadcrumbs: false,
},
Expand Down