Инструкция актуальна для AstroJS 2.x. Версия 3.0 ожидается в конце августа 2023.
Настраиваем Visual Studio Code для работы с AstroJS
Устанавливаем плагины VS Code:
официальный Astro для распознавания файлов .astro;
если используем Tailwind CSS: официальный Tailwind CSS IntelliSense для подсказок классов Tailwind CSS.
Создаем проект
1. Устанавливаем AstroJS
npm create astro@latest
После установки проверяем - запускаем локально:
npm run dev
Если проект запустился, то можем его посмотреть в браузере: http://localhost:3000.
Останавливаем проект: CTRL + C.
2. Отключаем телеметрию
npm run astro telemetry disable
официальная инструкция
Настраиваем проект
1. Настраиваем Typescript - добавляем пути для файлов
Редактируем файл tsconfig.json:
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
2. Настраиваем EditorConfig
EditorConfig
EditorConfig Checker
Pepelsbey: видеообъяснение, зачем нужен 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": {
…
"editorconfig": "editorconfig-checker",
…
},
…
Проверяем, работает ли:
npm run editorconfig
3. Настраиваем версию node
Для AstroJS v3 обязательна будет версия Node 18.
Вариант 1. Создаем в корне проекта файл .nvmrc:
18
Вариант 2. В файл package.json добавляем код:
…
"engines": {
"node": "18"
},
…
4. Настраиваем Browserlist
Вариант 1. Создаем в корне проекта файл .browserlistrc:
defaults
last 2 version
not dead
Вариант 2. В файл package.json добавляем код:
"browserslist": [
"last 2 version",
"not dead"
],
5. Добавляем проверку типов от AstroJS:
Добавляем в файл package.json команду для линтера:
…
"scripts": {
…
"check": "astro check",
…
},
…
Проверяем работу линтера:
npm run check
6. Добавляем интеграцию с Tailwind CSS
npx astro add tailwind
Официальная документация по интеграции
В корне проекта создаем файл tailwind.config.cjs, если он не создался автоматически:
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx,astro}"],
darkMode: "class",
theme: {},
plugins: [],
};
Создаем файл со стилями для проекта src/styles/global.css - добавляем в самое начало:
@tailwind base;
@tailwind components;
@tailwind utilities;
Файл global.css нужно будет подключить в блоке head в шаблоне Layout.astro.
7. Добавляем Prettier для AstroJS и Tailwind CSS
npm install --save-dev prettier prettier-plugin-astro
Prettier
Официальный плагин Prettier для AstroJS
Официальная инструкция
Создаем в корне проекта файл .prettierignore - исключаем форматирование указанных файлов и папок:
.astro/
node_modules/
package-lock.json
dist/
Создаем в корне проекта файл .prettierrc.cjs с настройками для Prettier:
/** @type {import("@types/prettier").Options} */
module.exports = {
printWidth: 120,
semi: true,
singleQuote: false,
tabWidth: 2,
useTabs: true,
plugins: [require("prettier-plugin-astro")],
pluginSearchDirs: false,
overrides: [
{
files: "**/*astro",
options: {
parser: "astro",
},
},
],
};
Если в проекте используем Tailwind CSS:
npm install --save-dev prettier-plugin-tailwindcss
Редактируем файл .prettierrc.js:
module.exports = {
…
plugins: [
require("prettier-plugin-astro"),
require("prettier-plugin-tailwindcss") /* Должен быть последним в списке */,
],
…
};
8. Добавляем ESLint - линтер для JavaScript и JSX
npm install --save-dev eslint eslint-plugin-astro eslint-plugin-jsx-a11y @typescript-eslint/parser
Официальная инструкция
Создаем в корне проект файл .eslintrc.yml:
env:
browser: true
node: true
es6: true
extends:
- eslint:recommended
- plugin:astro/recommended
parserOptions:
ecmaVersion: 2022
sourceType: module
extraFileExtensions:
- ".astro"
overrides:
- files: "*.astro"
parser: astro-eslint-parser
parserOptions:
parser: "@typescript-eslint/parser"
extraFileExtensions: [".astro"]
Добавляем в файл package.json команду для линтера:
…
"scripts": {
…
"lintjs": "eslint . --fix",
…
},
…
Проверяем работу линтера:
npm run lintjs
9. Добавляем Stylelint - линтер для CSS
Устанавливаем Stylelint и его конфиги:
npm install --save-dev stylelint stylelint-config-html stylelint-config-standard postcss-html
Официальная инструкция
Дополнительно можно установить плагин stylelint-order для упорядочивания селекторов, но работает это только в файлах .css, а стили в .astro файлах не затрагивает:
npm install --save-dev stylelint-order
Пример, зачем это нужно из статьи Яндекса 2014 года с описанием их инструмента. Сейчас задача решается плагином.
Используем конфиг 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": {
…
"lintcss": "stylelint \"**/*.{css,astro}\" --fix",
…
},
…
Проверяем работу линтера:
npm run lintcss
10. Настройка VSCode для ESlint и Stylelint
В корне проекта создаем папку .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"
]
}
11. Настройка общей команды тестов для ESlint и Stylelint
Добавляем в файл package.json команду для проверки всеми линтерами:
…
"scripts": {
…
"test": "npm run lintcss && npm run lintjs && npm run check",
…
},
…
Если запускается editorconfig-checker, то общая команда для тестов:
…
"scripts": {
…
"test": "npm run editorconfig && npm run lintcss && npm run lintjs && npm run check",
…
},
…
Проверяем команду:
npm run test
Заключение
Мы подготовили проект AstroJS к активной разработке.
Если планируется работа с git-репозиторием, то рекомендую добавить husky и инструкции для тестирования перед заливкой кода в git.
Итоговый файл package.json:
{
"name": "learn-astro",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro",
"editorconfig": "editorconfig-checker",
"lintjs": "eslint . --fix",
"lintcss": "stylelint \"**/*.{css,astro}\" --fix",
"check": "astro check",
"test": "npm run editorconfig && npm run lintcss && npm run lintjs && npm run check"
},
"dependencies": {
"astro": "^2.10.9"
},
"devDependencies": {
"@typescript-eslint/parser": "^6.4.0",
"editorconfig-checker": "^5.1.1",
"eslint": "^8.47.0",
"eslint-plugin-astro": "^0.28.0",
"eslint-plugin-jsx-a11y": "^6.7.1",
"postcss-html": "^1.5.0",
"prettier": "^3.0.2",
"prettier-plugin-astro": "^0.11.1",
"stylelint": "^15.10.2",
"stylelint-config-html": "^1.1.0",
"stylelint-config-standard": "^34.0.0",
"stylelint-order": "^6.0.3"
}
}
Структура проекта:
/
├── .vscode/
│ ├── extensions.json
│ ├── launch.json
│ └── settings.svg
├── node_modules/
│ └── папки и файлы
├── public/
│ └── папки и файлы
├── src/
│ └── папки и файлы
├── .browserlistrc
├── .editorconfig
├── .eslintrc.yml
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc.cjs
├── .stylelintrc.yml
├── astro.config.mjs
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
