Astro+TailwindCSS+Sass+Stylelint+Eslint+Prettier+VSCodeで環境構築
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で作っている。
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を手動で作る。
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モードで動いてるのね。便利。
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にする。
設定は以下を参照。
プラグインの設定のままだと色々エラーが出るので一部設定を追加する。
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
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"を追加する。
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から出てこない。ので、いれてる。
以下、使ってる拡張機能。
これでちょっと触ってみて、不具合があったら修正する。
Discussion