Skip to content

Commit

Permalink
feat: more work on the configs
Browse files Browse the repository at this point in the history 
Signed-off-by: prisis <d.bannert@anolilab.de>
  • Loading branch information
@prisis
prisis committed Jan 11, 2025
1 parent e1b3205 commit 7079b99
Show file tree
Hide file tree
Showing 7 changed files with 31 additions and 434 deletions.
373 changes: 0 additions & 373 deletions packages/eslint-config/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,383 +65,10 @@ yarn add -D eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugi

## Usage

If you don’t have a `.eslintrc.js`, we will create the file for you after installing `@anolilab/eslint-config`.

If you already have a `.eslintrc.js`, then you can extend the `.eslintrc.js`, with `@anolilab/eslint-config`.

> Note: If the script detects an existing `.eslintrc.js` file, it will not overwrite it.
> Note: It can happen that the postinstall script don't run, then you have to add the `.eslintrc.js` manually, or you will use bin command `./node_modules/bin/anolilab-eslint-config` to generate it.
> Note: Our default export contains all of our ESLint rules, including ECMAScript 6+. `@anolilab/eslint-config` use the `ecmaVersion`:`2021` as default.
>
> To change this configuration, change `env: { es2021: false, then active you needed env }` same for, `parserOptions: { "ecmaVersion": 2021 change the version }`
```js
/** @ts-check */
const { defineConfig } = require("@anolilab/eslint-config/define-config");

/// <reference types="@eslint-types/unicorn" />
/// <reference types="@eslint-types/typescript-eslint" />
/// <reference types="@eslint-types/jsdoc" />
/// <reference types="@eslint-types/import" />
/// <reference types="@eslint-types/deprecation" />

module.exports = defineConfig({
env: {
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
extends: ["@anolilab/eslint-config"],
globals: {
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
root: true,
rules: {
// Customize your rules
},
});
```

For more advanced use cases see the example configurations for Node, TypeScript, React or Prettier.

> Note: `@anolilab/eslint-config` will handle the configuration for almost all eslint-plugins / eslint-configs automatically.
> With this you only need to install the needed plugins/configs for TypeScript or React and you done.
### TypeScript

```bash
npm install --save-dev typescript
```

Please extend the `.eslintrc.js` file with the correct `tsconfig.js` path if you have a custom path.

```js
module.exports = {
parserOptions: {
project: "./tsconfig.eslint.json",
},
};
```

For projects that use TypeScript and want additional rules that require type information (rules using type information take longer to run).

Extend the `.eslintrc.js` file:

```js
/** @ts-check */
const { defineConfig } = require("@anolilab/eslint-config/define-config");

/// <reference types="@eslint-types/unicorn" />
/// <reference types="@eslint-types/typescript-eslint" />
/// <reference types="@eslint-types/jsdoc" />
/// <reference types="@eslint-types/import" />
/// <reference types="@eslint-types/deprecation" />

module.exports = defineConfig({
env: {
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
extends: ["@anolilab/eslint-config", "@anolilab/eslint-config/typescript-type-checking"],
globals: {
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
root: true,
rules: {
// Customize your rules
},
});
```

> Tip: Run eslint with the TIMING=1 to identify slow rules.
>
> `TIMING=1 eslint . --ext .ts,.tsx`
>
> This is useful to identify rules that are slow because they require type information.
### React

You need to have "react" and "react-dom" installed.

```bash
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks

yarn add -D eslint-plugin-react eslint-plugin-react-hooks

pnpm add -D eslint-plugin-react eslint-plugin-react-hooks
```

Or for the use of `TypeScript` in react install "typescript" as a dev dependency.

Please extend the `.eslintrc.js` file with the correct `tsconfig.js` path if you have a custom path.

```js
module.exports = {
parserOptions: {
project: "./tsconfig.eslint.json",
},
};
```

Or for the use of `.jsx` files install "@babel/plugin-syntax-jsx" as a dev dependency.

```bash
npm install --save-dev babel @babel/plugin-syntax-jsx

yarn add -D babel @babel/plugin-syntax-jsx

pnpm add -D babel @babel/plugin-syntax-jsx
```

