dayy® eslint config

Caution

This package is currently in beta. Use at your own risk. Breaking changes may occur.

1. Installation
2. Modules
3. Prettier w/ Tailwind CSS
4. Troubleshooting
5. Bonus: VSCode integration
6. Bonus: Lint staged
7. To do

Installation

Install package:

$ npm i -D @dayy-com/eslint-config

Then, create a .eslintrc.js file or modify the existing one in the root of your project’s directory with the following contents (please remove any other configuration files e.g. .eslintrc.json if you have any):

module.exports = {
  extends: ['@dayy-com'],
};

Finally, you can add two scripts to your package.json to lint and/or fix your code:

{
  ...
  "scripts": {
    "lint": "eslint . --ignore-path .gitignore",
    "lint:fix": "npm run lint -- --fix"
  }
}

Modules

Next.js

Usage with Next.js

Change your .eslintrc.js file in the root of your project’s directory with the following contents:

module.exports = {
  extends: ['@dayy-com/eslint-config/next'],
};

Sanity.io

Usage with Sanity.io

Change your .eslintrc.js file in the root of your project’s directory with the following contents:

module.exports = {
  extends: ['@dayy-com/eslint-config/sanity'],
};

Non React projects

Usage with non React projects

Change your .eslintrc.js file in the root of your project’s directory with the following contents:

module.exports = {
  extends: ['@dayy-com/eslint-config/base'],
};

Prettier w/ Tailwind CSS

If you use Tailwind CSS, you can use the following Prettier configuration to make sure that your Tailwind CSS classes are formatted correctly.

First install prettier and prettier-plugin-tailwindcss:

$ npm i -D prettier prettier-plugin-tailwindcss

Then, create a .prettierrc.js file in the root of your project’s directory with the following contents:

const prettierConfig = require('@dayy-com/eslint-config/lib/prettier');

module.exports = {
  ...prettierConfig,

  plugins: ['prettier-plugin-tailwindcss'],
};

Troubleshooting

ESLint was configured to run on `/.eslintrc.js` using `parserOptions.project`

Modify your tsconfig.json file in the root of your project’s directory with the following contents:

{
  ...
  "include": [
    ...,
    "./.eslintrc.js"
  ],
}

Bonus: VSCode integration / formatting on save (optional but recommended)

Install the ESLint extension for VSCode (if you haven’t already):

$ code --install-extension dbaeumer.vscode-eslint

Then, create a .vscode/extensions.json file in the root of your project’s directory with the following contents:

{
  "recommendations": ["dbaeumer.vscode-eslint"]
}

Next up, create a .vscode/settings.json file in the root of your project’s directory with the following contents:

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true
}

To do

• Split modules into separate packages for better peer dependency management
• Lint staged
• GitHub Release Action