Как стать автором
Поиск
Написать публикацию
Обновить

[октябрь 2024] Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, PostCSS, минификация файлов

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров5.6K
Веб-разработка*CSS*JavaScript*HTML*
Туториал

Changelog находится в конце статьи. Последнее обновление - 26 октября 2024.

Собрала все файлы в репозиторий: https://github.com/teinett/astro-dot-files/

Настраиваем Visual Studio Code для работы с AstroJS

Устанавливаем плагины VS Code:

Создаем проект

AstroJS 4.x работает на Node 18.14.1 и старше. Я уже везде использую Node 20.

1. Устанавливаем AstroJS

npm create astro@latest

После установки проверяем - запускаем локально:

npm run dev

Если проект запустился, то можем его посмотреть в браузере: http://localhost:4321.

Останавливаем проект: CTRL + C.

2. Отключаем телеметрию

npm run astro telemetry disable

Настраиваем проект

1. Настраиваем Typescript - добавляем пути для файлов

AstroJS 4.x поддерживает Typescript 5.х.

Редактируем файл tsconfig.json:

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2. Настраиваем EditorConfig

Создаем в корне проекта файл .editorconfig:

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
charset = utf-8

[{*.json,*.yml}]
indent_size = 2

[*.yaml]
indent_style = space

[*.md]
trim_trailing_whitespace = false

Настраиваем автоматическую проверку на соблюдение правил редактора.

Внимание! Может не работать при каких-то особых настройках окружения: начинает проверять файлы в папке node_modules. Если вы с таким сталкиваетесь, пропускайте этот шаг.

Устанавливаем линтер:

npm install --save-dev editorconfig-checker

Добавляем в файл package.json команду для проверки EditorConfig:

…
"scripts": {
…
    "lint:editorconfig": "editorconfig-checker --exclude node_modules",
…
  },
…

Проверяем, работает ли:

npm run lint:editorconfig

3. Настраиваем версию node

Вариант 1. Создаем в корне проекта файл .nvmrc:

20

Вариант 2. В файл package.json добавляем код:

…
"engines": {
    "node": "20"
  },
…

4. Настраиваем Browserlist

Создаем в корне проекта файл .browserlistrc:

defaults
last 2 version
not dead

5. Добавляем проверку типов от AstroJS

Добавляем в файл package.json команду для линтера:

…
"scripts": {
…
    "check": "astro check",
…
  },
…

Проверяем работу линтера:

npm run check

6. Добавляем Prettier для AstroJS и Tailwind CSS

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

Создаем в корне проекта файл .prettierignore - исключаем форматирование указанных файлов и папок:

.astro/
node_modules/
package-lock.json
dist/

Создаем в корне проекта файл .prettierrc.mjs с настройками для Prettier:

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

7. Добавляем ESLint - линтер для JavaScript и JSX

npm install --save-dev eslint eslint-plugin-astro eslint-plugin-jsx-a11y typescript-eslint @eslint/js @types/eslint__js @typescript-eslint/parser

Создаем в корне проект файл eslint.config.mjs:

import astroEslintParser from "astro-eslint-parser";
import typescriptEslintParser from "@typescript-eslint/parser";
import typescriptEslintPlugin from "@typescript-eslint/eslint-plugin";
import eslintPluginAstro from "eslint-plugin-astro";

export default [
    {
        files: ["src/**/*.{js,ts,astro}"],
        rules: {
            "@typescript-eslint/triple-slash-reference": "off",
        },
    },
    {
        files: ["src/**/*.astro"],
        languageOptions: {
            parser: astroEslintParser,
            parserOptions: {
                parser: typescriptEslintParser,
                ecmaVersion: 2022,
                sourceType: "module",
                extraFileExtensions: [".astro"],
            },
        },
    },
    {
        files: ["src/**/*.{js,ts}"],
        languageOptions: {
            ecmaVersion: 2022,
            sourceType: "module",
            parser: typescriptEslintParser,
        },
        plugins: {
            "@typescript-eslint": typescriptEslintPlugin,
            astro: eslintPluginAstro,
        },
        env: {
            browser: true,
            node: true,
            es6: true,
        },
        extends: [
            "eslint:recommended",
            "plugin:astro/recommended",
            "plugin:@typescript-eslint/recommended",
        ],
    },
];

Добавляем в файл package.json команду для линтера:

…
"scripts": {
…
    "lint:js": "eslint src/**/*.{js,ts,astro} --fix || true",
…
  },
…

У меня сейчас в проекте нет файлов *.js, поэтому линтер выпадает с ошибкой. Чтобы работа линтер завершилась корректно даже в этом случае, добавлено || true в конец команды проверки.

Проверяем работу линтера:

npm run lint:js

8. Добавляем Stylelint - линтер для CSS

