npm package: @madrus/configs
Description: Shared linting and formatting files
Author: Andre Roussakoff
Latest version: 3.1.0

# Linting and Formatting Config Files

## Introduction

This repository will be used to store generic frontend config files to be used by my projects.

**Breaking changes:** in v2 of this package, I have upgraded everything to modules and flat eslint config as required by eslint v9.

---

## How to use

In your projects install `@madrus/configs` and make sure you have the necessary `TypeScript/ESlint/Prettier` dependencies. I give example with my favorite `pnpm` but you can replace it with `npm` or `yarn`:

```bash
pnpm add -D @madrus/configs
pnpm add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
pnpm add -D eslint eslint-config-prettier eslint-import-resolver-typescript
pnpm add -D eslint-plugin-import eslint-plugin-node eslint-plugin-prettier
pnpm add -D eslint-plugin-astro eslint-plugin-jsx-a11y
pnpm add -D eslint-plugin-prefer-arrow eslint-plugin-promise
pnpm add -D prettier prettier-eslint prettier-plugin-astro
pnpm add -D @trivago/prettier-plugin-sort-imports
```

Next add `eslint.config.mjs` and `prettier.config.mjs`.

### `eslint.config.mjs`

Add the following code snippets to the empty `eslint.config.mjs` depending on your specific stack and needs.

#### Minimal Default Content

```js
/** @type {import('eslint').Linter.Config[]} */
import madrusConfig from '@madrus/configs/eslint.mjs'

// other imports
export default [
  // Base config from @madrus/configs
  ...madrusConfig,
  // other ignores and overrides
]
```

Here we are using a variable because we may wish to add some more settings to `eslint.config.mjs` later.

---

> The following text is related to previous version of this package.before the upgrade. I will update it when I have time

#### Create-React-App

If your project is based on [Create React App](https://create-react-app.dev), you may want to extend your linting rules also from `react-app`:

```js
...
eslint.extends.push('react-app')
```

and to add the following `babel` preset to your `package.json` file (not yet 100% tested if this is ALSO necessary):

```json
 "babel": {
    "presets": [
      [
        "@babel/preset-react",
        {
          "runtime": "automatic"
        }
      ]
    ]
  },
```

#### Astro

For Astro add:

```js
eslint.extends.push('plugin:astro/jsx-a11y-recommended')
eslint.extends.push('plugin:astro/recommended')
eslint.overrides.push({
  // Define the configuration for `.astro` file.
  files: ['*.astro'],
  // Allows Astro components to be parsed.
  parser: 'astro-eslint-parser',
  // Parse the script in `.astro` as TypeScript by adding the following configuration.
  // It's the setting you need when using TypeScript.
  parserOptions: {
    parser: '@typescript-eslint/parser',
    extraFileExtensions: ['.astro'],
  },
  rules: {
    // override/add rules settings here, such as:
    // "astro/no-set-html-directive": "error"
  },
})
```

#### Svelte and SvelteKit

For Svelte and SvelteKit add:

```ts
eslint.plugins.push('svelte3')
eslint.overrides.push({ files: ['*.svelte'], processor: 'svelte3/svelte3' })
eslint.settings = {
  ...eslint.settings,
  'svelte3/typescript': () => require('typescript'),
}
```

#### Cypress

Add `cypress` stuff if you plan to use it. Install

```bash
npm add -D eslint-plugin-cypress
```

and in `.eslintrc.js`:

```js
eslint.env['cypress/globals'] = true
eslint.extends.push('plugin:cypress/recommended')
eslint.parserOptions.project.push('./cypress/tsconfig.json')
eslint.plugins.push('cypress')
eslint.rules['cypress/no-assigning-return-values'] = 'error'
eslint.rules['cypress/no-unnecessary-waiting'] = 'error'
eslint.rules['cypress/assertion-before-screenshot'] = 'error'
...
```

Make sure there is the `cypress` folder with at least this in the `tsconfig.json` file:

```json
{
  "extends": "../tsconfig.json"
}
```

---

### `prettier.config.mjs`

```js
/** @type {import('prettier').Config} */
import prettierConfig from '@madrus/configs/prettier.mjs'

// Add tailwindcss plugin to the existing plugins array
const plugins = [
  ...(prettierConfig.plugins || []),
  '@trivago/prettier-plugin-sort-imports',
  'prettier-plugin-tailwindcss',
]

export default {
  ...prettierConfig,
  importOrder: [
    '^(node|@conform-to)',
    '^@remix-run/(css-bundle|node|react)|^isbot|^react-dom/server',
    '^(react|zod)',
    '^@/(?!.*)',
    '^(zustand|vitest|cy|jest)(.*)',
    '^(?!src|test|.*/).*$',
    '^(src|test)(.*)',
    '^@',
    '^[./]',
    '^.*',
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
  importOrderCaseInsensitive: true,
  plugins,
}
```

---

> The following text is related to previous version of this package.before the upgrade. I will update it when I have time

#### Astro and Svelte

If you wish to use plugins for Astro or Svelte, add the following lines correspondingly:

```js
// Astro
prettier.overrides.push({ files: '*.astro', options: { parser: 'astro' } })
prettier.plugins.push(require.resolve('prettier-plugin-astro'))

// Svelte/SvelteKit
prettier.overrides.push({ files: '*.svelte', options: { parser: 'svelte' } })
prettier.plugins.push(require.resolve('prettier-plugin-svelte'))
prettier.pluginSearchDirs = ['.']
```

Of course, you will need to install `prettier-plugin-astro` and/or `prettier-plugin-svelte` to make it work.

## Other Related Files

Add manually these two files from `node_modules/@madrus/configs` to the root of your project as they cannot be linked:

- `.editorconfig`
- `.prettierignore`

---

## For Developers

Here is note on versioning based on the docs on [standard-version](https://github.com/conventional-changelog/standard-version).

### Normal release

When you wish to deploy a new version, use `pnpm release` and the new version number will be calculated automatically based on the new commit messages since the last tagged commit.

### First Release

To create the first release and `CHANGELOG.md` run:

```bash
pnpx standard-version --first-release
```

### Prerelease

Suppose the current version is `1.0.0` and after that you have committed some patched changes. Running

```bash
pnpm release --prerelease
# or
pnpm release --prerelease alpha
# or
pnpm release --prerelease rc
```

will create one of these versions correspondingly: `1.0.1-0`, `1.0.1-rc.0` or `1.0.1-alpha.0`.