23G ESlint Config

This is a custom ESLint configuration designed specifically for projects using the Vite, Vue, and TypeScript stack.

Installation

To get started, follow these steps:

1. Install dependencies

Run the following command to install the required dependencies:

npm install --save-dev @23g/eslint-config-vue

2. Configure ESLint in Your Project

In your project's ESLint configuration file (eslint.config.js), add the following to extend the @23g/eslint-config settings:

import eslintConfigVue from '@23g/eslint-config-vue';

export default [
    ...eslintConfigVue(),
];

Options

The eslintConfig function accepts an optional options object to customize its behavior. Below are the available options:

| Option | Type | Default Value | Description | | --------------------- | ------------------------------------------- | ------------------------------------------------- | ------------------------------------------------- | | globals | Linter.Globals | undefined | Extends the default ESLint globals configuration. | | playwrightTestFiles | string[] | ['src/tests/**'] | Glob patterns for Playwright test files. | | project | string \| string[] | ['./tsconfig.app.json', './tsconfig.node.json'] | One or more tsconfig paths. | | tsConfig | 'recommended' \| 'recommendedTypeChecked' | 'recommended' | Predefined TypeScript ESLint config mode. |

Example usage with options

import eslintConfigVue from '@23g/eslint-config-vue';

export default [
    ...eslintConfigVue({
        globals: {
            definePage: 'readonly',
            google: 'readonly',
        },
        playwrightTestFiles: ['tests/**'],
        project: ['./tsconfig.json'],
        tsConfig: 'strictTypeChecked',
    }),
];

Rules

Our ESLint rules are designed to be modular and easily reusable in other setups. If you want to apply the same rules in a different config, you can import them directly from our configuration package:

import { rules } from '@23g/eslint-config-vue';

Customization

This configuration is designed to be flexible, allowing you to extend or override the default settings based on your project requirements. You can modify the rules directly in your own ESLint configuration if necessary.

Features

• Vue.js Support: Linting rules optimized for Vue.js projects.
• TypeScript Integration: TypeScript rules to ensure best practices for TypeScript code.
• Prettier Integration: Automatically integrates with Prettier for consistent code formatting.
• Vite Compatibility: Ensures your code adheres to best practices for Vite-based applications.

Maintaining the Package

Installing Dependencies

npm ci

Publishing the Package

To publish the package to npm, run the following command:

npm publish --access public

The --access public flag is necessary for public packages, especially if your package is scoped (e.g., @your-org/your-package). By running npm publish, the prepare script (if defined in your package.json) will be triggered automatically. This ensures that the latest compiled version of your package is what gets published to npm.

Troubleshooting

Cypress tests

ESlint doesn't work well with Cypress. If your project uses Cypress you probably want to add the following to your eslint.config.js to ignore cypress files:

export default [
    { ignores: ['**/*.cy.ts', 'cypress/**/*.ts'] },

    ...eslintConfigVue(),

    {
        files: ['**/*.cy.ts'],
        rules: {
            // This rule is turned off for cypress tests because it doesn't go well with chai assertions.
            '@typescript-eslint/no-unused-expressions': 'off',
        },
    },
];