advanced-astro / astro-prolint

Why and how to lint like a Pro

Welcome to 'Lint like a Pro with Astro'

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
├── .editorconfig
├── .gitignore
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm run dev	Starts local dev server at localhost:3000
pnpm run build	Build your production site to ./dist/
pnpm run preview	Preview your build locally, before deploying
pnpm run astro ...	Run CLI commands like astro add, astro preview
pnpm run astro --help	Get help using the Astro CLI

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server. https://medium.com/tbc-engineering/why-and-how-to-lint-like-a-pro-173fc4a73899

Installation

pnpm dlx create-astro@latest <foldername>

pnpm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint eslint-plugin-prettier eslint-plugin-import husky lint-staged prettier stylelint stylelint stylelint-config-standard stylelint-config-recommended-scss stylelint-prettier stylelint-config-prettier

Prettier

pnpm i -D prettier

[.prettierrc.js]

module.exports = {
    plugins: [require.resolve('prettier-plugin-astro')],
    overrides: [
        {
            files: '*.astro',
            options: {
                parser: 'astro'
            }
        }
    ],
    singleQuote: true,
    semi: false,
    trailingComma: 'none'
}

Husky

pnpm i -D husky pnpm dlx husky add .husky/pre-commit "pnpm dlx prettier --cache --write --plugin-search-dir=. ."

Lint-Staged

pnpm i -D lint-staged pnpm dlx lint-staged

ESLint

pnpm i -D eslint

And now for tssupport

pnpm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

[.eslintrc.js]

module.exports = {
  env: {
    node: true,
    browser: true,
    es2021: true,
  },
  parserOptions: {
    sourceType: 'module',
  },
  extends: ['plugin:prettier/recommended'],
  rules: {
    'prettier/prettier': 'warn',
  },
  overrides: [
    {
      files: '*.ts',
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      parserOptions: {
        project: 'tsconfig.json',
      },
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking',
        'plugin:prettier/recommended',
      ],
      rules: {
        'no-plusplus': 'off',
        'no-underscore-dangle': 'off',
        'import/prefer-default-export': 'off',
        'prettier/prettier': 'warn',
      },
    },
  ],
};

Stylelint

pnpm i -D stylelint stylelint-config-standard

For SCSS stylelint-config-recommended-scss

and for Prettier npm i -D stylelint-prettier stylelint-config-prettier

[.stylelintrc.js]

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-scss',
    'stylelint-prettier/recommended',
  ],
};

package.json

"lint-staged": {
  "*.{js,ts}": "eslint --fix",
  "*.{css,scss}": "stylelint --fix"
}
Since we no longer use Prettier in lint-staged, we don't get formatted html and json files, so we have to add this line:

"*.{html,json}": "prettier --write"

Acknowledment

• https://medium.com/tbc-engineering/why-and-how-to-lint-like-a-pro-173fc4a73899

astro-prolint's Issues

stylelint doesn't lint scss files

Your config doesn't lint .scss files i did an update that works perfectly
https://pastebin.com/Mwq3fiz0

Thank you for your work

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency autoprefixer to v10.4.19
• Update dependency @types/node to v18.19.33
• Update dependency astro to v3.6.5
• Update dependency astro-analytics to v2.7.0
• Update dependency eslint to v8.57.0
• Update dependency eslint-config-prettier to v8.10.0
• Update dependency eslint-plugin-import to v2.29.1
• Update dependency eslint-plugin-prettier to v5.1.3
• Update dependency lint-staged to v13.3.0
• Update dependency open-props to v1.7.4
• Update dependency postcss-html to v1.7.0
• Update dependency prettier to v3.2.5
• Update dependency sass to v1.77.2
• Update dependency stylelint to v15.11.0
• Update dependency stylelint-prettier to v4.1.0
• Update dependency typescript to v5.4.5
• Update typescript-eslint monorepo to v6.21.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Update dependency @tinkoff/stylelint-config to v3
• Update dependency astro to v4
• Update dependency astro-icon to v1
• Update dependency eslint to v9
• Update dependency husky to v9
• Update dependency stylelint-config-standard to v36
• Update dependency stylelint-prettier to v5
• Update github/codeql-action action to v3
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Update withastro/action action to v2
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency postcss to v8.4.31 [SECURITY]
• Update dependency astro-icon to v0.8.2
• Update dependency open-props-scss to ^0.7.0
• Update actions/deploy-pages action to v4
• Update dependency eslint-config-prettier to v9
• Update dependency lint-staged to v15
• Update dependency node to v20 (node, @types/node)
• Update dependency stylelint to v16
• Update dependency stylelint-config-recommended-scss to v14
• Lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v4
• actions/setup-node v4

.github/workflows/codeql.yml

• actions/checkout v4
• github/codeql-action v2
• github/codeql-action v2
• github/codeql-action v2

.github/workflows/deploy.yml

• actions/checkout v4
• actions/setup-node v4
• withastro/action v1
• actions/deploy-pages v2

npm

package.json

• @tinkoff/stylelint-config ^1.52.1
• stylelint-config-standard ^34.0.0
• @typescript-eslint/eslint-plugin ^6.16.0
• @typescript-eslint/parser ^6.14.0
• astro ^3.5.5
• astro-icon ^0.8.1
• eslint ^8.45.0
• eslint-config-prettier ^8.8.0
• eslint-plugin-import ^2.27.5
• eslint-plugin-prettier ^5.0.0
• husky ^8.0.3
• lint-staged ^13.2.3
• postcss-html ^1.5.0
• prettier ^3.0.0
• sass ^1.63.6
• stylelint ^15.10.2
• stylelint-config-html ^1.1.0
• stylelint-config-prettier ^9.0.5
• stylelint-config-recommended-scss ^12.0.0
• stylelint-prettier ^4.0.0
• typescript ^5.1.6

website/package.json

• @types/node ^18.11.18
• @typescript-eslint/eslint-plugin ^6.0.0
• @typescript-eslint/parser ^6.0.0
• astro ^3.0.0
• astro-analytics ^2.5.1
• astro-emoji ^1.2.0
• astro-icon ^0.8.0
• autoprefixer ^10.4.13
• eslint ^8.32.0
• eslint-config-prettier ^8.6.0
• eslint-plugin-import ^2.27.4
• eslint-plugin-prettier ^5.0.0
• open-props ^1.5.3
• open-props-scss ^0.6.0
• postcss ^8.4.21
• postcss-html ^1.5.0
• prettier ^3.0.0
• sass ^1.57.1
• stylelint ^15.0.0
• stylelint-config-prettier ^9.0.4
• stylelint-config-recommended-scss ^12.0.0
• stylelint-config-standard ^34.0.0
• stylelint-prettier ^4.0.0
• typescript ^5.0.0

nvm

.nvmrc

• node v18.x

---

• Check this box to trigger a request for Renovate to run again on this repository