Linting and Formatting Config Files

Introduction

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

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 .eslintrc.js and .prettierrc.js

.eslintrc.js

Add the following code snippets to the empty .eslintrc.js depending on your specific stack and needs.

Minimal Default Content

const eslint = { ...require("@madrus/configs").eslint };

module.exports = eslint;

Here we are using a variable because we may wish to add some more settings to .eslintrc.js later.

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"
}

.prettierrc.js

const prettier = {
  ...require("@madrus/configs").prettier,
};

module.exports = prettier

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.

.stylelintrc.js

If you are using a lot of CSS/SASS/SCSS files in your project, you may wish to add Stylelint as well:

pnpm add -D stylelint
pnpm add -D stylelint-config-prettier
pnpm add -D stylelint-config-standard

and .stylelintrc.js:

module.exports = {
  ...require("@madrus/configs").stylelint,
};

Other Related Files

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

• .editorconfig
• .eslintignore
• .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.