【Astro】Linter(Prettier・Stylelint・ESLint)の初期設定を行う
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" }}
参考