@leaflink/eslint-config

@leaflink/eslint-config

Configuration for ESLint, Prettier, Stylelint, and Commitlint at LeafLink.

• Features
• Usage
  • Prettier
• Migrating LeafLink projects

Features

• Extends Vue's recommend plugin variant.
• Runs Prettier via ESLint using LeafLink's opinionated prettier config, but can be overridden by your project's prettier config if found.
• Supports both Vue & non-Vue applications dynamically based on your project's dependencies.
• Supports linting TypeScript (.ts and .tsx files) and TypeScript within .vue sfc files.
• Leverages the simple-import-sort plugin with some opinionated defaults.
• Lints yml files with eslint-plugin-yml.
• Enforces best practices and consistency using Tailwind CSS with eslint-plugin-tailwindcss.

Installation

Install by running:

npx install-peerdeps --dev @leaflink/eslint-config

[!IMPORTANT]

Requirements ESLint v9 and above Node.js v20 and above

Usage

Create an eslint.config.js file in the root of your project and extend from the shared LeafLink config.

import leaflinkConfig from '@leaflink/eslint-config';

export default [
  leaflinkConfig,

  {
    rules: {
      // your overrides here
    },
  },
];

Prettier

Prettier is automatically run through eslint with LeafLink's default configuration. You can optionally add a prettier.config.js configuration file in the root of your project and it will take precedence over the built-in config within @leaflink/eslint-config.

If you'd like to extend our prettier config and only override a couple of properties, you can do the following:

prettier.config.js

import leaflinkConfig from '@leaflink/eslint-config/prettier';

/**
 * @see https://prettier.io/docs/en/configuration.html
 * @type {import("prettier").Config}
 */
const config = {
  ...leaflinkConfig,
  // your overrides here
};

export default config;

Stylelint

In your .stylelintrc file, you can extend from the shared LeafLink stylelint config.

{
  "extends": ["eslint-config-leaflink/stylelint"]
}

Or you can do so in your package.json:

{
  "stylelint": {
    "extends": ["@leaflink/eslint-config/stylelint"],
  }
}

commitlint

Create a commitlint.config.js in your project so you can extend from the shared LeafLink commitlint config.

const commitlintConfig = require('@leaflink/eslint-config/commitlint');

module.exports = Object.assign(commitlintConfig, {
  // your overrides here
  rules: {
    'scope-case': [1],
  },
})

Known issues

https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/149

When building dynamic classes, the auto sorting of tailwind classes can break things so beware:

To avoid this happening you can re-wrap the dynamic class expression like so:

class="`p-0 ${`tw-border-${accentColor}`}`"

Migrating LeafLink projects

1. Uninstall your projects linting depedencies.

   npm uninstall \
     eslint \
     @vue/eslint-config-prettier \
     @vue/eslint-config-typescript \
     eslint-plugin-simple-import-sort \
     eslint-plugin-vue vue-eslint-parser \
     eslint-plugin-testing-library \
     @typescript-eslint/eslint-plugin \
     @typescript-eslint/parser \
     eslint-plugin-cypress \
     stylelint \
     stylelint-config-prettier \
     stylelint-config-standard \
     stylelint-config-standard-scss \
     stylelint-config-standard-vue \
     stylelint-order \
     postcss-html \
     @commitlint/cli \
     @commitlint/config-conventional
   

2. Optionally delete your project's stylelint config.

   rm .stylelint.config.js .stylelintrc
   

3. Optionally delete your project's prettier config and uninstall prettier unless it's used for non-js/yml things like markdown, etc.

   npm uninstall prettier
   rm .prettierrc.cjs .prettierrc.js .prettierrc
   

4. Install eslint-config-leaflink.

   npx install-peerdeps --dev eslint-config-leaflink
   

5. Optionally delete your projects .eslintignore file if our default list of ignorePatterns is adequate. (Note: If you think there's a good general addition to this list, please open a PR).
6. Check to see if your eslintignore can be deleted. The shared config will only support high level ignore patterns.

   ignorePatterns: ['dist', '!.github'],
   

7. Update your projects' ESLint config.

   module.exports = {
   -   extends: [
   -     'plugin:vue/vue3-recommended',
   -     'eslint:recommended',
   -     '@vue/eslint-config-typescript',
   -     '@vue/eslint-config-prettier',
   -     'prettier',
   -     '@vue/prettier',
   -     '@vue/typescript',
   -     'plugin:testing-library/vue',
   -   ],
   -   env: {
   -     es2021: true,
   -     browser: true,
   -     es6: true,
   -     node: true,
   -     jest: true,
   -   },
   -   plugins: [
   -     '@typescript-eslint',
   -     'prettier',
   -     'simple-import-sort',
   -   ],
   -  parser: 'vue-eslint-parser',
   -  parserOptions: {
   -    ecmaVersion: 2018,
   -    sourceType: 'module',
   -    parser: '@typescript-eslint/parser',
   -   },
   +   extends: ['leaflink'],
   +   // overrides...
   }
   

8. Update your projects' package.json.

   - "commitlint": {
   -   "extends": [
   -     "@commitlint/config-conventional"
   -   ],
   -   "rules": {
   -     "scope-case": [
   -       0
   -     ],
   -     "body-max-line-length": [
   -       0
   -     ]
   -   }
   - }
   + "stylelint": {
   +   "extends": ["eslint-config-leaflink/stylelint"]
   + }
   

9. Add a separate commitlint.config.js file.

   const config = require('eslint-config-leaflink/commitlint');
   
   module.exports = config;
   

Note: It's recommended you attempt to remove as many of your specific overrides as possible and see how much can be autofixed to be inline with this shared configuration. You can extend from leaflink and set temporary overrides to turn some rules off in order to make the initial migration easier.