Skip to content

Commit d3d1270

Browse files
k11vk11v
authored
Add frontend base (#19)
* Add package.json * Add 'node_modules' to .gitignore * Add 'typescript' to dev dependencies * Configure TypeScript for Vue * Configure TypeScript for Vite * Set 'composite' in tsconfig.*.json According to the documentation, the 'composite' option should be set to 'true' for referenced projects. * Add Vite's client-side types to tsconfig.dom.json * Add 'vite' to dev dependencies * Add favicon.ico mock * Add index.html * Add vite.config.ts * Fix tsconfig.dom.json * Add Vite scripts * Use a relative import for main.ts in index.html - The main.ts reference is fundamentally different from the favicon.ico reference, Vite resolves references like this similarly to how JavaScript imports are resolved. - '@/main.ts' in index.html that uses 'resolve.alias' works properly for the production build but doesn't work for the development server. * Add 'vue-tsc' to dev dependencies * Add 'vue' to dependencies * Add '@vitejs/plugin-vue' to dev dependencies * Add App.vue, main.ts * Add '@types/node' to dev dependencies Fixes TypeScript's "Cannot find type definition file for 'node'". * Fix 'compilerOptions.paths' in tsconfig.dom.json Fixes TypeScript's "Non-relative paths are not allowed when 'baseUrl' is not set. Did you forget a leading './'?" * Set 'noEmit' in referenced tsconfig.json files This makes it possible to perform check-only builds of a project that uses 'references' in tsconfig.json. The '--noEmit' flag cannot be used here because it is incompatible with '--build'. Check-only builds are especially important for 'vue-tsc' as it doesn't support emitting files. * Add '*.tsbuildinfo' to .gitignore * Add 'lint' script to package.json - 'vue-tsc' uses '--build' because we are using 'references' in tsconfig.json. - 'vue-tsc' doesn't use '--noEmit' because it is incompatible with '--build'. Instead we set 'noEmit' to 'true' in the referenced tsconfig.json files. - 'vue-tsc' uses '--force' to make check-only builds more reliable (see vuejs/create-vue#274). * Add 'eslint', 'eslint-plugin-vue', 'typescript-eslint' to dev dependencies * Allow JavaScript to be checked in tsconfig.node.json * Add eslint.config.js * Add ESLint configuration recommended by 'typescript-eslint' * Add '@types/eslint__js' to dev dependencies * Stop using 'types' in tsconfig.json files Because unfortunately, they don't work as expected. * Enhance ESLint with type information - '...tseslint.configs.recommendedTypeChecked' enables enhanced linting with type information. - 'languageOptions.parserOptions.EXPERIMENTAL_useProjectService: true' allows 'typescript-eslint' to compute type information for a TypeScript project that uses 'references' in the tsconfig.json file (see typescript-eslint/typescript-eslint#2094). * Add 'vue-eslint-parser' to dev dependencies * Clean up eslint.config.js * Include local type definitions in the project * Declare 'eslint-plugin-vue' module * Clean up eslint.config.js * Add '@eslint/eslintrc' to dev dependencies * Add '@types/eslint__eslintrc' to dev dependencies * Configure ESLint for Vue - 'eslint-plugin-vue' doesn't support flat configuration yet, therefore we rely on '@eslint/eslintrc' to use Vue's recommended configuration. * Remove 'eslint-plugin-vue' module declaration It is no longer directly imported in the project, so types are not needed. * Ignore a ESLint error regarding 'App.vue' being 'any' * Add 'eslint-config-prettier' to dev dependencies * Add 'prettier' to dev dependencies * Add '@types/eslint-config-prettier' to dev dependencies * Remove 'lint' from scripts * Add 'check', 'format' to scripts * Add Prettier's ESLint config * Remove custom types from tsconfig.*.json * Clean up tsconfig.node.json * Remove 'types' field from tsconfig.json files * Factor out tsconfig.base.json * Add env.dom.d.ts * Add 'tailwindcss', 'postcss', 'autoprefixer' to dev dependencies * Initialize PostCSS and Tailwind * Configure HTML template files for Tailwind * Format * Add types to postcss.config.js * Add the Tailwind directives to style.css * Add style.css import to main.ts * Add Tailwind CSS Prettier plugin * Add 'dist' to .gitignore * Enable reporting of unused disable directives in ESLint * Add vue-router to dependencies * Add router * Add pinia to dependencies * Add Pinia * Ignore dist in eslint * Add @eslint/js to dev dependencies * Suppress the createApp eslint error * Remove the counter store
1 parent 57c2a93 commit d3d1270

21 files changed

+4378
-0
lines changed

‎frontend/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*.tsbuildinfo
2+
dist
3+
node_modules

‎frontend/env.dom.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎frontend/eslint.config.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import path from "node:path";
2+
import { fileURLToPath } from "node:url";
3+
4+
import js from "@eslint/js";
5+
import prettierConfig from "eslint-config-prettier";
6+
import ts from "typescript-eslint";
7+
import vueParser from "vue-eslint-parser";
8+
import { FlatCompat } from "@eslint/eslintrc";
9+
10+
const eslintrc = new FlatCompat({
11+
baseDirectory: path.dirname(fileURLToPath(import.meta.url)),
12+
});
13+
14+
export default ts.config(
15+
{
16+
ignores: ["dist/"],
17+
},
18+
js.configs.recommended,
19+
...ts.configs.recommendedTypeChecked,
20+
...eslintrc.extends("plugin:vue/vue3-recommended"), // Depends on `eslint-plugin-vue`
21+
prettierConfig,
22+
{
23+
languageOptions: {
24+
parser: vueParser,
25+
parserOptions: {
26+
parser: ts.parser,
27+
EXPERIMENTAL_useProjectService: true,
28+
},
29+
},
30+
linterOptions: {
31+
reportUnusedDisableDirectives: "error",
32+
},
33+
},
34+
);

‎frontend/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="src/main.ts"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)