フロントエンド開発の小さな詰まり｜lintの自動修正・import.meta.glob・CodeSandbox

はじめに

調べれば1分で解決するのに、知らないと止まってしまう細かい場面をまとめました。

Next.jsなどでlintのエラーが出たとき、多くは自動修正できます。

$ npm run lint -- --fix

**-- が必要です。**次のように書いても、オプションはnpmに解釈されてスクリプト側に渡りません。

# NG: --fix がlintコマンドに渡らない
$ npm run lint -fix
$ npm run lint --fix

npm run <script> -- <引数> と書くことで、-- 以降がスクリプト本体への引数になります。ハイフン2つ＋スペース＋オプションという形を覚えておいてください。

pnpmやyarnでは -- なしでも渡ることがありますが、npmでは必要です。

自動修正が効くのは、インデントやクォートの種類、セミコロンの有無といった書き方の問題だけです。未使用の変数や型の不整合は、自分で直す必要があります。

Astroのファイルを編集していたときに出たエラーです。

プロパティ'glob'は型'ImportMeta'に存在しません。

import.meta.glob はViteが提供する機能なので、TypeScriptにその型定義を教える必要があります。tsconfig.json に追加します。

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

types を明示的に指定すると、**指定したものだけが読み込まれます。**すでに types に他の項目が書かれている場合は、消さずに追加してください。

"types": ["vite/client", "node"]

エディタ上のエラーが消えない場合は、TypeScriptサーバーの再起動が必要です。VSCodeなら Ctrl + Shift + P から TypeScript: Restart TS Server を実行してください。設定を直したのに赤線が残る、というときの定番の対処です。

エディタとプレビューの左右の配置を入れ替えたいときの操作です。

Ctrl + Shift + P でコマンドパレットを開き、View: Flip Preview Layout を選択します。

どれも一度知ってしまえば迷わないものばかりです。特に npm run <script> -- <引数> の書き方は、lint以外の場面でも使うので覚えておく価値があります。