👻

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

2022/11/22に公開約5,200字

astro

Astroをインストールする。

https://docs.astro.build/ja/getting-started/

npm create astro@latest

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が長くなって可読性は下がる。

https://docs.astro.build/en/guides/integrations-guide/tailwind/

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でマークダウンファイルだけ外しているのだけど、それ用のプラグインを作っていた人がいたらしい。

https://qiita.com/tats-u/items/bcbfe2bb4e71bf0a2b87

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

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

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

eslint

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

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

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

設定は以下を参照。

https://github.com/ota-meshi/eslint-plugin-astro

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

.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でエラーと判定されなくなる。

https://zenn.dev/kimromi/articles/546923b7281dcb

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

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

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から出てこない。ので、いれてる。

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

https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

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

Discussion

ログインするとコメントできます