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:

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

/** @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, you may want to extend your linting rules also from react-app:

...
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):

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

Astro

For Astro add:

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:

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

npm add -D eslint-plugin-cypress

and in .eslintrc.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:

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

prettier.config.mjs

/** @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:

// 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.

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:

pnpx standard-version --first-release

Prerelease

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

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.