In your `babel.config.js` file add the plugin.

```js
const babelPluginSyntaxJSX = require("@babel/plugin-syntax-jsx");

module.exports = {
plugins: [
[
babelPluginSyntaxJSX,
{
pragma: "React.createElement",
pragmaFrag: "React.Fragment",
},
],
],
};
```

### MDX

```bash
npm install --save-dev eslint eslint-plugin-mdx
```

For more information about `missing` or `optional` to install rules see the `eslint` console output.

### Config

You can configure `@anolilab/eslint-config` options with your `package.json` file.

Add this property to your package.json:

```json5
{
"anolilab": {
"eslint-config": {
// options
}
}
}
```

#### indent

Type: `number`

Default: `4`

It will throw an error if the value is not numeric.

#### plugin

Type: `object` -> key: `string` value: `boolean`

Disable a plugin in your package.json config to turn it off globally in your project.

Example using package.json:

```json
{
"anolilab": {
"eslint-config": {
"plugin": {
"unicorn": false
}
}
}
}
```

#### warn_on_unsupported_typescript_version

Type: `boolean`

Default: `undefined`

To disable the warning, set the value to `false`.

```json
{
"anolilab": {
"eslint-config": {
"warn_on_unsupported_typescript_version": false
}
}
}
```

#### info_on_disabling_jsx_react_rule

Type: `boolean`

Default: `undefined`

To disable the info, set the value to `false`.

```json
{
"anolilab": {
"eslint-config": {
"info_on_disabling_jsx_react_rule": false
}
}
}
```

#### info_on_disabling_prettier_conflict_rule

Type: `boolean`

Default: `undefined`

To disable the info, set the value to `false`.

```json
{
"anolilab": {
"eslint-config": {
"info_on_disabling_prettier_conflict_rule": false
}
}
}
```

#### info_on_disabling_jsonc_sort_keys_rule

Type: `boolean`

Default: `undefined`

To disable the info, set the value to `false`.

```json
{
"anolilab": {
"eslint-config": {
"info_on_disabling_jsonc_sort_keys_rule": false
}
}
}
```

#### info_on_disabling_etc_no_deprecated

Type: `boolean`

Default: `undefined`

To disable the info, set the value to `false`.

```json
{
"anolilab": {
"eslint-config": {
"info_on_disabling_etc_no_deprecated": false
}
}
}
```

#### info_on_testing_library_framework

Type: `boolean`

Default: `undefined`

To disable the info, set the value to `false`.

```json
{
"anolilab": {
"eslint-config": {
"info_on_testing_library_framework": false
}
}
}
```

#### info_on_found_react_version

Type: `boolean`

Default: `undefined`

To disable the info, set the value to `false`.

```json
{
"anolilab": {
"eslint-config": {
"info_on_found_react_version": false
}
}
}
```

#### import_ignore_exports

Type: `string[]`

Default: `[]`

An array with files/paths for which unused exports will not be reported (e.g module entry points in a published package).

```json
{
"anolilab": {
"eslint-config": {
"import_ignore_exports": []
}
}
}
```

### Let [Prettier](https://prettier.io/) handle style-related rules

Prettier is a code formatting tool that offers fewer options but is more professional than the style-related rules in ESLint.

Now that Prettier has become a necessary tool in front end projects, `@anolilab/eslint-config` does not need to maintain the style-related rules in ESLint anymore,
so we completely removed all Prettier related rules, if `prettier` is found in your `package.json` and use ESLint to check logical errors which it’s good at.

As for whether two spaces or four spaces are used for indentation and whether there is a semicolon at the end, you can configure it in the project’s `.prettierrc.js`.
Of course, we also provide a recommended Prettier [configuration](../prettier-config/README.md) for your reference.

`@anolilab/eslint-config` does disable all included style-related rules, so there is no need to install [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier).

## Using experimental features with JavaScript

If you are using experimental features such as class fields with JavaScript files you should install `@babel/eslint-parser`.

```bash
npm install --save-dev @babel/core
```

## Plugins

### Code Quality
Expand Down
Loading

0 comments on commit 7079b99

Please sign in to comment.