👀
AstroのプロジェクトにESLintを導入する
eslint-plugin-astro
Astro のプロジェクトに ESLint を導入したので、メモとして残しておきます。
基本的には Astro の公式ドキュメントで紹介されている、eslint-plugin-astro のドキュメントに従って進めていきます。
ESLint とプラグインのインストール
ESLint、eslint-plugin-astro に加えて、アクセシビリティチェックのために eslint-plugin-jsx-a11y をインストールします。このプロジェクトでは TypeScript は使っていないので、TypeScript 用のプラグインはインストールしません。
npm install --save-dev eslint eslint-plugin-astro eslint-plugin-jsx-a11y
ESLint の設定ファイルを作成
今回は ESLint の Flat Config を使用します。プロジェクトのルートに eslint.config.js ファイルを作成し、必要な記述を追加します。
最終的に完成した eslint.config.js は以下の通りです。
eslint.config.js
import js from '@eslint/js';
import globals from 'globals';
import eslintPluginAstro from 'eslint-plugin-astro';
import eslintConfigPrettier from 'eslint-config-prettier';
export default [
js.configs.recommended,
eslintConfigPrettier,
...eslintPluginAstro.configs['flat/recommended'],
...eslintPluginAstro.configs['flat/jsx-a11y-recommended'],
{
languageOptions: {
globals: {
...globals.browser,
dataLayer: false,
},
},
},
];
以下はこの設定ファイルのポイントです。
Prettier との併用
eslint-config-prettier を追加しています。これにより、Prettier と ESLint のルールが競合する部分を無効化します。
npm install --save-dev eslint-config-prettier
eslint.config.js
// ...
import eslintConfigPrettier from 'eslint-config-prettier';
export default [
// ...
eslintConfigPrettier,
// ...
];
Google Analytics のコードに対応する
本プロジェクトでは、Astro のメンテナーの方の記事を参考にして Google Analytics の設定を行っています。
Google Analytics で生成されたコードを埋め込むと最終的に以下のようになりますが、error 'dataLayer' is not defined no-undef として、この中の dataLayer が未定義としてエラーになってしまいます。
<!-- Google Analytics -->
<script
type="text/partytown"
src="https://www.googletagmanager.com/gtag/js?id=G-8ZCMEEKWF9"
></script>
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
これを解決するため、以下の記述を加えています。
eslint.config.js
{
languageOptions: {
globals: {
dataLayer: false,
},
},
},
参考にした記事など
Discussion