Installation

This package centralizes the required ESLint configuration and prettier setup for all Vue applications. To install it, run the following command:

npm i -D @xerius/eslint-config

Note

This package has no codey prefix in his name because of the naming convention for ESLint configurations.

Remove already included packages

This package will install the correct packages an their versions for you. If you already have some of these packages installed, you should remove them from your package.json file.

{
  "devDependencies": {
-   "@vue/eslint-config-prettier": "...",
-   "@vue/eslint-config-typescript": "...",
-   "eslint": "...",
-   "eslint-import-resolver-typescript": "...",
-   "eslint-plugin-cypress": "...",
-   "eslint-plugin-import": "...",
-   "eslint-plugin-vitest-globals": "...",
-   "eslint-plugin-vue": "...",
-   "prettier": "..."
  }
}

Rushstack/eslint-patch not needed anymore

If you are using rushstack/eslint-patch in your project, you can remove it from your package.json file. This package is not needed anymore since @xerius/eslint-config@2.

{
  "devDependencies": {
-   "@rushstack/eslint-patch": "..."
  }
}

Update ESLint configuration

Update the eslint configuration file to eslint.config.js, .eslintrc files are not supported anymore.

Add the configuration, and follow comment instructions to configure it to your needs, as following:

import eslintConfig from "@xerius/eslint-config";

export default eslintConfig({
  // You can extend the configuration with your own rules here if needed.
  // For example:
  // rules: {
  //   'vue/no-unused-vars': 'warn',
  // },
});

commonJS syntax

If your package.json does not contain "type": "module", your eslint.config.js will have to be in CommonJS format.
See ESLint documentation: ESLint Configuration File documentation.

Ignore gitignored files

Our Codey Front-Office Starter used to contain --ignore-path .gitignore:
This option is no longer supported, but there are 2 ways to get the same behaviour.

• Manually add and maintain a separate list of ignored files to the ESLint config. See docs.
• Add the @eslint/compat package as a devDependency which allows the same functionality in your eslint.config.js file.

npm i -D @eslint/compat

  import eslintConfig from "@xerius/eslint-config";
+ import path from "node:path";
+ import { includeIgnoreFile } from "@eslint/compat";

+ const __dirname = process.cwd();
+ const gitignorePath = path.resolve(__dirname, ".gitignore");

  export default eslintConfig({
    // You can extend the configuration with your own rules here if needed.
    // For example:
    // rules: {
    //   'vue/no-unused-vars': 'warn',
    // },
+   ...includeIgnoreFile(gitignorePath),
  });