Add Eslint, Prettier and Lint-Staged to Rewrite

[WaldemarLehner]

This PR does the following:

• [x] Add Eslint and Prettier to the Project
• [x] Configure Eslint and Prettier
• [x] Resolve any issues with the Ruleset of Eslint
• [x] Resolve any issues with the Ruleset of Prettier
• [x] Add lint-staged and (if needed) husky for pre-commit hooks
• [x] Create a Github Action to automatically invoke eslint and prettier for changed files in PRs.

Closes #274 Closes #275 Closes #276

[WaldemarLehner]

Ready to review.

This PR is… uhh… huge. But, most of the changes are automatically done by eslint and prettier. I have fixed the issues discovered by eslint before doing the prettier --fix run. In the Changes Tab you can look at specific commits. I would recommend looking at the commits before the prettier fix first.

Once that is done, I would recommend filtering just for Dotfiles in the Changes tab. Anything else is basically irrelevant.

Oh.. one more thing. As part of the prettier --write run I had to replace the ? in the Trick YAML files. I replaced them with 42 for now.

[bastislack]

Oh, we can also get rid of the trick yaml files. Because when everything is working the vite plugin you wrote should fetch the tricks from the sheet, right?

[WaldemarLehner]

Oh, we can also get rid of the trick yaml files. Because when everything is working the vite plugin you wrote should fetch the tricks from the sheet, right? — @bastislack

Nope. The YAML Files are here to stay as they guarantee that a build is reproducible. We can however create a Process in which tricks from the google sheet are automatically added (in the form of a Pull Request) as YAML files, e.g. with the help of a Github Action that is run every day or so.

Using PRs would also give another verification step.

[WaldemarLehner]

I added another commit which adds the *.schema.json files to the prettierignore list. These files are autogenerated and do not need to be readable.

[bastislack]

Nope. The YAML Files are here to stay as they guarantee that a build is reproducible.

Ok, but then I'll have to complete the tricks, because I only copied a limited version of the tricks into the yaml files.

[WaldemarLehner]

Nope. The YAML Files are here to stay as they guarantee that a build is reproducible.

Ok, but then I'll have to complete the tricks, because I only copied a limited version of the tricks into the yaml files.

nope. Idea would be to have an Action that fetches the Sheet and creates the YAML files for you

[Dosbodoke]

I forgot to mention about one prettier rule that I like to put on my projects to organize the imports

https://github.com/trivago/prettier-plugin-sort-imports

Example:

Before usage

import React, {
    FC,
    useEffect,
    useRef,
    ChangeEvent,
    KeyboardEvent,
} from 'react';
import { logger } from '@core/logger';
import { reduce, debounce } from 'lodash';
import { Message } from '../Message';
import { createServer } from '@server/node';
import { Alert } from '@ui/Alert';
import { repeat, filter, add } from '../utils';
import { initializeApp } from '@core/app';
import { Popup } from '@ui/Popup';
import { createConnection } from '@server/database';

After Usage

import { debounce, reduce } from 'lodash';
import React, {
    ChangeEvent,
    FC,
    KeyboardEvent,
    useEffect,
    useRef,
} from 'react';

import { createConnection } from '@server/database';
import { createServer } from '@server/node';

import { initializeApp } from '@core/app';
import { logger } from '@core/logger';

import { Alert } from '@ui/Alert';
import { Popup } from '@ui/Popup';

import { Message } from '../Message';
import { add, filter, repeat } from '../utils';

It works fine with Vue as well.