【Astro】Linter（Prettier・Stylelint・ESLint）の初期設定を行う

1. Astro
2. JavaScript
2023/09/10

npm create astro@latestした後の各種Linterの設定でやったことをまとめる。

※あくまでAstroを利用する上で最低限必要になるものだけを導入していく。

設定方法

Prettier

1. インストール

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

2. 設定ファイルの作成

touch prettier.config.cjs

/** @type {import("prettier").Config} */
module.exports = {
  plugins: ["prettier-plugin-astro"],
  overrides: [
    {
      files: "*.astro",
      options: {
        parser: "astro",
      },
    },
  ],
};

3. npm scriptsへの登録

{
  "scripts": {
    "prettier": "prettier --write 'src/**/*.{ts,astro,scss}'"
  }
}

Stylelint

SCSSを使う前提。

1. インストール

npm install --save-dev stylelint stylelint-scss stylelint-prettier stylelint-config-standard-scss

2. 設定ファイルの作成

touch stylelint.config.cjs

module.exports = {
  plugins: ["stylelint-scss", "stylelint-prettier"],
  extends: ["stylelint-config-standard-scss"],
  rules: {
    "prettier/prettier": true,
  },
};

3. npm scriptsへの登録

{
  "scripts": {
    "prettier": "prettier --write 'src/**/*.{ts,astro,scss}'",
    "stylelint": "stylelint --fix 'src/**/*.scss'"
  }
}

ESLint

TypeScriptを使う前提。

1. インストール

npm install --save-dev eslint eslint-plugin-astro @typescript-eslint/parser

2. 設定ファイルの作成

touch .eslintrc.cjs

module.exports = {
  extends: [
    "eslint:recommended",
    'plugin:@typescript-eslint/recommended',
    'plugin:astro/recommended',
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: "./tsconfig.json",
  },
  globals: {
    astroHTML: true,
  },
  overrides: [
    {
      files: ["*.ts"],
      parser: "@typescript-eslint/parser",
    },
    {
      files: ['*.astro'],
      parser: 'astro-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.astro'],
      },
    },
  ],
};

3. npm scriptsへの登録

{
  "scripts": {
    "prettier": "prettier --write 'src/**/*.{ts,astro,scss}'",
    "stylelint": "stylelint --fix 'src/**/*.scss'",
    "eslint": "eslint --fix 'src/**/*.{ts,astro}'"
  }
}

今回追加したパッケージ

参考程度にpackage.jsonの中身を貼っておく。

{
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "prettier": "prettier --write 'src/**/*.{ts,astro}'",
    "stylelint": "stylelint --fix 'src/**/*.scss'",
    "eslint": "eslint --fix 'src/**/*.{ts,astro}'"
  },
  "dependencies": {
    "astro": "^3.0.12"
  },
  "devDependencies": {
    "@typescript-eslint/parser": "^6.6.0",
    "eslint": "^8.49.0",
    "eslint-plugin-astro": "^0.29.0",
    "prettier": "^3.0.3",
    "prettier-plugin-astro": "^0.12.0",
    "stylelint": "^15.10.3",
    "stylelint-config-standard-scss": "^11.0.0",
    "stylelint-prettier": "^4.0.2",
    "stylelint-scss": "^5.1.0"
  }
}

参考

Editor Setup 🚀 Astro Documentation ↩