JavaScript Linter #89

Aktuell wird kein Linter verwendet. Dieser hilft, Fehler schneller aufzufinden sowie einen einheitlichen Coding Style im gesamten Projekt zu verwenden.

Mit Hinblick auf eine Migration zu Vue3 (siehe #62) würde ein Linter die Arbeit wesentlich erleichtern.

Vorschlag:

• Einbinden von ESLint
• Vue.js Unterstützung via eslint-plugin-vue
• Festlegen eines (in der Community verbreiteten) Coding Styles, z.b. standardJS bzw. eslint-config-standard

Der Coding Style ist ja manchmal ein heikles Thema, daher ist standard nur als Vorschlag zu sehen :-)

Wir sind liberal. Es muss in erster Linie lesbar und verständlich sein.

Interessanter sind 1 und 2. :)

Dank @w4ts0n bin ich auf dieses Issue aufmerksam geworden.

Die Anregung von @dubst3pp4 halte ich für eine sehr gute Idee. Ihr könntet auch überlegen, ob die lerntools dann auch den vue-client nutzen, das erspart einige Arbeit.

Und es finden sich immer verweister Code, ungenutzte Variablen etc. - obwohl @pw vor gut einem Jahr ein sehr gründliches Review vorgenommen hat 👍

Warnung: Der Aufwand ist nicht zu unterschätzen! Da die Grundlagen der lerntools vor ES6 entstanden, gibt es viel aufzuräumen...

Ich habe gestern bereits mal angefangen, eslint zu installieren. Die (doch relativ große) Liste an warnings und errors würde ich jetzt nach und nach einfach mal abarbeiten. Aktuell habe ich das Repo geforkt, der Branch ist hier zu finden...

zur Info

npm install (dev branch) weist auf fehlende peer dependendies hin:

npm WARN eslint-config-standard@16.0.3 requires a peer of eslint@^7.12.1 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-standard@16.0.3 requires a peer of eslint-plugin-promise@^4.2.1 || ^5.0.0 but none is installed. You must install peer dependencies yourself.

Warnung: Der Aufwand ist nicht zu unterschätzen! Da die Grundlagen der lerntools vor ES6 entstanden, gibt es viel aufzuräumen...

Ist mir aufgefallen 😅

Wird also künftig ESLint verwendet?
Mit Standard.js? (In der Web-Community ist Prettier beliebter, auch wenn ich ein Fan von Standard.js bin - Achtung! Prettier ist opinonated (Standard.js auch...)).

Wir könnten mit Ignores anfangen und nach und nach die Bereiche zum Linten scharf schalten.

In den MintApps, die ja auf der selben Code-Basis aufsetzen habe ich mich für standard + vue3-essentials entschieden: https://codeberg.org/MintApps/client/src/branch/main/.eslintrc.js

Falls ihr es ähnlich handhabt, wäre es leichter Bausteine auszutauschen.

Ich bin dafür, dass wir uns weiterhin eng an unser Schwesterprojekt (gleicher Papa 😉) Mintapps binden um Bausteine austauschen zu können.

Ich habe jetzt die Konfiguration von @tk100 als PR #103 vorbereitet. Dabei musste ich noch eine Abhängigkeit installieren, um Stylelint lokal ausführen zu können.

Das dürfte jetzt in einem ersten Schritt auch in dev sein, wenn ich es richtig sehe.

Ich schlage vor, dass noch Labels ergänzt werden :-)

Ein npm run lint ist derzeit noch nicht aufgenommen, weil wir noch einige Fehler und Warnings adressieren müssen ~> In Progress?

@tk100 Für den Fall, dass es dir entgangen ist: ESLint stellt auf Flat Config um:

https://eslint.org/blog/2023/11/whats-coming-in-eslint-9.0.0/

Mir ist das dieses Jahr bei einem GameDev Jam über den Weg gelaufen. Ich habe den PR 187 gleich auch entsprechend angepasst:

70ef962b4a/eslint.config.js

Mögt ihr vielleicht auch in MintApps übernehmen.

Vielen Dank für den Hinweis! Ich habe aktuell zwei Probleme identifiziert:

1. Das eslint-vue Plugin unterstützt noch keine Flat-Config. Ich würde das in den MintApps leicht anders lösen, indem ich FlatCompat aus dem Projekt nutze:

import js from '@eslint/js'
import globals from 'globals'
import { FlatCompat } from '@eslint/eslintrc'
const eslintrc = new FlatCompat()
export default [
 {
 ignores: ["node_modules", "old"]
 },
 js.configs.recommended,
 ...eslintrc.plugins('vue'),
 ...eslintrc.extends('plugin:vue/vue3-recommended'),
 {
 files: ['src/**/*.js', 'src/**/*.vue'],
 languageOptions: {
 globals: {
 ...globals.browser,
 },
 parserOptions: {
 ecmaVersion: 2021,
 sourceType: "module"
 }
 }
 }
]

2. Das eslint Plugin für vite unterstützt auch noch keine Flat-Config. Das ist für mich aktuell ein Ausschlusskriterium, aber die Issues lassen vermuten, dass es bald etwas gibt ;-)

Magst du die Issues verlinken, damit wir ein Auge darauf haben können?

Issues:

• „Support for new flat config eslint.config.js": https://github.com/gxmari007/vite-plugin-eslint/issues/55
• „ESLint doesn‘t work with flat config": https://github.com/gxmari007/vite-plugin-eslint/issues/78

Pull Request:

• „support for eslint flat configs": https://github.com/gxmari007/vite-plugin-eslint/pull/82