Устанавливаем Stylelint и его конфиги:

npm install --save-dev stylelint stylelint-config-html stylelint-config-standard postcss-html

Дополнительно можно установить плагин stylelint-order для упорядочивания селекторов:

npm install --save-dev stylelint-order

Используем конфиг stylelint-config-html - он позволяет парсить файлы HTML, XML, Vue, Svelte, Astro.

Создаем в корне проекта файл .stylelintrc.yml:

extends:
  - stylelint-config-standard
  - stylelint-config-html
plugins:
  - stylelint-order
rules:
  order/properties-order:
    …

Пример правил для упорядочивания селекторов: Pepelsbey.dev

Добавляем в файл package.json команду для линтера c автоисправлением ошибок, где это возможно:

…
"scripts": {
…
    "lint:css": "stylelint \"src/**/*.{css,astro}\" --fix",
…
  },
…

Проверяем работу линтера:

npm run lint:css

9. Настройка VSCode для ESlint, Stylelint и Prettier

В корне проекта создаем папку .vscode и файлы:

  • .vscode/extensions.json - возможно, уже создан автоматически:

{
  "recommendations": ["astro-build.astro-vscode"],
  "unwantedRecommendations": []
}

  • .vscode/launch.json - возможно, уже создан автоматически:

{
  "version": "0.2.0",
  "configurations": [
    {
      "command": "./node_modules/.bin/astro dev",
      "name": "Development server",
      "request": "launch",
      "type": "node-terminal"
    }
  ]
}

  • .vscode/settings.json:

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "astro", // Enable .astro
    "typescript", // Enable .ts
    "typescriptreact" // Enable .tsx
  ],
  "stylelint.validate": [
    "css",
    // ↓ Add "html" language.
    "html",
    // ↓ Add "vue" language.
    "vue",
    // ↓ Add "svelte" language.
    "svelte",
    // ↓ Add "astro" language.
    "astro"
  ],
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

10. Настройка общей команды тестов для ESlint и Stylelint

Добавляем в файл package.json команду для проверки всеми линтерами:

…
"scripts": {
…
    "test": "npm run lint:css && npm run lint:js && npm run check",
…
  },
…

Если запускается editorconfig-checker, то общая команда для тестов:

…
"scripts": {
…
    "test": "npm run lint:editorconfig && npm run lint:css && npm run lint:js && npm run check",
…
  },
…

Проверяем команду:

npm run test

11. Настройка PostCSS

Официальная инструкция.

AstroJS основан на Vite, и PostCSS уже включен по умолчанию.

Мы уже создали конфиг Browserlist - этот конфиг будет использовать PostCSS для понимания поддерживаемых браузеров.

Установим плагины:

  • Autoprefixer

  • PostCSS Preset Env

  • CSSnano

npm install --save-dev autoprefixer postcss-preset-env cssnano

Создадим конфиг для PostCSS - файл postcss.config.js в корне сайта:

import autoprefixer from 'autoprefixer';
import postcssPresetEnv from 'postcss-preset-env';
import cssnano from 'cssnano';

const settings = {
    plugins: [
        autoprefixer(),
        postcssPresetEnv({ stage: 1 }),
        cssnano({ preset: 'default' }),
    ],
};

export default settings;

12. Удаляем неиспользованные стили

Пакет: astro-purgecss

Он сработает на этапе build процесса.

Устанавливаем пакет:

npx astro add astro-purgecss

Настройки в astro.config.mjs:

import { defineConfig } from "astro/config";
import purgecss from "astro-purgecss";


export default defineConfig({
// ...
integrations: [
        purgecss({
            variables: true,

            // for Astro view transitions
            keyframes: false,

            // for Astro view transitions
            safelist: {
                greedy: [
                    /*astro*/
                ],
            },

            // for SSR
            content: [
                process.cwd() + "/src/**/*.{astro,vue,jsx,tsx,css}", // Watching astro and vue sources
            ],
        }),
        ...
    ],
});

13. Минификация файлов

Минифицируем сгенерированные во время build процесса файлы.

Установим пакет astro-compress:

npm install --save-dev @playform/compress.

Добавим конфигурацию в файл astro.config.mjs:

import { defineConfig } from "astro/config";
import Compress from "@playform/compress";

export default defineConfig({
    integrations: [
         ...
        Compress({
            // CSS: false,
            // HTML: false,
            Image: false,
            // JavaScript: false,
            SVG: false,
        }), // should be last in the list
    ],
});

NOTE! Compress() должен идти последним в списке всех интеграций.

В настройках Compress() можно указать, какие типы файлов не минифицировать (выключить работу плагинов по минификации полностью). В коде выше я буду минифицировать CSS, HTML и JS, а картинки трогать не буду.

Заключение

