@cewald/eslint-config package source

This is a company-wide coding style-guide using eslint, @stylistic/eslint-plugin as formatter and optional linting for TailwindCSS using eslint-plugin-tailwindcss.

It should be applied to all JS/TS projects to unify the company coding-styles.

Install & setup eslint and prettier with this package

1. Install packages:

   npm i -D eslint @cewald/eslint-config

2. Add eslint.config.mjs to root directory:

   import config from '@cewald/eslint-config'
   
   export default [ ...config() ]

3. For autoformat on save in VSCode, add VSCode settings to workspace settings in .vscode/settings.json:

   {
     "editor.formatOnSave": false,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "always"
      }
   }

4. Add linting commands to package.json:

   "scripts": {
      "lint": "eslint",
      "lint:fix": "eslint --fix",
   }

5. Remove unnecessary packages

Setup linting and format pre-commit hooks with husky

With this configured changed files will automatically be formatted and linted on commit.

1. Install deps:

   npm i -D husky lint-staged

2. Create hook for husky in .husky/pre-commit:

   npx lint-staged

3. Add lint-staged config to package.json:

   "lint-staged": {
    "*": [
      "npm run lint:fix"
    ]
   }

Development

1. Simply run npm run dev
2. You can use npm link to use a local version in your local repos

Debug eslint config

In case you have to debug rules or how they are applied, there is a whole guide for it here:
https://eslint.org/docs/latest/use/configure/debug

Anyway the config-inspector is the best tool:
https://eslint.org/docs/latest/use/configure/debug#use-the-config-inspector

Just run npx eslint --inspect-config from the root folder and you can see which rules are applied in a nice and conveniant interface.