⚙

Neovim で Lit + Astro アプリを開発するための初期セットアップ

に公開
Neovim
Lit
Astro
tech

Neovim で Lit + Astro を使ったアプリケーション開発を始めるための初期セットアップ手順を紹介します。

📖 前提条件

  • Neovim がインストールされていること
  • Node.js と npm がインストールされていること

🚀 Astro のセットアップ

1. Astro のインストール

Astro プロジェクトを作成します。

npm create astro@latest

コマンドラインの指示に従い、プロジェクト名やテンプレートを選択します。

2. Astro の設定ファイルを書き換える

今回はプロジェクトを Typescript で管理したいので、Astro の設定ファイル astro.config.mjs を astro.config.ts にリネームし、以下のように書き換えます。

// astro.config.ts
import { defineConfig } from 'astro/config';

const config: ReturnType<typeof defineConfig> = defineConfig({
  site: 'https://example.com/', // ここは実際のサイトURLに変更してください
});

export default config;

3. Astro の Formatter の設定

Astro の Formatter として Prettier を使用します。今回は Neovim のプラグインで既にインストールされているので、 Prettier 自体はインストールしません。

Astro 用の Prettier プラグインをインストールします。

npm install --save-dev prettier-plugin-astro

Prettier の設定は以下のようにしました。

// .prettierrc.ts
import type { Config } from 'prettier';

const config: Config = {
  plugins: ['prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

export default config;

🔥 Lit & Typescript のセットアップ

1. Lit のインストール

Lit をプロジェクトに追加します。

npm install lit

2. Lit 補完プラグインのセットアップ

Typescript プラグインを利用して、Lit の補完を有効にします。以下のコマンドでプラグインをインストールします。

npm install --save-dev ts-lit-plugin

Typescript の設定ファイル tsconfig.json にプラグインの設定を追加します。

// tsconfig.json
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "ts-lit-plugin",
        "strict": true
      }
    ]
  }
}

tsconfig.json の全体像はこんな感じです。

{
  // 継承する設定ファイル
  "extends": "astro/tsconfigs/strict",
  // コンパイル対象のファイル
  "include": [".astro/types.d.ts", "**/*"],
  // 除外するファイル
  "exclude": ["dist"],
  // コンパイルオプション
  "compilerOptions": {
    // 最新のJavaScript仕様を使用
    "target": "es2022",
    // ESモジュールを使用
    "module": "esnext",
    // Nodeのモジュール解決方法を使用
    "moduleResolution": "nodenext",
    // DOM APIとESNEXTの機能を使用
    "lib": ["dom", "esnext"],
    // 厳密な型チェックを行う
    "strict": true,
    // ESモジュールとCommonJSモジュールを相互に変換する
    "esModuleInterop": true,
    // 型定義ファイル(*.d.ts)を生成
    "declaration": true,
    // ソースマップを生成(デバッグ時に使用)
    "sourceMap": true,
    // node_modules内の型チェックをスキップ
    "skipLibCheck": true,
    // `any`の暗黙的使用を許可
    "noImplicitAny": false,
    // デコレーターを使用
    "experimentalDecorators": true,
    // クラスフィールドを`defineProperty`で定義しない
    "useDefineForClassFields": false,
    // プラグインの設定
    "plugins": [
      {
        // Litのプラグイン
        "name": "ts-lit-plugin",
        // 厳密な型チェックを行う
        "strict": true
      }
    ]
  }
}

📚 参考

GitHubで編集を提案

Discussion