Мы подготовили проект AstroJS к активной разработке.

Если планируется работа с git-репозиторием, то рекомендую добавить husky и инструкции для тестирования перед заливкой кода в git.

Итоговый файл package.json:

{
  "name": "learn-astro",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev --host",
    "start": "astro dev --host",
    "build": "astro build",
    "preview": "astro preview --host",
    "prod": "astro build && astro preview --host",
    "check": "astro check",
    "lint:editorconfig": "editorconfig-checker --exclude node_modules",
    "lint:js": "eslint src/**/*.{js,ts,astro} --fix || true",
    "lint:css": "stylelint \"src/**/*.{css,astro}\" --fix",
    "test": "npm run lint:editorconfig && npm run lint:css && npm run lint:js && npm run check",
    "astro": "astro"
  },
  "dependencies": {
    "astro": "^4.16.7"
  },
  "devDependencies": {
    "@astrojs/check": "^0.9.4",
    "@eslint/js": "^9.13.0",
    "@types/eslint__js": "^8.42.3",
    "@typescript-eslint/parser": "^8.11.0",
    "autoprefixer": "^10.4.20",
    "cssnano": "^7.0.6",
    "editorconfig-checker": "^6.0.0",
    "eslint": "^9.13.0",
    "eslint-plugin-astro": "^1.3.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",
    "postcss-html": "^1.7.0",
    "postcss-preset-env": "^10.0.8",
    "prettier": "^3.3.3",
    "prettier-plugin-astro": "^0.14.1",
    "stylelint": "^16.10.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-standard": "^36.0.1",
    "stylelint-order": "^6.0.4",
    "typescript": "^5.6.3",
    "typescript-eslint": "^8.11.0"
  }
}

Структура проекта:

/
├── .vscode/
│   ├── extensions.json
│   ├── launch.json
│   └── settings.json
├── node_modules/
│   └── папки и файлы
├── public/
│   └── папки и файлы
├── src/
│   └── папки и файлы
├── .browserlistrc
├── .editorconfig
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc.mjs
├── .stylelintrc.yml
├── astro.config.mjs
├── eslint.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
└── tsconfig.json

Changelog статьи

UPDATE 26 октября 2024. Обновила инфу про eslint в связи с выходом новой мажорной версии. Удалила всё про TailwindCSS, т.к. инструкция уже нерабочая.

UPDATE 21 апреля 2024. Добавила пакет astro-purgecss для удаления неиспользованных стилей.

UPDATE 18 апреля 2024. Пакет astro-compress стал @playform/compress

UPDATE 27 декабря 2023. Исправила settings.json для vscode: теперь он работает с Prettier для .astro файлов корректно.

UPDATE 17 декабря 2023. Добавила инфу про минификацию файлов html, js, css.

UPDATE 14 ноября 2023. Добавлен конфиг Stylelint для TailwindCSS.

UPDATE 1 сентября 2023. Обновлено для AstroJS 3.x.

UPDATE 21 августа 2023. Исправлен конфиг для Prettier, команда для запуска Stylelint (ранее проверяла все папки, а не только src), добавлена инфа про PostCSS

Теги:
Хабы:
Всего голосов 5: ↑4 и ↓1+4
Комментарии8
20
Карма
0
Рейтинг
@teinett

Пользователь

Отправить сообщение

Публикации

Истории

Работа

React разработчик
56 вакансий
JavaScript разработчик
177 вакансий

Ближайшие события

8 октября – 4 декабря
ТурбоХакатон «Решения для электроэнергетики на базе искусственного интеллекта»
Онлайн
Больше событий в календаре
Разработка
Другое
5 – 17 ноября
Вайб-чек для бэкендеров на Хабр Карьере
Онлайн
Больше событий в календаре
Разработка
7 – 8 ноября
Конференция byteoilgas_conf 2024
Москва • Онлайн
Больше событий в календаре
Разработка
Менеджмент
7 – 8 ноября
Конференция «Матемаркетинг»
Москва • Онлайн
Больше событий в календаре
Маркетинг
Аналитика
14 ноября
Конференция «ViRush 2024: BigData, ИИ и новые практики работы с BI»
Москва
Больше событий в календаре
Разработка
Аналитика
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
Больше событий в календаре
Разработка
Маркетинг
Другое
20 ноября
Конференция InterComm «Рождение Титанов»
Москва
Больше событий в календаре
Менеджмент
Другое
22 – 24 ноября
Хакатон «AgroCode Hack Genetics'24»
Онлайн
Больше событий в календаре
Разработка
Другое
28 ноября
Конференция «TechRec: ITHR CAMPUS»
Москва • Онлайн
Больше событий в календаре
Менеджмент
Другое
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань
Больше событий в календаре
Разработка
Маркетинг
Другое

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2024, Habr