Skip to content

Commit e57aafc

Browse files
JonathanMattheyJonathanMatthey
committed
Add ESLint and Prettier with consistent formatting standards
- Add ESLint 9 and Prettier for consistent code formatting across docs repos - Configure ESLint with TypeScript and Astro support - Standardize lint and format commands across all repositories - Upgrade to ESLint 9 flat config format (eslint.config.js) - Update all ESLint and Prettier packages to latest versions - Add CI checks to enforce formatting standards
1 parent 6e84d42 commit e57aafc

File tree

12 files changed

+247
-64
lines changed

12 files changed

+247
-64
lines changed

‎.github/pull_request_template.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,8 @@ Provide a succinct description of what this pull request entails.
1010
What were you trying to do?
1111
Link issues here - using `fixes #number`
1212
-->
13+
14+
## Checklist
15+
16+
- [ ] I have run `bun run format` to ensure code is properly formatted
17+
- [ ] I have verified that `bun run lint` passes without errors

‎.github/workflows/test-build.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,7 @@ jobs:
1616
- uses: oven-sh/setup-bun@v1
1717
- name: Install dependencies
1818
run: bun install
19+
- name: Run ESLint
20+
run: bun run lint
1921
- name: Test build website
2022
run: bun run build

‎.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
src/content/docs/shared/removeoverview.mdx
2+
src/content/docs/**/*.mdx

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,20 @@ All commands are run from the root of the project, from a terminal:
4747
| `bun run preview` | Preview your build locally, before deploying |
4848
| `bun run astro ...` | Run CLI commands like `astro add`, `astro check` |
4949
| `bun run astro -- --help` | Get help using the Astro CLI |
50+
| `bun run format` | Fix linting issues |
51+
| `bun run lint` | Check linting |
5052

5153
You can substitute the `bun` commands with whatever package manager of your choice uses.
5254

55+
### 🔍 Code Quality
56+
57+
This project uses [Prettier](https://prettier.io/) for formatting and [ESLint](https://eslint.org/) for linting. Before submitting a pull request:
58+
59+
1. **Fix issues**: Run `bun run format` to format all supported files (via Prettier) and apply ESLint autofixes.
60+
2. **Check before pushing**: Run `bun run lint` to run Prettier in `--check` mode and ESLint without fixes. CI runs the same command.
61+
62+
ESLint is configured to work with TypeScript and Astro files. The configuration extends recommended rules from ESLint, TypeScript ESLint, and Astro ESLint plugins.
63+
5364
### 👀 Want to learn more?
5465

5566
Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

‎astro.config.mjs‎

Lines changed: 47 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,82 @@
1-
import { defineConfig } from "astro/config";
2-
import starlight from "@astrojs/starlight";
3-
import remarkMath from "remark-math";
4-
import rehypeMathjax from "rehype-mathjax";
5-
import starlightLinksValidator from "starlight-links-validator";
6-
import starlightFullViewMode from "starlight-fullview-mode";
1+
import { defineConfig } from 'astro/config'
2+
import starlight from '@astrojs/starlight'
3+
import remarkMath from 'remark-math'
4+
import rehypeMathjax from 'rehype-mathjax'
5+
import starlightLinksValidator from 'starlight-links-validator'
6+
import starlightFullViewMode from 'starlight-fullview-mode'
77

88
// https://astro.build/config
99
export default defineConfig({
10-
site: "https://interledger.net",
10+
site: 'https://interledger.net',
1111
markdown: {
1212
remarkPlugins: [remarkMath],
13-
rehypePlugins: [rehypeMathjax],
13+
rehypePlugins: [rehypeMathjax]
1414
},
1515
integrations: [
1616
starlight({
17-
title: "Docs style guide",
18-
description: "The style guide for all Interledger documentation sites. Because we love consistency.",
17+
title: 'Docs style guide',
18+
description:
19+
'The style guide for all Interledger documentation sites. Because we love consistency.',
1920
customCss: [
20-
"./node_modules/@interledger/docs-design-system/src/styles/teal-theme.css",
21-
"./node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css",
21+
'./node_modules/@interledger/docs-design-system/src/styles/teal-theme.css',
22+
'./node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css'
2223
],
2324
plugins: [starlightLinksValidator(), starlightFullViewMode()],
2425
expressiveCode: {
2526
styleOverrides: {
26-
borderColor: "transparent",
27-
borderRadius: "var(--border-radius)",
28-
},
27+
borderColor: 'transparent',
28+
borderRadius: 'var(--border-radius)'
29+
}
2930
},
30-
social: [{ icon: "github", label: "GitHub", href: "https://github.com/interledger/docs-styleguide" }],
31+
social: [
32+
{
33+
icon: 'github',
34+
label: 'GitHub',
35+
href: 'https://github.com/interledger/docs-styleguide'
36+
}
37+
],
3138
components: {
32-
Header: "./src/components/Header.astro",
39+
Header: './src/components/Header.astro'
3340
},
3441
sidebar: [
3542
{
36-
label: "Overview of doc styles",
37-
link: "/",
43+
label: 'Overview of doc styles',
44+
link: '/'
3845
},
3946
{
40-
label: "Style guides",
47+
label: 'Style guides',
4148
autogenerate: {
42-
directory: "content",
43-
},
49+
directory: 'content'
50+
}
4451
},
4552
{
46-
label: "Classes, styles, HTML, etc",
53+
label: 'Classes, styles, HTML, etc',
4754
autogenerate: {
48-
directory: "classes",
49-
},
55+
directory: 'classes'
56+
}
5057
},
5158
{
52-
label: "Shared Components",
59+
label: 'Shared Components',
5360
autogenerate: {
54-
directory: "shared",
55-
},
61+
directory: 'shared'
62+
}
5663
},
5764
{
58-
label: "Open Payments Components",
65+
label: 'Open Payments Components',
5966
autogenerate: {
60-
directory: "oppm",
61-
},
67+
directory: 'oppm'
68+
}
6269
},
6370
{
64-
label: "Web Monetization Components",
71+
label: 'Web Monetization Components',
6572
autogenerate: {
66-
directory: "webm",
67-
},
68-
},
69-
],
70-
}),
73+
directory: 'webm'
74+
}
75+
}
76+
]
77+
})
7178
],
7279
server: {
73-
port: 1105,
74-
},
75-
});
80+
port: 1105
81+
}
82+
})

