👻

Astro+TailwindCSS+Sass+Stylelint+Eslint+Prettier+VSCodeで環境構築

2022/11/22に公開

VS Code

astro

Astroをインストールする。

npm create astro@latest

@types/node

これを入れ忘れるとTypescriptでnode.jsの機能をimportするとエラーが出るので入れておく。

npm i -D @types/node

Sass

Astroファイル内では使えないようだけど、Reactを使うときや、全ページ共通で良い部分はglobal.scssが便利なので一応入れておく。でも、使わないかも。

npm install -D sass

stylelint

scssを使うので一応入れておく。

npm install -D stylelint stylelint-config-prettier-scss stylelint-config-standard-scss stylelint-config-recess-order

今回はPrettierを優先するものと、standardなルールとcssの順番の自動入れ替え。

stylelintrc.cjsを作る。.jsで作ったらエラーが出てcjsにしてと言われたので、cjsで作っている。

.stylelintrc.cjs

module.exports = {
  extends: [
    "stylelint-config-standard-scss",
    "stylelint-config-recess-order",
    "stylelint-config-prettier-scss",
  ],
  rules: {
    "scss/at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: ["apply", "layer", "responsive", "screen", "tailwind"],
      },
    ],
  },
};

tailwind css

デフォルトで各ファイルごとにstyleを書けるのでそこまで必要ないかなとは思うけど、css部分が長くなるのが嫌な場合はtailwind cssは選択肢の一つ。その分html部分のclassが長くなって可読性は下がる。

Astroは各種フレームワークと簡単に統合できるIntegrationsが準備されていて、公式のものは@astrojs/がついている。

tailwindは公式のIntegrationsが準備されているのでそれを使う。

Next.jsとかだと自分でインストールするのだけど、このライブラリをインストールすると、PostCSSとautoprefixerも一緒にインストールされている。Astroの日本語記事は古いものしかなかったり、Astro公式のtailwind用テンプレートはdependenciesにPostCSSとautoprefixerがインストールされていたりと、いまいちよくわからないのだけど。

npm install -D @astrojs/tailwind tailwindcss

astro.config.mjsを手動で作る。

astro.config.mjs

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind()],
});

以下のコマンドでは、必要なもののインストールとastro.config.mjsの作成をやってくれる。tailwindが最新版ではないのが気になって手動でインストールした。

あと、astro.config.mjsを作るためだけにも以下のコマンドが使えたりした。

npx astro add tailwind

tailwind.config.cjsを作る。v3からはjitと入れなくてもjitモードで動いてるのね。便利。

tailwind.config.cjs

module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Prettier

npm install -D prettier prettier-plugin-astro

PrettierはAstro用のプラグインがあるのでそれを使う。

必要なら.prettierrc.jsや.prettierignoreを作る。Vscodeのプラグインを入れておくと便利。

Prettierはなぜか半角と全角文字の間に半角スペースを追加してしまうので、.prettierignoreでマークダウンファイルだけ外しているのだけど、それ用のプラグインを作っていた人がいたらしい。

マークダウンは整形しなくていいやと思ってるので.prettierignoreで弾いてしまっているけれど、mdxを使うのならば整形はしたいので、そうなったら導入を検討する予定。Prettier本体ではよ治してほし～。

あと今のところprettier-plugin-tailwindcssが.astroで動かない。

拡張子をhtmlとかにすると動くけど、自動でastroの基準に合わない整形がされてしまうかも…と思うとちょっと怖い。一応issueにもあって、prettier-plugin-tailwindcss-astroとかが必要かもとかtailwindの中の人がコメントしてたけど…、どうなるのかは不明。

prettier-plugin-tailwindcssが機能するようになってた

追記。

prettier-plugin-tailwindcssがastroに対応していたので、クラス名を自動で並びかえしてくれるようになっている。

eslint

npm install --save-dev eslint eslint-plugin-astro @typescript-eslint/parser eslint-config-prettier eslint-plugin-jsx-a11y

Astro用のプラグインとTypescript用のparserとPrettierを優先するプラグインをインストール。

eslint-plugin-jsx-a11yを追記。React用にeslintのプラグインを追加したら、これがないと間違ってないのにエラーが出るときがある。

.eslintrc.cjsを作る。stylelintと同じく、.jsだと動かなかったので、.cjsにする。

設定は以下を参照。

プラグインの設定のままだと色々エラーが出るので一部設定を追加する。

.eslintrc.cjs

module.exports = {
  extends: ["plugin:astro/recommended", "prettier"],
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  overrides: [
    {
      // Define the configuration for `.astro` file.
      files: ["*.astro"],
      // Allows Astro components to be parsed.
      parser: "astro-eslint-parser",
      // Parse the script in `.astro` as TypeScript by adding the following configuration.
      // It's the setting you need when using TypeScript.
      parserOptions: {
        parser: "@typescript-eslint/parser",
        extraFileExtensions: [".astro"],
      },
      rules: {
        // override/add rules settings here, such as:
        // "astro/no-set-html-directive": "error"
      },
    },
    // ...
  ],
};

envのbrowserについては以下の記事を参照。各ブラウザのグローバル変数がeslintでエラーと判定されなくなる。

envのnodeは公式に「Node.jsのグローバル変数」とあるので、trueにしてnode.jsのグローバル変数がeslintにエラーと判定されなくなる・・・みたい。

parserOptionsを設定しないとastro.config.mjsとかでimportエラーがでたので追加する。

Reactを使う

Reactを使いたかったので、公式のAstro integrationを使う。

npm install @astrojs/react

npm install react react-dom

astro.config.mjs

import react from '@astrojs/react';

export default {
  // ...
  integrations: [react()],
}

コンポーネント次第なところはあるが、わざわざAstroでReactを使う場合はだいたいclient:をコンポーネントに指定しないとJavaScriptが取り除かれて動かない。

React用にeslintの設定

Astro用のプラグインだけだとParsing errorが出るのでReact用のプラグインを入れておく。

eslint-config-react-appがとても便利だった。

npm i -D eslint-config-react-app

extendに"react-app"を追加する。

.eslintrc.cjs

module.exports = {
  extends: [
    "plugin:astro/recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint:recommended",
    "react-app",
    "prettier",
  ],
  //...
}

Vscodeのsettings.json

最近、拡張機能とsetting.jsonは少しめんどくさくてもワーキングスペースごとに全部別にすることにした。ので、setting.jsonも各作業フォルダ内の.vscodeフォルダ内に追記するものだけ書く。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.validate": [
    "html",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "astro"
  ],
  "css.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  "stylelint.validate": ["css", "scss"]
}

基本的には他のJavaScriptを使うプロジェクトと同じだけど、eslintにastroを追加。eslint.validateはもういらないみたいなことがマーケットプレイスのページに書いてあるけど、現状の筆者の環境ではAstroファイルのエラーがeslintから出てこない。ので、いれてる。

以下、使ってる拡張機能。

これでちょっと触ってみて、不具合があったら修正する。

astro

@types/node

Sass

stylelint

tailwind css

Prettier

prettier-plugin-tailwindcssが機能するようになってた

eslint

Reactを使う

React用にeslintの設定

Vscodeのsettings.json

Discussion