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

[Zibx]

Какая детальная инструкция?! Давно хотел настроить Visual Studio Code для работы с AstroJS.

[Frikadellios]

Отличный гайд, у меня правда там ещё пару добавок стоит типа postcss или unocss, парсинга tsx/jsx если добавляеш какие то реакт заманухи, и самое тяжёлое это локализация если работаешь с REST API или Graphql. Рекомендую кстати углубится в Appwrite, очень полезная вещь для Astro. Сейчас хочу провести тест с https://stately.ai

[teinett]

Добавила про PostCSS

[A_lone_wolf]

Добрый день! Если инструкция для новичков, то стоит перед п.8 добавить раздел по самой установки eslint(npm init @eslint/config@latest) и его конфигу (где выполняется: браузер\нода...)). Если Последовательно делать все по Вашей инструкции, (на 15.09.2024) то после абзаца "Проверяем работу линтера" и запуска npm run lintjs вываливается море ошибок с руганью на отсутсвующий eslint.config.js.

Если не секрет, как для себя решили ошибку с path-to-regexp (https://github.com/withastro/astro/issues/11956)

[teinett]

В пункте 8 есть команда для установки eslint. Вы правы, сейчас может не работать, потому что eslint 9 вышел, который многое ломал. Я давно с нуля проект не начинала, инструкция актуальна на апрель 2024. Конфиг для eslint я писала в файле .eslintrc.yml - как упомянуто в инструкции.

Себе eslint еще не обновляла, потому что ранее проект тоже ломался: typescript-eslint требовал 8 версию eslint. Посмотрела их релизы https://github.com/typescript-eslint/typescript-eslint/commits/main/package.json - в июле начали работать с 9 версией eslint. Нужно будет пересобрать инструкцию еще раз, с актуальной версией. :)

Сейчас у меня такие dev-зависимости в проекте, который 100% работает (обновлялась буквально на выходных):

"devDependencies": {
    "@astrojs/check": "^0.9.3",
    "@eslint/js": "^9.6.0",
    "@types/eslint__js": "^8.42.3",
    "@types/react": "^18.3.1",
    "@typescript-eslint/parser": "^7.14.1",
    "autoprefixer": "^10.4.20",
    "cssnano": "^7.0.6",
    "editorconfig-checker": "^5.1.5",
    "eslint": "^8.57.0",
    "eslint-plugin-astro": "^1.2.2",
    "eslint-plugin-jsx-a11y": "^6.9.0",
    "postcss": "^8.4.40",
    "postcss-html": "^1.6.0",
    "postcss-preset-env": "^9.6.0",
    "prettier": "^3.3.3",
    "prettier-plugin-astro": "^0.14.1",
    "stylelint": "^16.7.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-standard": "^36.0.0",
    "typescript": "^5.5.4",
    "typescript-eslint": "^7.14.1"
  }

С проблемой path-to-regexp не сталкивалась еще. Посмотрела тикет: работы со стороны самого AstroJS ведутся - просто установлю обновление от них.

[A_lone_wolf]

Большое спасибо за быстрый ответ! )) И конечно же за актуальный список dev-зависимостей.

Если обновите инструкцию, будет просто супер!

[A_lone_wolf]

В части ESlint`а могу предложить дополнить текст рекомендациями из https://docs.astro.build/ru/editor-setup/#eslint в части " плагин, поддерживаемый сообществом ". Если использовать их заглушку для eslint.config.js и добавить по Вашей инструкции в package.json в раздел скриптов "lintjs": "eslint . --fix", то проверка линтера проходит без критических ошибок.

[teinett]

В моей инструкции этот плагин есть, если что: npm install --save-dev eslint eslint-plugin-astro ...