[[ESLint]]のv9を[[pnpm]]ベースのプロジェクトで使ってみた記録。
## 環境
| 対象 | バージョン |
| --------------------- | ----------- |
| [[Ubuntu]] | 24.04.1 LTS |
| [[pnpm]] | 9.15.4 |
| [[ESLint]] | 9.25.0 |
| [[TypeScript]] | 5.8.3 |
| [[typescript-eslint]] | 8.30.1 |
## プロジェクト作成
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://eslint.org/icon.svg" />
<span class="link-card-v2-site-name">eslint.org</span>
</div>
<div class="link-card-v2-title">
Getting Started with ESLint - ESLint - Pluggable JavaScript Linter
</div>
<div class="link-card-v2-content">
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your ...
</div>
<img class="link-card-v2-image" src="https://eslint.org/og?title=Getting%20Started%20with%20ESLint&summary=A%20pluggable%20and%20configurable%20linter%20tool%20for%20identifying%20and%20reporting%20on%20patterns%20in%20JavaScript.%20Maintain%20your%20code%20quality%20with%20ease.%0A&is_rule=false&recommended=&fixable=&suggestions=" />
<a href="https://eslint.org/docs/latest/use/getting-started"></a>
</div>
```console
mkdir eslint9-sandbox
cd eslint9-sandbox
pnpm init
```
```console
$ pnpm create @eslint/config@latest
@eslint/create-config: v1.8.1
✔ What do you want to lint? · javascript
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · no / yes
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:
eslint, @eslint/js, globals, typescript-eslint
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · pnpm
```
```console
pnpm add -D typescript prettier
pnpm exec tsc --init
```
## 設定ファイル
生成された `eslint.config.mjs` は以下。
```js
import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import { defineConfig } from "eslint/config";
export default defineConfig([
{ files: ["**/*.{js,mjs,cjs,ts}"], plugins: { js }, extends: ["js/recommended"] },
{ files: ["**/*.{js,mjs,cjs,ts}"], languageOptions: { globals: globals.browser } },
tseslint.configs.recommended,
]);
```
## 動作確認
[[ESLint]]は反応してそう。
![[Pasted image 20250419155658.png]]
### await漏れが警告にならない
```ts
async function asyncFunction(): Promise<void> {
return;
}
// awaitがないので警告してほしい
asyncFunction();
```
`tseslint.configs.recommendedTypeChecked` を追加して型に関する警告も有効にする。その際、`languageOptions.parserOptions.project` の指定が必要。
```js
import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
files: ["**/*.{js,mjs,cjs,ts}"],
plugins: { js },
extends: ["js/recommended"],
},
{
files: ["**/*.{js,mjs,cjs,ts}"],
languageOptions: {
globals: globals.browser,
// 追加
parserOptions: {
project: "./tsconfig.json",
},
},
},
tseslint.configs.recommended,
// 追加
tseslint.configs.recommendedTypeChecked,
]);
```