【第3回 コード整形 & VSCodeの拡張機能・設定編】基礎から学ぶJamstack構成のサイト開発

はじめに

株式会社メンバーズ Jamstack研究会の岸本です。
メンバーズではJamstackやヘッドレスCMSに取り組むエンジニアを増やすことを目的に「Jamstack研究会」が設立され、Jamstackの勉強会や研究を行っています。
本ブログシリーズでは、「Astro + microCMS + AWSを使用したJamstackなポータルサイトの開発手法」について皆様にお届けしています。

今回は、シリーズ第3回ということで、コード整形ツール、Visual Studio Codeの拡張機能の導入と設定についての記事になります。

本シリーズにおいて導入をおすすめする、Jamstackの開発体験をより良くするツールとそれに関連する拡張機能をご紹介します。Jamstack開発もフロントエンド開発のうちの1つであり、今回紹介するツールは他のフロントエンド開発でも使用できるため、ぜひ導入してみてください。

※前回の記事を読んでいない方は、「【第2回 Git準備】基礎から学ぶJamstack構成のサイト開発」をご覧ください。

前提 

• 本開発ではVisual Studio Code（以下VSCode）を使用します。
  今回紹介する拡張機能や設定はVSCodeのものとなるため、他のエディタには対応していない可能性があります。
• 開発にはmacOSを使用しています。（Windowsで実行する際に別途Windows用の手順が必要な場合があります。）
• パッケージ管理ツールはnpmを使用しています。

コード整形ツールとは

プログラミングにおいて、インデントを揃えたり、一定のルールに従ったコーディング方法に揃えることで可読性を高め、ソースコードの品質を高めることができるツールのことです。
開発者間でのコーディング方法も統一されるため、開発もよりスムーズになります。

コード整形で使用するツールの紹介 

今回導入するツールを紹介します。

Prettier
用途：フォーマット
.prettierrcなどのファイルに記載されたルールに従って、コードの整形を自動で行ってくれるツールです。
デフォルトでも多くの言語に対応しており、プラグインを導入することでデフォルトで対応している言語以外の整形も可能になります。

ESLint
用途：ルールのチェック
コードの解析を行い、設定したルールに従っているかどうかをチェックすることができるツールです。ルールに違反している場合は指摘したり、自動で修正することができます。
ルールはeslint.config.jsなどのファイルで管理します。
一部フォーマットの機能も備えており、Prettierと併用する場合は競合する場合があるため、Prettierのルールを無視するプラグインを導入するといった対応が必要になります。

EditorConfig
用途：エディタの設定、共有
インデントの数やスタイルなど、エディタの設定を.editorconfigというファイルで管理できるようにするツールです。
EditorConfigを使用せずとも使用するエディタの設定でこれらの設定は可能ですが、EditorConfigを使用するメリットとして、別のエディタ間での設定共有が可能というものがあります。

STEP1 ツールの導入 

それではツールの導入を行います。

Prettierの導入 

まずはnpmを使用してPrettierをインストールします。

npm install --save-dev prettier

Copy

加えて、今回の開発で使用しているAstroのフォーマットはデフォルトでは対応していないため、Astro用のプラグインもインストールします。

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

Copy

次にPrettierの設定ファイルを作成します。
Prettierの設定ファイルはいくつか書き方がありますが、今回は.prettierrcというファイル名で設定ファイルを作成します。JSONもしくはYAML形式で記述できる設定ファイルです。
他の書き方については公式ドキュメントのConfiguration Fileをご覧ください。

.prettierrcの中身は以下のように設定しました。

