https://github.com/advanced-astro/astro-prolint

Why and how to lint like a Pro
https://github.com/advanced-astro/astro-prolint

astro astro-build astro-js

Last synced: 3 months ago
JSON representation

Why and how to lint like a Pro

Host: GitHub
URL: https://github.com/advanced-astro/astro-prolint
Owner: advanced-astro
Created: 2023-01-01T16:48:42.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2025-02-09T15:09:16.000Z (3 months ago)
Last Synced: 2025-02-09T16:23:10.832Z (3 months ago)
Topics: astro, astro-build, astro-js
Language: Astro
Homepage: https://advanced-astro.github.io/astro-prolint/
Size: 1.06 MB
Stars: 4
Watchers: 0
Forks: 3
Open Issues: 19
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Welcome to 'Lint like a Pro with [Astro](https://astro.build)'

![https://camo.githubusercontent.com/390dedd43a50362a2922b5b79519aa17d4cec48af43d31220e99501a70cda565/68747470733a2f2f62616467656e2e6e65742f62616467652f72656e6f766174652f656e61626c65642f677265656e3f63616368653d333030](https://renovatebot.com/)
![https://badgen.net/badge/icon/vercel?icon=vercel&label](https://vercel.app/)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/advanced-astro/astro-lintlapro)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/advanced-astro/astro-lintlapro)

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

![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)

## 🚀 Project Structure

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

```text
/
├── 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:

## 👀 Want to learn more?

Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

## Installation

`pnpm dlx create-astro@latest `

```bash
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`

```javascript
[.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`

```javascript
[.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`

```javascript
[.stylelintrc.js]

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

### package.json

```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

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/advanced-astro/astro-prolint

Awesome Lists containing this project

README