chore: use eslint flat config (#36)

* chore: use eslint flat config

* refactor: fix lint

* ci: change order ci to generate types

.github/workflows/ci.yml

@@ -53,11 +53,11 @@ jobs:
       - name: Check code format
         run: pnpm format:check
 
-      - name: Linting
-        run: pnpm lint
-
       - name: Check type
         run: pnpm type:check
 
+      - name: Linting
+        run: pnpm lint
+
       - name: Build
         run: pnpm build

apps/portfolio/jsx.d.ts

@@ -0,0 +1,9 @@
+// Why is this file needed: https://github.com/ota-meshi/eslint-plugin-astro/tree/v0.34.0#resolving-error-in-jsx-unsafe-return-of-an-any-typed-value
+
+import 'astro/astro-jsx';
+
+declare global {
+	namespace JSX {
+		type Element = HTMLElement;
+	}
+}

apps/portfolio/package.json

@@ -8,7 +8,6 @@
 		"start": "astro dev",
 		"build": "astro build",
 		"preview": "astro preview",
-		"lint": "eslint \"**/*.{astro,ts}\"",
 		"type:check": "astro check && tsc",
 		"fetch-fonts": "fetch-pretendard --font-output-dir ./public/fonts --css-output-path ./src/styles/pretendardvariable-dynamic-subset.css --css-url 'https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css'"
 	},

apps/portfolio/src/components/pages/index/About.astro

@@ -11,11 +11,13 @@ interface Props {
 const { class: className } = Astro.props;
 
 interface Contact {
-	icon: (_props: IconProps) => any;
+	icon: (_props: IconProps) => unknown;
 	name: string;
 	href: string;
 }
 
+// Why disable: https://github.com/ota-meshi/eslint-plugin-astro/issues/348
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 const contacts: Contact[] = [
 	{
 		icon: GitHubIcon,
@@ -34,6 +36,7 @@ const contacts: Contact[] = [
 	//   href: 'https://blog.yeongwoo.dev',
 	// },
 ];
+/* eslint-enable @typescript-eslint/no-unsafe-assignment */
 ---
 
 <section class={className}>

apps/portfolio/src/env.d.ts

@@ -1,2 +1,4 @@
+/* eslint-disable */
+
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

cspell.json

@@ -7,6 +7,7 @@
 		"csstree",
 		"pretendard",
 		"tailwindcss",
-		"tsconfigs"
+		"tsconfigs",
+		"tseslint"
 	]
 }

eslint.config.js

@@ -0,0 +1,71 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import gitignore from 'eslint-config-flat-gitignore';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginAstro from 'eslint-plugin-astro';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import * as tsParserForExtraFiles from 'typescript-eslint-parser-for-extra-files';
+
+const config = tseslint.config(
+	gitignore({ root: true }),
+	{
+		ignores: [
+			'eslint.config.js',
+			'**/{astro,tailwind,prettier}.config.{js,ts}',
+		],
+	},
+	eslint.configs.recommended,
+	...tseslint.configs.recommendedTypeChecked,
+	...tseslint.configs.stylisticTypeChecked,
+	{
+		languageOptions: {
+			parser: tsParserForExtraFiles,
+			parserOptions: {
+				/**
+				 * Does not work glob project with eslint-plugin-astro
+				 * Waiting release: https://github.com/ota-meshi/eslint-plugin-astro/pull/345
+				 */
+				// project: ['{apps,packages}/*/tsconfig.json'],
+			},
+		},
+		rules: {
+			'@typescript-eslint/array-type': [
+				'error',
+				{ default: 'array-simple', readonly: 'array-simple' },
+			],
+		},
+	},
+	...eslintPluginAstro.configs['flat/recommended'],
+	{
+		files: ['**/*.astro'],
+		languageOptions: {
+			parserOptions: {
+				parser: tsParserForExtraFiles,
+			},
+		},
+	},
+	{
+		files: ['apps/portfolio/**/*'],
+		languageOptions: {
+			parserOptions: {
+				project: ['apps/portfolio/tsconfig.json'],
+			},
+		},
+	},
+	{
+		files: ['packages/fetch-pretendard/**/*'],
+		languageOptions: {
+			parserOptions: {
+				project: ['packages/fetch-pretendard/tsconfig.json'],
+			},
+			globals: {
+				...globals.node,
+			},
+		},
+	},
+	eslintConfigPrettier,
+);
+
+export default config;

nx.json

@@ -6,15 +6,6 @@
 		"build": {
 			"cache": true
 		},
-		"lint": {
-			"cache": true,
-			"inputs": [
-				"default",
-				"{workspaceRoot}/.eslintrc.cjs",
-				"{projectRoot}/.eslintrc.cjs",
-				{ "externalDependencies": ["eslint"] }
-			]
-		},
 		"type:check": {
 			"cache": true
 		}

package.json

@@ -6,23 +6,26 @@
 	"type": "module",
 	"scripts": {
 		"build": "nx run-many --target=build",
-		"lint": "nx run-many --target=lint",
+		"lint": "eslint \"**/*.{astro,ts,js}\"",
 		"type:check": "nx run-many --target=type:check",
 		"format": "prettier \"**/*.{astro,ts,js,cjs,css,json,md,yml,yaml}\" --write",
 		"format:check": "prettier \"**/*.{astro,ts,js,cjs,css,json,md,yml,yaml}\" --check"
 	},
 	"devDependencies": {
+		"@eslint/js": "8.57.0",
 		"@nix6839/prettier-config": "2.2.0",
 		"@types/eslint": "8.56.6",
-		"@typescript-eslint/eslint-plugin": "7.4.0",
-		"@typescript-eslint/parser": "7.4.0",
 		"eslint": "8.57.0",
+		"eslint-config-flat-gitignore": "0.1.5",
 		"eslint-config-prettier": "9.1.0",
-		"eslint-plugin-astro": "0.33.1",
+		"eslint-plugin-astro": "0.34.0",
+		"globals": "15.0.0",
 		"nx": "18.2.1",
 		"prettier": "3.2.5",
 		"prettier-plugin-astro": "0.13.0",
-		"prettier-plugin-tailwindcss": "0.5.13"
+		"prettier-plugin-tailwindcss": "0.5.13",
+		"typescript-eslint": "7.5.0",
+		"typescript-eslint-parser-for-extra-files": "0.6.0"
 	},
 	"packageManager": "[email protected]+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589"
 }

packages/fetch-pretendard/package.json

@@ -6,7 +6,6 @@
 	"bin": "./src/main.js",
 	"scripts": {
 		"start": "node ./src/main.js",
-		"lint": "eslint \"**/*.ts\"",
 		"type:check": "tsc"
 	},
 	"dependencies": {

packages/fetch-pretendard/src/lib/download-file.js

@@ -6,6 +6,7 @@ import * as fs from 'node:fs/promises';
  * @param {string} outputPath
  */
 export default async function downloadFile(fileUrl, outputPath) {
+	/** @type {import('axios').AxiosResponse<import('node:stream').Stream>} */
 	const response = await axios.get(fileUrl, {
 		responseType: 'stream',
 	});

packages/fetch-pretendard/src/main.js

@@ -21,7 +21,9 @@ try {
 async function main() {
 	const { cssUrl, fontOutputDir, cssOutputPath } = parseArgs();
 
-	const css = /** @type {string} */ ((await axios.get(cssUrl)).data);
+	const css = /** @type {import('axios').AxiosResponse<string>} */ (
+		await axios.get(cssUrl)
+	).data;
 
 	if (!isValidCSS(css)) {
 		throw new Error(`"${cssUrl}" is a invalid CSS.`);