{
  "semi": true,
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "none",
  "plugins": ["prettier-plugin-astro"], 
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

Copy

以下に設定内容の解説を記します。

{
  "semi": true, // セミコロンを文末に必ずつける
  "printWidth": 120, // 120文字で折り返す
  "singleQuote": true, // 引用符を使用する際にシングルクォーテーションを使用する
  "trailingComma": "none", // オブジェクトなどカンマを使用する際に末尾にカンマを付与しない
  "plugins": ["prettier-plugin-astro"], // Astroのフォーマット用プラグインを使用します。
  "overrides": [ // Prettierの設定を上書きします。
    {
      "files": "*.astro", // .astroで終わるファイルを対象にルールを設定します。
      "options": {
        "parser": "astro" // Astro用プラグインを使用します。
      }
    }
  ]
}

Copy

その他の設定については公式ドキュメントのOptionsをご覧ください。

これでPrettierの導入は完了です。
package.jsonのscriptsにフォーマット用のコマンドを記載します。

"scripts": {
    "format": "prettier --write **/*.{css,scss,mjs,cjs,js,ts,astro,json} --ignore-path .prettierignore --no-error-on-unmatched-pattern"
}

Copy

記載したコマンドのオプションの説明は以下の通りです。

--write: このオプションを記載することでコマンド実行時にフォーマットをしてくれるようになります。
--ignore-path: Prettierでフォーマットしてほしくないものを記載したファイルを指定することができます。今回は.prettierignoreというファイルをプロジェクトルートに作成して記載しています。
--no-error-on-unmatched-pattern: 存在しないファイルがある場合にエラーが起きないようにします。

その他のコマンドのオプションは公式ドキュメントのCLIをご覧ください。

以下を実行することでプロジェクトルート配下の対応ファイルのフォーマットができるようになりました。

npm run format

Copy

実行すると、フォーマットしたファイルとフォーマットにかかった時間が表示されます。フォーマットの必要がなかった場合は (unchanged) が表示されます。

ESLintの導入

次にESLintを導入します。
ESLintは設定方式として古い形式とFlatConfigという新しい形式があります。v9からはFlatConfigがデフォルトになったことから今回はFlatConfigで設定を行っていきます。

npmコマンドでインストールします。

npm install --save-dev eslint

Copy

また、ESLintで使用する関連のライブラリもインストールします。

npm install --save-dev eslint-plugin-astro @typescript-eslint/parser eslint-config-prettier typescript-eslint globals @eslint/js astro-eslint-parser

Copy

導入したものは以下の通りです。

eslint-plugin-astro: Astro用のESLintプラグインです。
astro-eslint-parser: Astro用のESLintパーサーです。
@eslint/js: ESLintチームが推奨するルールを使用するために必要なプラグインです。
typescript-eslint: TypeScript用のESLintプラグインです。TypeScript用のおすすめルールも使用できます。
@typescript-eslint/parser: TypeScript用のESLintパーサーです。AstroにTypeScriptのパーサーを指定する際に使用します。
eslint-config-prettier: Prettierとの競合を防ぐために、ESLint側のフォーマットに関するルールを無効化するためのプラグインです。
globals: ESLintがグローバル変数に対してエラーを出さないようにするために必要なグローバル変数が格納されているJSONです。

次に設定ファイルを作成します。
FlatConfigではeslint.config.jsに記載します。

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import astroEslintParser from 'astro-eslint-parser';
import eslintPluginAstro from 'eslint-plugin-astro';
import globals from 'globals';
import configPrettier from 'eslint-config-prettier';

export default [
    {
        languageOptions: {
            globals: { // グローバル変数を設定
                ...globals.browser,
                ...globals.node
            }
        }
    },
    eslint.configs.recommended, // JavaScriptのおすすめ設定を追加
    ...tseslint.configs.recommended, // TypeScriptのおすすめ設定を追加
    ...eslintPluginAstro.configs['flat/recommended'], // Astroのおすすめ設定を追加

    {
        files: ['**/*.astro'], // .astroの設定
        languageOptions: {
            parser: astroEslintParser, // パーサーを設定
            parserOptions: {
                parser: '@typescript-eslint/parser', // TypeScriptのパーサーを設定
                extraFileExtensions: ['.astro']
            }
        },
        rules: { // 手動で好みの設定を追加
            'prefer-const': 2, // 再代入がない限り const を強制
            'no-console': 'off', // console.log();OK
            'no-var': 2, // var禁止
            'no-unused-vars': 'off', // 使っていない変数あってもOK
            'computed-property-spacing': 2, // 配列のindexには空白入れない
            '@typescript-eslint/no-explicit-any': 2 // any禁止
        }
    },
    {
        ignores: ['dist', 'node_modules', '.github', '.astro'] // ESLintの対象外を指定
    },
    configPrettier // Prettierとの競合をなくす
];

Copy

これでESLintの導入は完了です。
package.jsonのscriptsにリンター用のコマンドを記載します。

"scripts": {
    "lint": "eslint ."
}

Copy

以下を実行することでプロジェクトルート配下の対応ファイルに対してESLintを実行できるようになりました。

npm run lint

Copy

先ほど再代入がない限りはconstを使用するルールを設定しましたが、再代入しない例として、let a = 1;をLayout.astroに記載して実行すると、以下のようにファイル名とそのエラー内容が表示されました。

EditorConfigの導入

最後にEditorConfigを導入します。
EditorConfigは.editorconfigファイルで設定を行います。プロジェクトルートにファイルを作成し、以下を設定します。

root = true

[*]
indent_style = space
indent_size = 4

Copy

root = true：これを記載しないとEditorConfigはルートまで遡って.editorconfigを探すため、今回のプロジェクトルートのEditorConfigを参照してもらうための設定となります。
indent_style：タブを押した際にスペース（ソフトタブ）かタブ（ハードタブ）を指定できます。
indent_size：インデントを半角スペースいくつ分にするかを指定できます。

PrettierはEditorConfigの設定を反映してくれるため、インデントの設定もEditorConfig通りにフォーマットしてくれます。Prettierが反映してくれるEditorConfigの設定の詳細はPrettier公式ドキュメントをご確認ください。

.editorconfigファイルを作成した時点でPrettierでフォーマットした際にEditorConfigの設定は反映されるのですが、VSCodeの拡張機能を導入することでフォーマットせずともインデント設定などが反映されるようになります。
PrettierやESLintも同様、拡張機能を導入することでより便利になるので次に導入していきます。

STEP2 VSCode拡張機能の導入 

導入したツール3つとも公式の拡張機能があるためそれらを導入していきます。

Prettier - Code formatter
拡張機能ID：esbenp.prettier-vscode
導入し、Editor: Format On Saveの設定を行うことでファイル保存時に保存したファイルに対して自動でフォーマットを行うことができるようになります。
※実際に動作させるにはSTEP3で紹介するVSCodeの設定が必要です。

ESLint
拡張機能ID：dbaeumer.vscode-eslint
導入することでエディタ画面上にESLintのエラーがリアルタイムで表示されるようになります。
先ほど再代入がない限りはconstを使用するルールを設定しましたが、以下のように再代入しないletがあるとリアルタイムでエラーを表示してくれるようになります。
※実際に動作させるにはSTEP3で紹介するVSCodeの設定が必要です。

EditorConfig for VS Code
拡張機能ID：EditorConfig.EditorConfig
導入することで.editorconfigの内容でVSCodeの設定を上書きしてくれるようになります。インデントの設定や末尾の設定に対応しています。

これらを導入することでより効率よく開発を進めることができるかと思います。

@recommendedの対応

.vscode/extensions.jsonに導入した拡張機能IDを記載することで、VSCodeを使用しているチームで容易に拡張機能の情報を共有をすることができます。
自身で導入している全ての拡張機能を記載すれば良いというわけではなく、今回のプロジェクトで開発するにあたってチームメンバー全員に共通して入れておいた方が良い拡張機能を記載することをおすすめします。

"recommendations":[
    "astro-build.astro-vscode", // Astro
    "dbaeumer.vscode-eslint", // ESLint
    "esbenp.prettier-vscode", // Prettier
    "EditorConfig.EditorConfig" // EditorConfig
]

Copy

この記載をすると、コマンドパレット（Windows/Linux: Shift + Ctrl + P, Mac: Shift + ⌘ + P）から「お勧めの拡張機能を表示（Show Recommended Extensions）」を呼び出すことで、.vscode/extensions.jsonに記載したおすすめの拡張機能が表示されます。

STEP3 VSCodeの設定 

拡張機能のPrettierやESLintが動作するようにVSCodeの設定を行なっていきます。
これらの設定は.vscode/settings.jsonに記載することでチームメンバーと設定を共有することができます。

.vscode/settings.jsonに以下を記載します。

{
    "prettier.prettierPath": "./node_modules/prettier",
    "prettier.documentSelectors": ["**/*.astro"],
    "eslint.useFlatConfig": true, // FlatConfigを使用するように設定
    "eslint.workingDirectories": ["./"],
    "[astro]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode", //フォーマットをprettierに指定
        "editor.formatOnSave": true //保存時にコード生成
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }
}

Copy

VSCodeの設定では”[言語]”配下に設定を記載することでそれぞれのファイルの種類ごとに設定をすることができます。
今回の設定では、AstroやTypeScript、JSONなどに保存するごとにPrettierのフォーマットがかかるようにしています。

これらの設定後、VSCodeを再起動することで各種ツール、拡張機能が正常に動作するようになります。

次回予告 

第3回は以上となります。
今回はコード整形ツールの導入 & VSCodeの設定を行いました。ツールを導入し、拡張機能と組み合わせることで効率よく開発を行うことができます。
また、チームメンバーと設定を共有することで環境構築も容易になるため、ぜひご活用ください。

次回の第4回目は「HTML、 CSS、 JS」についてです。
第4回目の記事もぜひご覧ください。