install basic eslint

.eslintrc.json

@@ -0,0 +1,39 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:vue/vue3-essential",
+        "plugin:vue/vue3-recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "parser": "@typescript-eslint/parser",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "vue"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "never"
+        ]
+    }
+}

README.md

@@ -5,6 +5,7 @@
 [![vike][badge-vike-img]][badge-vike-href]
 [![vuetify][badge-vuetify-img]][badge-vuetify-href]
 [![pinia][badge-pinia-img]][badge-pinia-href]
+[![eslint][badge-eslint-img]][badge-eslint-href]
 [![storybook][badge-storybook-img]][badge-storybook-href]
 
 The IT4C Boilerplate for frontends
@@ -19,21 +20,6 @@ To be able to build this project you need:
 
 The following commands are available:
 
-<!--
-| Command                   | Description                              |
-|---------------------------|------------------------------------------|
-| `npm install`             | Project setup                            |
-| `npm run build`           | Compiles and minifies for production     |
-| **Develop**               |                                          |
-| `npm run dev`             | Compiles and hot-reloads for development |
-| `npm run preview`         | Run production preview                   |
-| **Test**                  |                                          |
-| `npm run lint`            | Runs all linters                         |
-| `npm test`                | Run all tests & linters                  |
-| **Storybook**             |                                          |
-| `npm run storybook`       | Run Storybook                            |
-| `npm run build:storybook` | Build static storybook                   |
--->
 | Command                   | Description                              |
 |---------------------------|------------------------------------------|
 | `npm install`             | Project setup                            |
@@ -43,6 +29,7 @@ The following commands are available:
 | `npm run dev`             | Compiles and hot-reloads for development |
 | `npm run server:dev`      | Run development server                   |
 | **Test**                  |                                          |
+| `npm run lint`            | Runs all linters                         |
 | `npm test`                | Run all tests & linters                  |
 | **Storybook**             |                                          |
 | `npm run storybook`       | Run Storybook                            |
@@ -56,13 +43,14 @@ The following commands are available:
 - [x] vuetify
 - [x] pinia store
 - [x] storybook
-- [ ] eslint
+- [x] eslint
 - [ ] figma
 - [ ] chromatic
 - [ ] jest
 - [ ] localization?
 - [ ] documentation?
 - [ ] docker
+- [ ] github actions
 
 ## Known Problems
 
@@ -96,5 +84,8 @@ See [vite-plugin-ssr-vuetify](https://github.com/brillout/vite-plugin-ssr-vuetif
 [badge-pinia-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=dependencies.pinia&label=pinia&color=green
 [badge-pinia-href]: https://pinia.vuejs.org/
 
+[badge-eslint-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.eslint&label=eslint&color=yellow
+[badge-eslint-href]: https://eslint.org/
+
 [badge-storybook-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.storybook&label=storybook&color=yellow
 [badge-storybook-href]: https://storybook.js.org/

package.json

@@ -16,7 +16,8 @@
     "vue",
     "vuetify",
     "pinia",
-    "storybook"
+    "storybook",
+    "eslint"
   ],
   "author": "Ulf Gebhardt",
   "license": "Apache-2.0",
@@ -33,7 +34,8 @@
     "server:prod": "cross-env NODE_ENV=production npm run server",
     "storybook": "cross-env STORYBOOK=true storybook dev -p 6006",
     "build-storybook": "cross-env STORYBOOK=true && storybook build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "eslint --ignore-path .gitignore .",
+    "test": "npm run lint"
   },
   "dependencies": {
     "@mdi/font": "^7.3.67",
@@ -65,6 +67,10 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/vue3": "^7.5.3",
     "@storybook/vue3-vite": "^7.5.3",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-vue": "^9.18.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.5.3"

renderer/types.ts

@@ -15,6 +15,7 @@ export type { Component }
 
 // https://vike.dev/pageContext#typescript
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Vike {
     interface PageContext {
       Page: Page
@@ -34,4 +35,4 @@ import type { ComponentPublicInstance } from 'vue'
 
 type Component = ComponentPublicInstance // https://stackoverflow.com/questions/63985658/how-to-type-vue-instance-out-of-definecomponent-in-vue-3/63986086#63986086
 type Page = Component
-type PageProps = {}
+type PageProps = object

src/stories/Button.stories.ts

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3'
 
-import Button from './Button.vue';
+import Button from './Button.vue'
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta = {
@@ -14,9 +14,9 @@ const meta = {
         onClick: { action: 'clicked' },
     },
     args: { primary: false }, // default value
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof Button>
 
-export default meta;
+export default meta
 type Story = StoryObj<typeof meta>;
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -28,25 +28,25 @@ export const Primary: Story = {
         primary: true,
         label: 'Button',
     },
-};
+}
 
 export const Secondary: Story = {
     args: {
         primary: false,
         label: 'Button',
     },
-};
+}
 
 export const Large: Story = {
     args: {
         label: 'Button',
         size: 'large',
     },
-};
+}
 
 export const Small: Story = {
     args: {
         label: 'Button',
         size: 'small',
     },
-};
+}

src/stories/Header.stories.ts

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3'
 
-import MyHeader from './Header.vue';
+import MyHeader from './Header.vue'
 
 const meta = {
     /* 👇 The title prop is optional.
@@ -9,10 +9,11 @@ const meta = {
    */
     title: 'Example/Header',
     component: MyHeader,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     render: (args: any) => ({
         components: { MyHeader },
         setup() {
-      return { args };
+            return { args }
         },
         template: '<my-header :user="args.user" />',
     }),
@@ -22,9 +23,9 @@ const meta = {
     },
     // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
     tags: ['autodocs'],
-} satisfies Meta<typeof MyHeader>;
+} satisfies Meta<typeof MyHeader>
 
-export default meta;
+export default meta
 type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
@@ -33,10 +34,10 @@ export const LoggedIn: Story = {
             name: 'Jane Doe',
         },
     },
-};
+}
 
 export const LoggedOut: Story = {
     args: {
         user: null,
     },
-};
+}

src/stories/Page.stories.ts

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { within, userEvent } from '@storybook/testing-library';
-import MyPage from './Page.vue';
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { within, userEvent } from '@storybook/testing-library'
+import MyPage from './Page.vue'
 
 const meta = {
     title: 'Example/Page',
@@ -15,20 +15,21 @@ const meta = {
     },
     // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
     tags: ['autodocs'],
-} satisfies Meta<typeof MyPage>;
+} satisfies Meta<typeof MyPage>
 
-export default meta;
+export default meta
 type Story = StoryObj<typeof meta>;
 
 // More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
 export const LoggedIn: Story = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     play: async ({ canvasElement }: any) => {
-    const canvas = within(canvasElement);
+        const canvas = within(canvasElement)
         const loginButton = await canvas.getByRole('button', {
             name: /Log in/i,
-    });
-    await userEvent.click(loginButton);
+        })
+        await userEvent.click(loginButton)
     },
-};
+}
 
-export const LoggedOut: Story = {};
+export const LoggedOut: Story = {}

src/vue.d.ts

@@ -1,4 +1,5 @@
 declare module '*.vue' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Component: any
   export default Component
 }