Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, Tailwind CSS / forpes.ru

Главная
Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, Tailwind CSS

Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, Tailwind CSS +4

16.08.2023 04:48

teinett 2 1300 Источник

Инструкция актуальна для 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:

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:

Вариант 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

Создаем в корне проекта файл .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

Комментарии (2)

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

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

Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, Tailwind CSS +4

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

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

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

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

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

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

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

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

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

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

6. Добавляем интеграцию с Tailwind CSS

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

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

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

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

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

Заключение

Комментарии (2)

Zibx

Frikadellios