Skip to content

Commit

Permalink
Add exports and update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@leroykorterink
leroykorterink committed Nov 6, 2024
1 parent f3b759a commit 2f49290
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 141 deletions.
214 changes: 73 additions & 141 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,168 +1,100 @@
# Media.Monks - eslint Configuration
# Monks - eslint Configuration

The official Media.Monks eslint configuration, based on the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards).
The Monks ESLint Configuration is a set of linting rules and presets designed to enforce the
[Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards) at Monks. This
configuration helps maintain code quality and consistency across different projects by providing
tailored presets for various project types, including JavaScript, TypeScript, and React.

| Package | Version | Downloads |
| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| `@mediamonks/eslint-config` | [![](https://img.shields.io/npm/v/@mediamonks/eslint-config)](https://npmjs.com/@mediamonks/eslint-config) | ![](https://img.shields.io/npm/dm/@mediamonks/eslint-config) |
| `@mediamonks/eslint-config-react` | [![](https://img.shields.io/npm/v/@mediamonks/eslint-config-react)](https://npmjs.com/@mediamonks/eslint-config-react) | ![](https://img.shields.io/npm/dm/@mediamonks/eslint-config-react) |
| `@mediamonks/eslint-config-typescript` | [![](https://img.shields.io/npm/v/@mediamonks/eslint-config-typescript)](https://npmjs.com/@mediamonks/eslint-config-typescript) | ![](https://img.shields.io/npm/dm/@mediamonks/eslint-config-typescript) |
| `@mediamonks/eslint-config-typescript-react` | [![](https://img.shields.io/npm/v/@mediamonks/eslint-config-typescript-react)](https://npmjs.com/@mediamonks/eslint-config-typescript-react) | ![](https://img.shields.io/npm/dm/@mediamonks/eslint-config-typescript-react) |
| `@mediamonks/eslint-plugin-react` | [![](https://img.shields.io/npm/v/@mediamonks/eslint-plugin-react)](https://npmjs.com/@mediamonks/eslint-plugin-react) | ![](https://img.shields.io/npm/dm/@mediamonks/eslint-plugin-react) |
## Quickstart

## Installation

Installation and configuration in a project is super easy, follow the instructions for one of the
following project types.

- [For JavaScript projects](#for-javascript-projects)
- [For JavaScript projects using React](#for-javascript-projects-using-react)
- [For TypeScript projects](#for-typescript-projects)
- [For TypeScript projects using React](#for-typescript-projects-using-react)

### For JavaScript projects

Install the following package(s):
1. Install `@mediamonks/eslint-config`

```sh
npm install --save-dev @mediamonks/eslint-config
```

Add the following configuration to your `package.json`

```json
"eslintConfig": {
"overrides": [
{
"files": ["*.js"],
"extends": [
"@mediamonks/eslint-config"
]
}
]
}
```
2. Create a `eslint.config.js` file in the root of your module

### For JavaScript projects using React
3. Configure your project with one of the configuration presets

Install the following package(s):
## Examples

```sh
npm install --save-dev \
@mediamonks/eslint-config
@mediamonks/eslint-config-react
```

Add the following configuration to your `package.json`

```json
"eslintConfig": {
"overrides": [
{
"files": ["*.js"],
"extends": [
"@mediamonks/eslint-config"
]
}
{
"files": ["*.jsx"],
"extends": [
"@mediamonks/eslint-config",
"@mediamonks/eslint-config-react"
]
}
]
}
```
The package provides four presets tailored for different project types. These presets ensure that
your project adheres to the coding standards and best practices. Below are examples of how to
configure your project using these presets.

### For TypeScript projects
### For projects with JavaScript

Install the following package(s):
```js
import { configs } from '@mediamonks/eslint-config';

```sh
npm install --save-dev \
@mediamonks/eslint-config \
@mediamonks/eslint-config-typescript
export default [
{
ignores: ['build/*'],
},
...configs.JavaScript,
{
languageOptions: {
// Your project language options...
// Please see the eslint/typescript-eslint documentation for more details
},
},
];
```

Add the following configuration to your `package.json`
### For projects with JavaScript and React

```json
"eslintConfig": {
"overrides": [
{
"files": ["*.js"],
"extends": [
"@mediamonks/eslint-config"
]
```js
import { configs } from '@mediamonks/eslint-config';

export default [
{
ignores: ['build/*'],
},
...configs.javascriptReact,
{
languageOptions: {
// Your project language options...
// Please see the eslint/typescript-eslint documentation for more details
},
{
"files": ["*.ts"],
"parserOptions": {
"project": "./tsconfig.json"
},
"extends": [
"@mediamonks/eslint-config",
"@mediamonks/eslint-config-typescript"
]
}
]
}
},
];
```

### For TypeScript projects using React
### For projects with TypeScript

Install the following package(s):
```js
import { configs } from '@mediamonks/eslint-config';

```sh
npm install --save-dev \
@mediamonks/eslint-config \
@mediamonks/eslint-config-react \
@mediamonks/eslint-config-typescript \
@mediamonks/eslint-config-typescript-react
export default [
{
ignores: ['build/*'],
},
...configs.typescript,
{
languageOptions: {
// Your project language options...
// Please see the eslint/typescript-eslint documentation for more details
},
},
];
```

Add the following configuration to your `package.json`
### For projects with TypeScript and React

```json
"eslintConfig": {
"overrides": [
{
"files": ["*.js"],
"extends": [
"@mediamonks/eslint-config"
]
},
{
"files": ["*.jsx"],
"extends": [
"@mediamonks/eslint-config",
"@mediamonks/eslint-config-react"
]
},
{
"files": ["*.ts"],
"parserOptions": {
"project": "./tsconfig.json"
},
"extends": [
"@mediamonks/eslint-config",
"@mediamonks/eslint-config-typescript"
]
```js
import { configs } from '@mediamonks/eslint-config';

export default [
{
ignores: ['build/*'],
},
...configs.typescriptReact,
{
languageOptions: {
// Your project language options...
// Please see the eslint/typescript-eslint documentation for more details
},
{
"files": ["*.tsx"],
"parserOptions": {
"project": "./tsconfig.json"
},
"extends": [
"@mediamonks/eslint-config",
"@mediamonks/eslint-config-react",
"@mediamonks/eslint-config-typescript",
"@mediamonks/eslint-config-typescript-react"
]
}
]
}
},
];
```
8 changes: 8 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@
"eslint-config"
],
"type": "module",
"exports": {
".": "./index.js"
},
"files": [
"src/**/*",
"LICENSE",
"README.md"
],
"scripts": {
"eslint": "eslint .",
"eslint:fix": "eslint . --fix",
Expand Down

0 comments on commit 2f49290

Please sign in to comment.