‎eslint.config.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import js from '@eslint/js'
2+
import tseslintPlugin from '@typescript-eslint/eslint-plugin'
3+
import tsparser from '@typescript-eslint/parser'
4+
import eslintPluginAstro from 'eslint-plugin-astro'
5+
import globals from 'globals'
6+
7+
export default [
8+
{
9+
ignores: ['node_modules', 'dist', '.astro', '*.d.ts']
10+
},
11+
js.configs.recommended,
12+
{
13+
files: ['**/*.{js,mjs,ts,tsx}'],
14+
languageOptions: {
15+
globals: {
16+
...globals.node,
17+
...globals.browser
18+
},
19+
parser: tsparser,
20+
parserOptions: {
21+
ecmaVersion: 2022,
22+
sourceType: 'module'
23+
}
24+
},
25+
plugins: {
26+
'@typescript-eslint': tseslintPlugin
27+
},
28+
rules: {
29+
...tseslintPlugin.configs.recommended.rules,
30+
'@typescript-eslint/no-unused-vars': [
31+
'error',
32+
{
33+
argsIgnorePattern: '^_',
34+
varsIgnorePattern: '^_'
35+
}
36+
],
37+
'@typescript-eslint/no-explicit-any': 'warn'
38+
}
39+
},
40+
{
41+
files: ['**/*.d.ts', '**/env.d.ts'],
42+
rules: {
43+
'@typescript-eslint/triple-slash-reference': 'off'
44+
}
45+
},
46+
{
47+
files: ['*.astro'],
48+
plugins: {
49+
astro: eslintPluginAstro
50+
},
51+
languageOptions: {
52+
parser: eslintPluginAstro.parser,
53+
parserOptions: {
54+
parser: tsparser,
55+
extraFileExtensions: ['.astro']
56+
}
57+
},
58+
rules: {
59+
...eslintPluginAstro.configs.recommended.rules
60+
}
61+
}
62+
]

‎package.json‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,27 @@
66
"start": "astro dev",
77
"build": "astro build",
88
"preview": "astro preview",
9-
"astro": "astro"
9+
"astro": "astro",
10+
"format": "prettier --write '**/*.{js,mjs,ts,tsx,json,md,mdx,astro}' && eslint --max-warnings=0 --fix .",
11+
"lint": "prettier --check '**/*.{js,mjs,ts,tsx,json,md,mdx,astro}' && eslint --max-warnings=0 ."
1012
},
1113
"dependencies": {
1214
"@astrojs/starlight": "^0.36.2",
15+
"@eslint/js": "^9.32.0",
1316
"@interledger/docs-design-system": "^0.10.1",
17+
"@typescript-eslint/eslint-plugin": "^8.39.0",
18+
"@typescript-eslint/parser": "^8.39.0",
1419
"astro": "^5.15.9",
20+
"astro-eslint-parser": "^1.2.2",
21+
"eslint": "^9.32.0",
22+
"eslint-config-prettier": "^10.1.8",
23+
"eslint-plugin-astro": "^1.3.1",
24+
"globals": "^16.3.0",
25+
"prettier": "^3.6.2",
26+
"prettier-plugin-astro": "^0.14.1",
1527
"rehype-mathjax": "^7.1.0",
1628
"remark-math": "^6.0.0",
17-
"sharp": "^0.34.5",
29+
"sharp": "^0.34.2",
1830
"starlight-fullview-mode": "^0.2.6",
1931
"starlight-links-validator": "^0.19.1"
2032
}

‎prettier.config.mjs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/** @type {import('prettier').Config} */
2+
const config = {
3+
plugins: ['prettier-plugin-astro'],
4+
semi: false,
5+
singleQuote: true,
6+
trailingComma: 'none',
7+
jsxSingleQuote: true
8+
}
9+
10+
export default config

‎src/components/Header.astro‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
---
2-
import Search from "@astrojs/starlight/components/Search.astro";
3-
import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
4-
import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
5-
import InterledgerLogo from "./InterledgerLogo.astro";
2+
import Search from '@astrojs/starlight/components/Search.astro'
3+
import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro'
4+
import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro'
5+
import InterledgerLogo from './InterledgerLogo.astro'
66
---
7-
<div class="header sl-flex">
8-
<a href="/" class="site-logo">
7+
8+
<div class='header sl-flex'>
9+
<a href='/' class='site-logo'>
910
<InterledgerLogo />
1011
</a>
11-
<div class="secondary-wrap">
12+
<div class='secondary-wrap'>
1213
<Search />
1314
<SocialIcons />
14-
<div class="sl-hidden md:sl-flex">
15+
<div class='sl-hidden md:sl-flex'>
1516
<ThemeSelect />
1617
</div>
1718
</div>
1819
</div>
1920

2021
<style>
21-
.header {
22+
.header {
2223
gap: var(--sl-nav-gap);
2324
align-items: center;
2425
justify-content: space-between;

0 commit comments

Comments
 (0)