Merge pull request #61 from interledger/jm/eslint-prettier

add eslint / prettier - streamline docs repos

Author: Anca2022

.github/workflows/lint.yml

@@ -0,0 +1,33 @@
+name: Lint
+
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - '**/*.astro'
+      - '**/*.ts'
+      - '**/*.tsx'
+      - '**/*.js'
+      - '**/*.md'
+      - 'package.json'
+      - 'package-lock.json'
+      - '.github/workflows/lint.yml'
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Lint and check formatting
+        run: npm run lint

.prettierignore

@@ -0,0 +1,6 @@
+.github
+.astro
+node_modules
+dist
+**/*.min.css
+**/*.min.js

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "**/*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

README.md

@@ -7,12 +7,12 @@ export default defineConfig({
   integrations: [
     starlight({
       customCss: [
-        "./node_modules/@interledger/docs-design-system/src/styles/teal-theme.css",
-        "./node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css",
-      ],
-    }),
-  ],
-});
+        './node_modules/@interledger/docs-design-system/src/styles/teal-theme.css',
+        './node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css'
+      ]
+    })
+  ]
+})
 ```
 
 If you are using them in an Astro layout file, then the import would look like this for the build to not fail:
@@ -24,7 +24,7 @@ import '/node_modules/@interledger/docs-design-system/src/styles/teal-theme.css'
 We also have a number of documentation-specific helper components that can be imported and used where necessary. For these shared components, if you are using both `CodeBlock` and `Disclosure` on the same page, you can import them both like so:
 
 ```jsx
-import { CodeBlock, Disclosure } from "@interledger/docs-design-system";
+import { CodeBlock, Disclosure } from '@interledger/docs-design-system'
 ```
 
 For more information about importing things in Javascript, please refer to [import on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).
@@ -60,3 +60,24 @@ git clone https://github.com/interledger/docs-styleguide.git
 ```
 
 3. After you're done with your changes and have tested that all is well, feel free to make a pull request and it will get reviewed, and hopefully merged into the source code. The version will get bumped and all the sites will have to make an update to their dependencies as well.
+
+## Local development
+
+All commands are run from the root of the project, from a terminal:
+
+| Command          | Action                             |
+| :--------------- | :--------------------------------- |
+| `npm install`    | Installs dependencies              |
+| `npm run format` | Format code and fix linting issues |
+| `npm run lint`   | Check code formatting and linting  |
+
+You can substitute the `npm` commands with whatever package manager your workflow uses.
+
+### 🔍 Code Formatting
+
+This project uses [ESLint](https://eslint.org/) for code linting and [Prettier](https://prettier.io/) for code formatting. Before submitting a pull request, please ensure your code is properly formatted:
+
+1. **Fix issues**: Run `npm run format` to automatically format code and fix linting issues.
+2. **Check before pushing**: Run `npm run lint` to verify everything passes (CI will also run this).
+
+ESLint is configured to work with TypeScript and Astro files. The configuration extends recommended rules from ESLint, TypeScript ESLint, and Astro ESLint plugins, and integrates with Prettier to avoid conflicts.

eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+import eslintConfigPrettier from 'eslint-config-prettier/flat'
+import eslintPluginAstro from 'eslint-plugin-astro'
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts}'],
+    plugins: { js },
+    extends: ['js/recommended'],
+    languageOptions: { globals: { ...globals.browser, ...globals.node } }
+  },
+  tseslint.configs.recommended,
+  eslintPluginAstro.configs.recommended,
+  globalIgnores(['dist', '.astro', 'node_modules', 'public', '**/*.min.js']),
+  {
+    rules: {
+      'no-console': 'error',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' }
+      ],
+      '@typescript-eslint/no-explicit-any': 'error',
+      'astro/no-set-text-directive': 'error'
+    }
+  },
+  eslintConfigPrettier
+])

package.json

@@ -11,6 +11,8 @@
     "index.ts"
   ],
   "scripts": {
+    "lint": "prettier --check '**/*.{js,mjs,ts,tsx,json,md,mdx,astro}' && eslint --max-warnings=0 .",
+    "format": "prettier --write '**/*.{js,mjs,ts,tsx,json,md,mdx,astro}' && eslint --max-warnings=0 --fix .",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Interledger <tech@interledger.org>",
@@ -21,5 +23,19 @@
   },
   "dependencies": {
     "mermaid": "^11.12.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@typescript-eslint/parser": "^8.48.0",
+    "astro": "^5.16.0",
+    "astro-eslint-parser": "^1.2.2",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-astro": "^1.5.0",
+    "globals": "^16.5.0",
+    "prettier": "3.6.2",
+    "prettier-plugin-astro": "0.14.1",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.48.0"
   }
 }