docs(readme): update configuration in README

README.md

@@ -4,76 +4,87 @@ This repository contains a shared ESLint configuration for use across all GEWIS
 
 ## Installation
 
-To use this ESLint configuration in your project, add it as a dependency in your `package.json` file.
-
-```json
-{
-  "devDependencies": {
-    "@gewis/eslint-config": "github:GEWIS/eslint-config"
-  }
-}
-```
-
-### Using yarn to Install
-
-You can also install it directly using the command line:
-
+To use this ESLint configuration in your project, install it using `npm` or `yarn`.
 ```bash
+npm install @gewis/eslint-config@github.com:GEWIS/eslint-config --save-dev
 yarn add @gewis/eslint-config@github.com:GEWIS/eslint-config --dev
 ```
 
 ## Usage
+The package provides sharable configurations for [ESLint](https://eslint.org/docs/latest/extend/shareable-configs) and
+[prettier](https://prettier.io/docs/en/sharing-configurations) that can be used directly in your project's configuration files. 
 
-1. **Create or Update ESLint Configuration:**
+> [!NOTE]  
+> The shared configurations for ESLint are not compatible with ESLint `v8.x`
 
-   In your project's root directory, create or update the `.eslintrc.cjs` file to extend this configuration:
+### ESLint Configuration
 
-   ```javascript
-   module.exports = {
-     extends: '@gewis/eslint-config',
-   };
-   ```
+In your project's root directory, create or update the `eslint.config.{js,mjs,cjs,ts,mts,cts}` file to extend this configuration. 
+You can pick a combination of various configuration files:
 
-2. **Run ESLint:**
+- `eslint.common.mjs`
+- `eslint.vue.mjs`
+- `eslint.prettier.mjs`
+- `eslint.react.mjs`
 
-   You can now lint your files using the configured rules. If you have added a script in your project's `package.json`, you can run:
+```javascript
+import eslint from '@gewis/eslint-config/eslint.common.mjs';
+import vue from '@gewis/eslint-config/eslint.vue.mjs';
+import prettier from '@gewis/eslint-config/eslint.prettier.mjs';
+
+export default [...eslint, ...vue, ...prettier];
+```
 
-   ```bash
-   yarn lint
-   ```
+It is possible to (partially) [override settings](https://eslint.org/docs/latest/extend/shareable-configs#overriding-settings-from-shareable-configs)
+of the shared configurations in your config file. It is also possible to add your own ignored file to the configurations
 
-   Make sure to define the lint script in your `package.json`:
+> [!NOTE]  
+> All files in the `.gitignore` file(s) are ignored by default
 
-   ```json
-   "scripts": {
-     "lint": "eslint ."
-   }
-   ```
-
-## Custom Rules
+### Prettier Configuration
 
-If you need to add custom rules, you can do so in your local `.eslintrc.cjs` file:
+In your project's root directory, create or update the `.prettierrc.mjs` file to extend this configuration. 
+There is a single [shared prettier configuration](https://prettier.io/docs/en/sharing-configurations) available; `prettier.mjs`.
 
 ```javascript
-module.exports = {
-  extends: '@gewis/eslint-config',
-  rules: {
-    // Add custom rules here
-    'no-console': 'warn',
-    'quotes': ['error', 'single'],
-  },
+import prettier from '@gewis/eslint-config/prettier.mjs';
+
+/**
+ * @type {import("prettier").Config}
+ */
+export default {
+  ...prettier,
 };
 ```
 
-## Contributing
+Just like with ESLint, it is possible to (partially) [override settings](https://prettier.io/docs/en/sharing-configurations#extending-a-sharable-config).
+of the shared configuration.
+
+### Run
+
+Make sure to define the lint and format script in your `package.json`.
+
+```json
+{
+  "scripts": {
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix",
+    "format": "prettier --ignore-path .gitignore --check .",
+    "format-fix": "prettier --ignore-path .gitignore --write ."
+  }
+}
+```
+
+You can now lint and format your files using the configured rules and scripts. 
 
+## Contributing
 Contributions are welcome! Please open an issue or submit a pull request if you'd like to suggest changes or improvements.
 
 ### Updating the Configuration
 
 To update the configuration:
 
-1. Make changes to the `.eslintrc.cjs` file in this repository.
+1. Make changes to or add new ESLint configurations in this repository.
 2. Commit your changes and push to GitHub.
 3. Projects using this configuration will automatically pull the latest version when they run `yarn install`.