CloudFlareにデプロイするためのRemixプロジェクト ESlintを導入してみる

Last updated at 2024-07-27Posted at 2024-07-27

概要

今までさんざんいじってきたRemixのCloudflareテンプレートのRemixプロジェクトでESlintが動くようにしてみる。

前提

Cloudflareテンプレートを指定してRemixのアプリケーションが作成されていること。

説明に使うコードの時系列は下記の後になる。

ちなみにESlintはPHPLaravelでいうところのLaraStan（PHPStan）的な立ち位置の静的解析ツールらしい。

方法

実はデフォルトでESlint関連パッケージはインストールされている、package.jsonのdevDependenciesにESlint系のパッケージが存在していることを確認

package.json

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^6.7.4",
  "@typescript-eslint/parser": "^6.7.4",
  "eslint": "^8.38.0",
  "eslint-import-resolver-typescript": "^3.6.1",
  "eslint-plugin-import": "^2.28.1",
  "eslint-plugin-jsx-a11y": "^6.7.1",
  "eslint-plugin-react": "^7.33.2",
  "eslint-plugin-react-hooks": "^4.6.0",
},

念の為下記を実行してパッケージをインストール
```
npm install
```
.eslintrc.cjsというファイルがプロジェクトルートディレクトリに存在することを確認
プロジェクトルートディレクトリで下記を実行してESlintを実行し、まずはコマンドが問題なく通ることを確認
```
npm run lint
```

ちゃんとエラーが検出されるか確認するためapp/root.tsxを下記のように修正（使用していない定数hogeを定義）

app/root.tsx

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export function Layout({ children }: { children: React.ReactNode }) {
  const hoge = "hoge";
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

$ npm run lintを実行して下記の様にエラー検出されれば完了（TypeScriptのバージョン起因の警告が出ているが警告レベルなので一旦無視している）

$ npm run lint

> lint
> eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.4.0

YOUR TYPESCRIPT VERSION: 5.4.5

Please only submit bug reports when using the officially supported version.

=============

/Users/shun/workspace/02_study/remix/todo-cloudflare-d1/app/root.tsx
  10:9  error  'hoge' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (1 error, 0 warnings)

※確認が終わったらroot.tsxのconst hoge = "hoge";の記載は削除して元に戻しておくこと。

参考文献

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up