{"id":352287,"date":"2024-05-20T22:05:45","date_gmt":"2024-05-20T22:05:45","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=352287"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=352287","title":{"rendered":"<span>[\u0430\u043f\u0440\u0435\u043b\u044c 2024] \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 AstroJS: VS Code, Prettier, ESlint, Stylelint, Tailwind CSS, PostCSS, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<blockquote>\n<p>Changelog \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 &#8212; 21 \u0430\u043f\u0440\u0435\u043b\u044f 2024.<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u0421\u043e\u0431\u0440\u0430\u043b\u0430 \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439: <a href=\"https:\/\/github.com\/teinett\/astro-dot-files\/\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/teinett\/astro-dot-files\/<\/a><\/p>\n<\/blockquote>\n<h3>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c Visual Studio Code \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 AstroJS<\/h3>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u044b VS Code:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=astro-build.astro-vscode\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 Astro<\/a> \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 .astro;<\/p>\n<\/li>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Tailwind CSS: <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=bradlc.vscode-tailwindcss\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 Tailwind CSS IntelliSense<\/a> \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043e\u043a \u043a\u043b\u0430\u0441\u0441\u043e\u0432 Tailwind CSS.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h3>\n<blockquote>\n<p>AstroJS 3.x \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 Node 18.14.1 \u0438 \u0441\u0442\u0430\u0440\u0448\u0435.<\/p>\n<\/blockquote>\n<h4>1. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c AstroJS<\/h4>\n<pre><code>npm create astro@latest <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c &#8212; \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e:<\/p>\n<pre><code>npm run dev <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0441\u044f, \u0442\u043e \u043c\u043e\u0436\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435: <code>http:\/\/localhost:4321<\/code>.<\/p>\n<p>\u041e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442: <code>CTRL + C<\/code>.<\/p>\n<h4>2. \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0442\u0435\u043b\u0435\u043c\u0435\u0442\u0440\u0438\u044e<\/h4>\n<pre><code>npm run astro telemetry disable <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/reference\/cli-reference\/#astro-telemetry\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h3>\n<h4>1. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c Typescript &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0443\u0442\u0438 \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432<\/h4>\n<blockquote>\n<p>AstroJS 3.0 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Typescript 5.\u0445.<\/p>\n<\/blockquote>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <code>tsconfig.json<\/code>:<\/p>\n<pre><code>{   \"extends\": \"astro\/tsconfigs\/strict\",   \"compilerOptions\": {     \"baseUrl\": \".\",     \"paths\": {       \"@\/*\": [\".\/src\/*\"]     }   } } <\/code><\/pre>\n<h4>2. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c EditorConfig<\/h4>\n<ul>\n<li>\n<p><a href=\"https:\/\/editorconfig.org\/\" rel=\"noopener noreferrer nofollow\">EditorConfig<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/editorconfig-checker.github.io\/\" rel=\"noopener noreferrer nofollow\">EditorConfig Checker<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=wWbDC1C7JEE\" rel=\"noopener noreferrer nofollow\">Pepelsbey: \u0432\u0438\u0434\u0435\u043e\u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435, \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d EditorConfig<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.editorconfig<\/code>:<\/p>\n<pre><code>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 <\/code><\/pre>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443<\/strong> \u043d\u0430 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430.<\/p>\n<blockquote>\n<p>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u041c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043e\u0441\u043e\u0431\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f: \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432 \u043f\u0430\u043f\u043a\u0435 <code>node_modules<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441 \u0442\u0430\u043a\u0438\u043c \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0435\u0441\u044c, \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u0448\u0430\u0433.<\/p>\n<\/blockquote>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043b\u0438\u043d\u0442\u0435\u0440:<\/p>\n<pre><code>npm install --save-dev editorconfig-checker <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 EditorConfig:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"editorconfig\": \"editorconfig-checker -exclude \\\"**\/node_modules\/**\\\"\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438:<\/p>\n<pre><code>npm run editorconfig <\/code><\/pre>\n<h4>3. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e node<\/h4>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1<\/strong>. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.nvmrc<\/code>:<\/p>\n<pre><code>18 <\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2<\/strong>. \u0412 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code>\u2026 \"engines\": {     \"node\": \"18\"   }, \u2026 <\/code><\/pre>\n<h4>4. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c Browserlist<\/h4>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1<\/strong>. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.browserlistrc<\/code>:<\/p>\n<pre><code>defaults last 2 version not dead <\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2<\/strong>. \u0412 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code>\"browserslist\": [     \"last 2 version\",     \"not dead\"   ], <\/code><\/pre>\n<h4>5. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u0438\u043f\u043e\u0432 \u043e\u0442 AstroJS<\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"check\": \"astro check\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>npm run check <\/code><\/pre>\n<h4>6. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 Tailwind CSS<\/h4>\n<pre><code>npx astro add tailwind <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/tailwind\/\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>tailwind.config.cjs<\/code>, \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438:<\/p>\n<pre><code>module.exports = {     content: [\".\/src\/**\/*.{js,ts,jsx,tsx,astro}\"],     darkMode: \"class\",     theme: {},     plugins: [], }; <\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <code>src\/styles\/global.css<\/code> &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0441\u0430\u043c\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u043e:<\/p>\n<pre><code>@tailwind base; @tailwind components; @tailwind utilities; <\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b global.css \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0431\u043b\u043e\u043a\u0435 <code>head<\/code> \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 <code>Layout.astro<\/code>.<\/p>\n<h4>7. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c Prettier \u0434\u043b\u044f AstroJS \u0438 Tailwind CSS<\/h4>\n<pre><code>npm install --save-dev prettier prettier-plugin-astro  <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/prettier.io\/\" rel=\"noopener noreferrer nofollow\">Prettier<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/withastro\/prettier-plugin-astro\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d Prettier \u0434\u043b\u044f AstroJS<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/editor-setup\/#prettier\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.prettierignore<\/code> &#8212; \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043f\u0430\u043f\u043e\u043a:<\/p>\n<pre><code>.astro\/ node_modules\/ package-lock.json dist\/ <\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.prettierrc.mjs<\/code> \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0434\u043b\u044f Prettier:<\/p>\n<pre><code>\/** @type {import(\"prettier\").Config} *\/ export default {     plugins: ['prettier-plugin-astro'],     overrides: [         {             files: '*.astro',             options: {                 parser: 'astro',             },         },     ], };  <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Tailwind CSS:<\/p>\n<pre><code>npm install --save-dev prettier-plugin-tailwindcss   <\/code><\/pre>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <code>.prettierrc.mjs<\/code>:<\/p>\n<pre><code> \/** @type {import(\"prettier\").Config} *\/ export default {     plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss' ], \/* \u0414\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 *\/,     overrides: [         {             files: '*.astro',             options: {                 parser: 'astro',             },         },     ], };  <\/code><\/pre>\n<h4>8. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c ESLint &#8212; \u043b\u0438\u043d\u0442\u0435\u0440 \u0434\u043b\u044f JavaScript \u0438 JSX<\/h4>\n<pre><code>npm install --save-dev eslint eslint-plugin-astro eslint-plugin-jsx-a11y @typescript-eslint\/parser @typescript-eslint\/eslint-plugin <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/editor-setup\/#eslint\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0444\u0430\u0439\u043b <code>.eslintrc.yml<\/code>:<\/p>\n<pre><code>env:   browser: true   node: true   es6: true extends:   - eslint:recommended   - plugin:astro\/recommended   - plugin:@typescript-eslint\/recommended parser: \"@typescript-eslint\/parser\" plugins:   - \"@typescript-eslint\" parserOptions:   ecmaVersion: 2022   sourceType: module   extraFileExtensions:     - \".astro\" overrides:   - files: \"*.astro\"     parser: astro-eslint-parser     parserOptions:       parser: \"@typescript-eslint\/parser\"       extraFileExtensions: [\".astro\"] <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"lintjs\": \"eslint . --fix\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>npm run lintjs <\/code><\/pre>\n<h4>9. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c Stylelint &#8212; \u043b\u0438\u043d\u0442\u0435\u0440 \u0434\u043b\u044f CSS<\/h4>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Stylelint \u0438 \u0435\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0438:<\/p>\n<pre><code>npm install --save-dev stylelint stylelint-config-html stylelint-config-standard postcss-html <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/editor-setup\/#stylelint\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d stylelint-order \u0434\u043b\u044f \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432:<\/p>\n<pre><code>npm install --save-dev stylelint-order <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/yandex\/articles\/223503\/\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 2014 \u0433\u043e\u0434\u0430 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430<\/a>. \u0421\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433 <a href=\"https:\/\/github.com\/ota-meshi\/stylelint-config-html\" rel=\"noopener noreferrer nofollow\">stylelint-config-html<\/a> &#8212; \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b HTML, XML, Vue, Svelte, Astro.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.stylelintrc.yml<\/code>:<\/p>\n<pre><code>extends:   - stylelint-config-standard   - stylelint-config-html plugins:   - stylelint-order rules:   order\/properties-order:     \u2026  <\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0430\u0432\u0438\u043b \u0434\u043b\u044f \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432: <a href=\"https:\/\/github.com\/pepelsbey\/pepelsbey.dev\/blob\/main\/.stylelintrc.yml\" rel=\"noopener noreferrer nofollow\">Pepelsbey.dev<\/a><\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f TailwindCSS, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u043d\u0435\u0433\u043e:<\/p>\n<pre><code># .stylelint.yml extends:   - stylelint-config-standard   - stylelint-config-html plugins:   - stylelint-order rules:   at-rule-no-unknown:     - true     - ignoreAtRules:         - tailwind         - apply         - variants         - responsive         - screen   declaration-block-trailing-semicolon: null   no-descending-specificity: null   order\/properties-order:     ... <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u043b\u0438\u043d\u0442\u0435\u0440\u0430 c \u0430\u0432\u0442\u043e\u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043e\u0448\u0438\u0431\u043e\u043a, \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"lintcss\": \"stylelint \\\"src\/**\/*.{css,astro}\\\" --fix\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>npm run lintcss <\/code><\/pre>\n<h4>10. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 VSCode \u0434\u043b\u044f ESlint, Stylelint \u0438 Prettier<\/h4>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 <code>.vscode<\/code> \u0438 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<ul>\n<li>\n<p><code>.vscode\/extensions.json<\/code> &#8212; \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438:<\/p>\n<\/li>\n<\/ul>\n<pre><code>{   \"recommendations\": [\"astro-build.astro-vscode\"],   \"unwantedRecommendations\": [] }  <\/code><\/pre>\n<ul>\n<li>\n<p><code>.vscode\/launch.json<\/code> &#8212; \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438:<\/p>\n<\/li>\n<\/ul>\n<pre><code>{   \"version\": \"0.2.0\",   \"configurations\": [     {       \"command\": \".\/node_modules\/.bin\/astro dev\",       \"name\": \"Development server\",       \"request\": \"launch\",       \"type\": \"node-terminal\"     }   ] }  <\/code><\/pre>\n<ul>\n<li>\n<p><code>.vscode\/settings.json<\/code>:<\/p>\n<\/li>\n<\/ul>\n<pre><code>{   \"eslint.validate\": [     \"javascript\",     \"javascriptreact\",     \"astro\", \/\/ Enable .astro     \"typescript\", \/\/ Enable .ts     \"typescriptreact\" \/\/ Enable .tsx   ],   \"stylelint.validate\": [     \"css\",     \/\/ \u2193 Add \"html\" language.     \"html\",     \/\/ \u2193 Add \"vue\" language.     \"vue\",     \/\/ \u2193 Add \"svelte\" language.     \"svelte\",     \/\/ \u2193 Add \"astro\" language.     \"astro\"   ],   \"prettier.documentSelectors\": [\"**\/*.astro\"],   \"[astro]\": {     \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"   } } <\/code><\/pre>\n<p><strong>\u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f TailwindCSS<\/strong>, \u0442\u043e \u0444\u0430\u0439\u043b <code>.vscode\/settings.json<\/code>:<\/p>\n<pre><code>{   \"eslint.validate\": [     \"javascript\",     \"javascriptreact\",     \"astro\", \/\/ Enable .astro     \"typescript\", \/\/ Enable .ts     \"typescriptreact\" \/\/ Enable .tsx   ],   \"css.customData\": [\".vscode\/tailwind.json\"],   \"stylelint.validate\": [     \"css\",     \/\/ \u2193 Add \"html\" language.     \"html\",     \/\/ \u2193 Add \"vue\" language.     \"vue\",     \/\/ \u2193 Add \"svelte\" language.     \"svelte\",     \/\/ \u2193 Add \"astro\" language.     \"astro\"   ],   \"prettier.documentSelectors\": [\"**\/*.astro\"],   \"[astro]\": {     \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"   } }  <\/code><\/pre>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>.vscode\/tailwind.json<\/code> (\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b Stylelint <a href=\"https:\/\/github.com\/tailwindlabs\/tailwindcss\/discussions\/5258\" rel=\"noopener noreferrer nofollow\">Unknown at rule @apply css(unknownAtRules)<\/a>):<\/p>\n<pre><code>{   \"version\": 1.1,   \"atDirectives\": [     {       \"name\": \"@tailwind\",       \"description\": \"Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.\",       \"references\": [         {           \"name\": \"Tailwind Documentation\",           \"url\": \"https:\/\/tailwindcss.com\/docs\/functions-and-directives#tailwind\"         }       ]     },     {       \"name\": \"@apply\",       \"description\": \"Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you\u2019d like to extract to a new component.\",       \"references\": [         {           \"name\": \"Tailwind Documentation\",           \"url\": \"https:\/\/tailwindcss.com\/docs\/functions-and-directives#apply\"         }       ]     },     {       \"name\": \"@responsive\",       \"description\": \"You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\\n```css\\n@responsive {\\n  .alert {\\n    background-color: #E53E3E;\\n  }\\n}\\n```\\n\",       \"references\": [         {           \"name\": \"Tailwind Documentation\",           \"url\": \"https:\/\/tailwindcss.com\/docs\/functions-and-directives#responsive\"         }       ]     },     {       \"name\": \"@screen\",       \"description\": \"The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\\n```css\\n@screen sm {\\n  \/* ... *\/\\n}\\n```\\n\u2026gets transformed into this:\\n```css\\n@media (min-width: 640px) {\\n  \/* ... *\/\\n}\\n```\\n\",       \"references\": [         {           \"name\": \"Tailwind Documentation\",           \"url\": \"https:\/\/tailwindcss.com\/docs\/functions-and-directives#screen\"         }       ]     },     {       \"name\": \"@variants\",       \"description\": \"Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\\n```css\\n@variants hover, focus {\\n   .btn-brand {\\n    background-color: #3182CE;\\n  }\\n}\\n```\\n\",       \"references\": [         {           \"name\": \"Tailwind Documentation\",           \"url\": \"https:\/\/tailwindcss.com\/docs\/functions-and-directives#variants\"         }       ]     }   ] }  <\/code><\/pre>\n<h4>11. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u0431\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043b\u044f ESlint \u0438 Stylelint<\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b package.json \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0441\u0435\u043c\u0438 \u043b\u0438\u043d\u0442\u0435\u0440\u0430\u043c\u0438:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"test\": \"npm run lintcss &amp;&amp; npm run lintjs &amp;&amp; npm run check\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f editorconfig-checker, \u0442\u043e \u043e\u0431\u0449\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"test\": \"npm run editorconfig &amp;&amp; npm run lintcss &amp;&amp; npm run lintjs &amp;&amp; npm run check\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run test <\/code><\/pre>\n<h4>12. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 PostCSS<\/h4>\n<p><a href=\"https:\/\/docs.astro.build\/en\/guides\/styling\/#postcss\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a>.<\/p>\n<p>AstroJS \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 Vite, \u0438 PostCSS \u0443\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043a\u043e\u043d\u0444\u0438\u0433 Browserlist &#8212; \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0444\u0438\u0433 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c PostCSS \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u044b:<\/p>\n<ul>\n<li>\n<p>Autoprefixer<\/p>\n<\/li>\n<li>\n<p>PostCSS Preset Env<\/p>\n<\/li>\n<li>\n<p>CSSnano<\/p>\n<\/li>\n<\/ul>\n<pre><code>npm install --save-dev autoprefixer postcss-preset-env cssnano <\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f PostCSS &#8212; \u0444\u0430\u0439\u043b <code>postcss.config.js<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435 \u0441\u0430\u0439\u0442\u0430:<\/p>\n<pre><code>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;  <\/code><\/pre>\n<h3>13. \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/h3>\n<p>\u041f\u0430\u043a\u0435\u0442: <a href=\"https:\/\/github.com\/codiume\/orbit\/tree\/main\/packages\/astro-purgecss\" rel=\"noopener noreferrer nofollow\">astro-purgecss<\/a><\/p>\n<p>\u041e\u043d \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430  \u044d\u0442\u0430\u043f\u0435 <strong>build \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430<\/strong>.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0430\u043a\u0435\u0442:<\/p>\n<pre><code>npx astro add astro-purgecss <\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 <code>astro.config.mjs<\/code>:<\/p>\n<pre><code>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             ],         }),         ...     ], }); <\/code><\/pre>\n<h3>14. \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432<\/h3>\n<p>\u041c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f <strong>build \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430<\/strong> \u0444\u0430\u0439\u043b\u044b.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/www.npmjs.com\/package\/astro-compress\" rel=\"noopener noreferrer nofollow\">astro-compress<\/a>:<\/p>\n<p><code>npm install --save-dev @playform\/compress<\/code>.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432 \u0444\u0430\u0439\u043b <code>astro.config.mjs<\/code>:<\/p>\n<pre><code>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     ], });  <\/code><\/pre>\n<blockquote>\n<p>NOTE! Compress() \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0434\u0442\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0432\u0441\u0435\u0445 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0439.<\/p>\n<\/blockquote>\n<p>\u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 Compress() \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0442\u0438\u043f\u044b \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c (\u0432\u044b\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u043f\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e).  \u0412 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435 \u044f \u0431\u0443\u0434\u0443 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c CSS, HTML \u0438 JS, \u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041c\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442 AstroJS \u043a \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 git-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0435\u043c, \u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c husky \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043b\u0438\u0432\u043a\u043e\u0439 \u043a\u043e\u0434\u0430 \u0432 git.<\/p>\n<p>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <code>package.json<\/code>:<\/p>\n<pre><code>{   \"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 \\\"src\/**\/*.{css,astro}\\\" --fix\",     \"check\": \"astro check\",     \"test\": \"npm run editorconfig &amp;&amp; npm run lintcss &amp;&amp; npm run lintjs &amp;&amp; npm run check\"   },   \"dependencies\": {     \"astro\": \"^3.0.5\"   },   \"devDependencies\": {     \"@astrojs\/check\": \"^0.3.3\",     \"@typescript-eslint\/parser\": \"^6.4.0\",     \"@playform\/compress\": \"^0.0.3\",     \"astro-purgecss\": \"^4.1.0\",     \"autoprefixer\": \"^10.4.15\",     \"cssnano\": \"^6.0.1\",     \"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\",     \"postcss-preset-env\": \"^9.1.1\",     \"prettier\": \"^3.0.2\",     \"prettier-plugin-astro\": \"^0.11.1\",     \"purgecss\": \"^5.0.0\",     \"stylelint\": \"^15.10.2\",     \"stylelint-config-html\": \"^1.1.0\",     \"stylelint-config-standard\": \"^34.0.0\",     \"stylelint-order\": \"^6.0.3\",     \"typescript\": \"^5.3.3\"   } }  <\/code><\/pre>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<pre><code>\/ \u251c\u2500\u2500 .vscode\/ \u2502   \u251c\u2500\u2500 extensions.json \u2502   \u251c\u2500\u2500 launch.json \u2502   \u2514\u2500\u2500 settings.svg \u251c\u2500\u2500 node_modules\/ \u2502   \u2514\u2500\u2500 \u043f\u0430\u043f\u043a\u0438 \u0438 \u0444\u0430\u0439\u043b\u044b \u251c\u2500\u2500 public\/ \u2502   \u2514\u2500\u2500 \u043f\u0430\u043f\u043a\u0438 \u0438 \u0444\u0430\u0439\u043b\u044b \u251c\u2500\u2500 src\/ \u2502   \u2514\u2500\u2500 \u043f\u0430\u043f\u043a\u0438 \u0438 \u0444\u0430\u0439\u043b\u044b \u251c\u2500\u2500 .browserlistrc \u251c\u2500\u2500 .editorconfig \u251c\u2500\u2500 .eslintrc.yml \u251c\u2500\u2500 .gitignore \u251c\u2500\u2500 .nvmrc \u251c\u2500\u2500 .prettierignore \u251c\u2500\u2500 .prettierrc.mjs \u251c\u2500\u2500 .stylelintrc.yml \u251c\u2500\u2500 astro.config.mjs \u251c\u2500\u2500 package-lock.json \u251c\u2500\u2500 package.json \u251c\u2500\u2500 postcss.config.js \u251c\u2500\u2500 README.md \u2514\u2500\u2500 tsconfig.json <\/code><\/pre>\n<h3>Changelog \u0441\u0442\u0430\u0442\u044c\u0438<\/h3>\n<blockquote>\n<p><strong>UPDATE 21 \u0430\u0432\u0433\u0443\u0441\u0442\u0430 2023<\/strong>. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f Prettier, \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Stylelint (\u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b\u0430 \u0432\u0441\u0435 \u043f\u0430\u043f\u043a\u0438, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e src), \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0438\u043d\u0444\u0430 \u043f\u0440\u043e PostCSS<\/p>\n<\/blockquote>\n<blockquote>\n<p><strong>UPDATE 1 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044f<\/strong>. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0434\u043b\u044f <a href=\"https:\/\/astro.build\/\" rel=\"noopener noreferrer nofollow\">AstroJS 3.x<\/a>.<\/p>\n<\/blockquote>\n<blockquote>\n<p><strong>UPDATE 14 \u043d\u043e\u044f\u0431\u0440\u044f<\/strong>. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u043d\u0444\u0438\u0433 Stylelint \u0434\u043b\u044f TailwindCSS.<\/p>\n<\/blockquote>\n<blockquote>\n<p><strong>UPDATE 17 \u0434\u0435\u043a\u0430\u0431\u0440\u044f<\/strong>. \u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0430 \u0438\u043d\u0444\u0443 \u043f\u0440\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0444\u0430\u0439\u043b\u043e\u0432 html, js, css.<\/p>\n<\/blockquote>\n<blockquote>\n<p><strong>UPDATE 27 \u0434\u0435\u043a\u0430\u0431\u0440\u044f<\/strong>. \u0418\u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0430 settings.json \u0434\u043b\u044f vscode: \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 Prettier \u0434\u043b\u044f .astro \u0444\u0430\u0439\u043b\u043e\u0432 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e.<\/p>\n<\/blockquote>\n<blockquote>\n<p><strong>UPDATE 18 \u0430\u043f\u0440\u0435\u043b\u044f 2024<\/strong>. \u041f\u0430\u043a\u0435\u0442 <code>astro-compress<\/code> \u0441\u0442\u0430\u043b <code>@playform\/compress<\/code><\/p>\n<\/blockquote>\n<blockquote>\n<p><strong>UPDATE 21 \u0430\u043f\u0440\u0435\u043b\u044f 2024<\/strong>. \u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0430 \u043f\u0430\u043a\u0435\u0442 <code>astro-purgecss<\/code> \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/754878\/\"> https:\/\/habr.com\/ru\/articles\/754878\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<blockquote>\n<p>Changelog \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 &#8212; 21 \u0430\u043f\u0440\u0435\u043b\u044f 2024.<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u0421\u043e\u0431\u0440\u0430\u043b\u0430 \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439: <a href=\"https:\/\/github.com\/teinett\/astro-dot-files\/\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/teinett\/astro-dot-files\/<\/a><\/p>\n<\/blockquote>\n<h3>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c Visual Studio Code \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 AstroJS<\/h3>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u044b VS Code:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=astro-build.astro-vscode\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 Astro<\/a> \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 .astro;<\/p>\n<\/li>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Tailwind CSS: <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=bradlc.vscode-tailwindcss\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 Tailwind CSS IntelliSense<\/a> \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043e\u043a \u043a\u043b\u0430\u0441\u0441\u043e\u0432 Tailwind CSS.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h3>\n<blockquote>\n<p>AstroJS 3.x \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 Node 18.14.1 \u0438 \u0441\u0442\u0430\u0440\u0448\u0435.<\/p>\n<\/blockquote>\n<h4>1. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c AstroJS<\/h4>\n<pre><code>npm create astro@latest <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c &#8212; \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e:<\/p>\n<pre><code>npm run dev <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0441\u044f, \u0442\u043e \u043c\u043e\u0436\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435: <code>http:\/\/localhost:4321<\/code>.<\/p>\n<p>\u041e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442: <code>CTRL + C<\/code>.<\/p>\n<h4>2. \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0442\u0435\u043b\u0435\u043c\u0435\u0442\u0440\u0438\u044e<\/h4>\n<pre><code>npm run astro telemetry disable <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/reference\/cli-reference\/#astro-telemetry\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h3>\n<h4>1. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c Typescript &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0443\u0442\u0438 \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432<\/h4>\n<blockquote>\n<p>AstroJS 3.0 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Typescript 5.\u0445.<\/p>\n<\/blockquote>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <code>tsconfig.json<\/code>:<\/p>\n<pre><code>{   \"extends\": \"astro\/tsconfigs\/strict\",   \"compilerOptions\": {     \"baseUrl\": \".\",     \"paths\": {       \"@\/*\": [\".\/src\/*\"]     }   } } <\/code><\/pre>\n<h4>2. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c EditorConfig<\/h4>\n<ul>\n<li>\n<p><a href=\"https:\/\/editorconfig.org\/\" rel=\"noopener noreferrer nofollow\">EditorConfig<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/editorconfig-checker.github.io\/\" rel=\"noopener noreferrer nofollow\">EditorConfig Checker<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=wWbDC1C7JEE\" rel=\"noopener noreferrer nofollow\">Pepelsbey: \u0432\u0438\u0434\u0435\u043e\u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435, \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d EditorConfig<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.editorconfig<\/code>:<\/p>\n<pre><code>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 <\/code><\/pre>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443<\/strong> \u043d\u0430 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430.<\/p>\n<blockquote>\n<p>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u041c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043e\u0441\u043e\u0431\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f: \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432 \u043f\u0430\u043f\u043a\u0435 <code>node_modules<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441 \u0442\u0430\u043a\u0438\u043c \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0435\u0441\u044c, \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u0448\u0430\u0433.<\/p>\n<\/blockquote>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043b\u0438\u043d\u0442\u0435\u0440:<\/p>\n<pre><code>npm install --save-dev editorconfig-checker <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 EditorConfig:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"editorconfig\": \"editorconfig-checker -exclude \\\"**\/node_modules\/**\\\"\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438:<\/p>\n<pre><code>npm run editorconfig <\/code><\/pre>\n<h4>3. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e node<\/h4>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1<\/strong>. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.nvmrc<\/code>:<\/p>\n<pre><code>18 <\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2<\/strong>. \u0412 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code>\u2026 \"engines\": {     \"node\": \"18\"   }, \u2026 <\/code><\/pre>\n<h4>4. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c Browserlist<\/h4>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1<\/strong>. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.browserlistrc<\/code>:<\/p>\n<pre><code>defaults last 2 version not dead <\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2<\/strong>. \u0412 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code>\"browserslist\": [     \"last 2 version\",     \"not dead\"   ], <\/code><\/pre>\n<h4>5. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u0438\u043f\u043e\u0432 \u043e\u0442 AstroJS<\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"check\": \"astro check\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>npm run check <\/code><\/pre>\n<h4>6. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 Tailwind CSS<\/h4>\n<pre><code>npx astro add tailwind <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/tailwind\/\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>tailwind.config.cjs<\/code>, \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438:<\/p>\n<pre><code>module.exports = {     content: [\".\/src\/**\/*.{js,ts,jsx,tsx,astro}\"],     darkMode: \"class\",     theme: {},     plugins: [], }; <\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <code>src\/styles\/global.css<\/code> &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0441\u0430\u043c\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u043e:<\/p>\n<pre><code>@tailwind base; @tailwind components; @tailwind utilities; <\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b global.css \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0431\u043b\u043e\u043a\u0435 <code>head<\/code> \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 <code>Layout.astro<\/code>.<\/p>\n<h4>7. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c Prettier \u0434\u043b\u044f AstroJS \u0438 Tailwind CSS<\/h4>\n<pre><code>npm install --save-dev prettier prettier-plugin-astro  <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/prettier.io\/\" rel=\"noopener noreferrer nofollow\">Prettier<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/withastro\/prettier-plugin-astro\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d Prettier \u0434\u043b\u044f AstroJS<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/editor-setup\/#prettier\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.prettierignore<\/code> &#8212; \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043f\u0430\u043f\u043e\u043a:<\/p>\n<pre><code>.astro\/ node_modules\/ package-lock.json dist\/ <\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.prettierrc.mjs<\/code> \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0434\u043b\u044f Prettier:<\/p>\n<pre><code>\/** @type {import(\"prettier\").Config} *\/ export default {     plugins: ['prettier-plugin-astro'],     overrides: [         {             files: '*.astro',             options: {                 parser: 'astro',             },         },     ], };  <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Tailwind CSS:<\/p>\n<pre><code>npm install --save-dev prettier-plugin-tailwindcss   <\/code><\/pre>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <code>.prettierrc.mjs<\/code>:<\/p>\n<pre><code> \/** @type {import(\"prettier\").Config} *\/ export default {     plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss' ], \/* \u0414\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 *\/,     overrides: [         {             files: '*.astro',             options: {                 parser: 'astro',             },         },     ], };  <\/code><\/pre>\n<h4>8. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c ESLint &#8212; \u043b\u0438\u043d\u0442\u0435\u0440 \u0434\u043b\u044f JavaScript \u0438 JSX<\/h4>\n<pre><code>npm install --save-dev eslint eslint-plugin-astro eslint-plugin-jsx-a11y @typescript-eslint\/parser @typescript-eslint\/eslint-plugin <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/editor-setup\/#eslint\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0444\u0430\u0439\u043b <code>.eslintrc.yml<\/code>:<\/p>\n<pre><code>env:   browser: true   node: true   es6: true extends:   - eslint:recommended   - plugin:astro\/recommended   - plugin:@typescript-eslint\/recommended parser: \"@typescript-eslint\/parser\" plugins:   - \"@typescript-eslint\" parserOptions:   ecmaVersion: 2022   sourceType: module   extraFileExtensions:     - \".astro\" overrides:   - files: \"*.astro\"     parser: astro-eslint-parser     parserOptions:       parser: \"@typescript-eslint\/parser\"       extraFileExtensions: [\".astro\"] <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"lintjs\": \"eslint . --fix\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>npm run lintjs <\/code><\/pre>\n<h4>9. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c Stylelint &#8212; \u043b\u0438\u043d\u0442\u0435\u0440 \u0434\u043b\u044f CSS<\/h4>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Stylelint \u0438 \u0435\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0438:<\/p>\n<pre><code>npm install --save-dev stylelint stylelint-config-html stylelint-config-standard postcss-html <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.astro.build\/en\/editor-setup\/#stylelint\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d stylelint-order \u0434\u043b\u044f \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432:<\/p>\n<pre><code>npm install --save-dev stylelint-order <\/code><\/pre>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/yandex\/articles\/223503\/\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 2014 \u0433\u043e\u0434\u0430 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430<\/a>. \u0421\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433 <a href=\"https:\/\/github.com\/ota-meshi\/stylelint-config-html\" rel=\"noopener noreferrer nofollow\">stylelint-config-html<\/a> &#8212; \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b HTML, XML, Vue, Svelte, Astro.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>.stylelintrc.yml<\/code>:<\/p>\n<pre><code>extends:   - stylelint-config-standard   - stylelint-config-html plugins:   - stylelint-order rules:   order\/properties-order:     \u2026  <\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0430\u0432\u0438\u043b \u0434\u043b\u044f \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432: <a href=\"https:\/\/github.com\/pepelsbey\/pepelsbey.dev\/blob\/main\/.stylelintrc.yml\" rel=\"noopener noreferrer nofollow\">Pepelsbey.dev<\/a><\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f TailwindCSS, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u043d\u0435\u0433\u043e:<\/p>\n<pre><code># .stylelint.yml extends:   - stylelint-config-standard   - stylelint-config-html plugins:   - stylelint-order rules:   at-rule-no-unknown:     - true     - ignoreAtRules:         - tailwind         - apply         - variants         - responsive         - screen   declaration-block-trailing-semicolon: null   no-descending-specificity: null   order\/properties-order:     ... <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u043b\u0438\u043d\u0442\u0435\u0440\u0430 c \u0430\u0432\u0442\u043e\u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043e\u0448\u0438\u0431\u043e\u043a, \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e:<\/p>\n<pre><code>\u2026 \"scripts\": { \u2026     \"lintcss\": \"stylelint \\\"src\/**\/*.{css,astro}\\\" --fix\", \u2026   }, \u2026 <\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043b\u0438\u043d\u0442\u0435\u0440\u0430:<\/p>\n<pre><code>npm run lintcss <\/code><\/pre>\n<h4>10. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 VSCode \u0434\u043b\u044f ESlint, Stylelint \u0438 Prettier<\/h4>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 <code>.vscode<\/code> \u0438 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<ul>\n<li>\n<p><code>.vscode\/extensions.json<\/code> &#8212; \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438:<\/p>\n<\/li>\n<\/ul>\n<pre><code>{   \"recommendations\": [\"astro-build.astro-vscode\"],   \"unwantedRecommendations\": [] }  <\/code><\/pre>\n<ul>\n<li>\n<p><code>.vscode\/launch.json<\/code> &#8212; \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438:<\/p>\n<\/li>\n<\/ul>\n<pre><code>{   \"version\": \"0.2.0\",   \"configurations\": [     {       \"command\": \".\/node_modules\/.bin\/astro dev\",       \"name\": \"Development server\",       \"request\": \"launch\",       \"type\": \"node-terminal\"     }   ] }  <\/code><\/pre>\n<ul>\n<li>\n<p><code>.vscode\/settings.json<\/code>:<\/p>\n<\/li>\n<\/ul>\n<pre><code>{   \"eslint.validate\": [     \"javascript\",     \"javascriptreact\",     \"astro\", \/\/ Enable .astro     \"typescript\", \/\/ Enable .ts     \"typescriptreact\" \/\/ Enable .tsx   ],   \"stylelint.validate\": [     \"css\",     \/\/ \u2193 Add \"html\" language.     \"html\",     \/\/ \u2193 Add \"vue\" language.     \"vue\",     \/\/ \u2193 Add \"svelte\" language.     \"svelte\",     \/\/ \u2193 Add \"astro\" language.     \"astro\"   ],   \"prettier.documentSelectors\": [\"**\/*.astro\"],   \"[astro]\": {     \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"   } } <\/code><\/pre>\n<p><strong>\u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f TailwindCSS<\/strong>, \u0442\u043e \u0444\u0430\u0439\u043b <code>.vscode\/settings.json<\/code>:<\/p>\n<pre><code>{   \"eslint.validate\": [     \"javascript\",     \"javascriptreact\",     \"astro\", \/\/ Enable .astro     \"typescript\", \/\/ Enable .ts     \"typescriptreact\" \/\/ Enable .tsx   ],   \"css.customData\": [\".vscode\/tailwind.json\"],   \"stylelint.validate\": [     \"css\",     \/\/ \u2193 Add \"html\" language.     \"html\",     \/\/ \u2193 Add \"vue\" language.     \"vue\",     \/\/ \u2193 Add \"svelte\" language.     \"svelte\",     \/\/ \u2193 Add \"astro\" language.     \"astro\"   ],   \"prettier.documentSelectors\": [\"**\/*.astro\"],   \"[astro]\": {     \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"   } }  <\/code><\/pre>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>.vscode\/tailwind.json<\/code> (\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b Stylelint <a href=\"https:\/\/github.com\/tailwindlabs\/tailwindcss\/discussions\/5258\" rel=\"noopener noreferrer nofollow\">Unknown at rule @apply css(unknownAtRules)<\/a>):<\/p>\n<pre><code>{   \"version\": 1.1,   \"atDirectives\": [     {       \"name\": \"@tailwind\",       \"description\": \"Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.\",       \"references\": [         {           \"name\": \"Tailwind Documentation\",           \"url\": \"https:\/\/tailwindcss.com\/docs\/functions-and-directives#tailwind\"         }       ]     },     {       \"name\": \"@apply\",       \"description\": \"Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you\u2019d like to extract to a new component.\",       \"references\": [         {           \"name\": \"Tailwind Documentation\",           \"url\": \"https:\/\/tailwindcss.com\/docs\/functions-and-directives#apply\"         }       ]     },     {       \"name\": \"@responsive\",       \"description\": \"You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\\n```css\\n@responsive {\\n  .alert {\\n    background-color: #E53E3E;\\n  }\\n}\\n```\\n\",       \"references\": [         {           \"name\": \"Tailwind Documentation\",           \"url\": \"https:\/\/tailwindcss.com\/docs\/functions-and-directives#responsive\"         }       ]     },     {       \"name\": \"@screen\",       \"description\": \"The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\\n```css\\n@screen sm {\\n  \/* ... *\/\\n}\\n```\\n\u2026gets transformed into this:\\n```css\\n@media (min-width: 640px) {\\n  \/* ... *\/\\n}\\n```\\n\",       \"references\": [         {           \"name\": \"Tailwind Documentation\",           \"url\":<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-352287","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/352287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=352287"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/352287\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=352287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=352287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=352287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}