eslint-config-leaflink

eslint-config-leaflink

Opinionated ESLint configuration that extends airbnb to not conflict with prettier.

• Features
• Usage
  • Prettier
• Migrating LeafLink projects

Features

• Extends Vue's recommend plugin variant.
• Leverages Vue's prettier plugin, which run's prettier within ESLint, and overrides ESLint/TS rules that may conflict with Prettier.
• Loads a built-in 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.

Usage

Install by running:

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

Then extend from the leaflink config in your .eslintrc.js:

module.exports = {
  extends: ['leaflink'],
  rules: {
    // your overrides here
  },
};

Prettier

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

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

prettierrc.js

const prettierConfig = require('eslint-config-leaflink/prettier');

module.exports = Object.assign(prettierConfig, {
  // your overrides here
});

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": ["eslint-config-leaflink/stylelint"],
  }
}

commitlint

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

const commitlintConfig = require('eslint-config-leaflink/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.