@vcsuite/eslint-config

eslint-config-vcs

A base eslint config to be used for all virtualcity packages.

1. npm i -D eslint @vcsuite/eslint-config
2. Add the following script sections to your package.json, e.g.

    "lint:js": "eslint . --ext .vue,.js,.cjs,.mjs,.ts,.cts,.mts",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:prettier",
    "format": "prettier --write --list-different . && npm run lint:js -- --fix",

3. Extend the vcs configuration for your environment

   import { configs } from '@vcsuite/eslint-config';
   
   export default configs.node;

   Where you can extend or export node, nodeTs, vue or `vueTS

4. use PRETTIER. Add "prettier": "@vcsuite/eslint-config/prettier.js" to package.json

5. add .prettierignore as needed

6. Change IDE Settings to run prettier on save

7. Run npm run lint in CI/CD

Migration to eslint 9

1. We use flat configs now. No more extends: ['@vcsuite/eslint-config'].

2. You have to create an eslint.config.js file, no more package.json configs. You can copy The file provided by the plugin-cli as a reference.

3. No need to override anything in tests with a custom .eslintrc.js file, our config automatically applies mocha to tests.

4. No need to define projects tsconfig.json, this is done automatically, as long as you call lint from the root of your project.

5. .eslintignore is no longer supported, to ignore files, use the new flat config ignore pattern:

   import { configs } from '@vcsuite/eslint-config';
   
   export default [
     ...configs.node,
     {
       ignores: ['node_modules/', 'dist/', 'coverage/', 'build/', 'public/'],
     },
   ];

Troubleshooting

• My imports now have a type import which is wrong: There is an issue with the autofix and multi-line imports which already have an import type within them. Remove type from the entire statement and use webstorms autofix to add it back in.
• ESlint is really slow: This is most likely do to import/no-cycle. You can check by running with the TIMING env set to 1: TIMING=1 npx eslint .. Should it be the no-cycle making it slow, try to disable the rule completely and use madge for cyclic dependency checks.

Naming Convention

We use a fairly strict naming convention for TS, which alligns with a lot of public code and examples. But, sometimes you are forced to move outside of our naming conventions, for instance if you rely on an external API which doesnt adhere to our naming convention. In this case, you can add a specialized rule to your eslint.config.js for your project or for specific files. You can find the full documentation of the rule here

The following illustrates how we override the legacy oblique naming convention in the core to allow for kebab case properties (since kebab case is not supported by the rule, we unset it for any property matching kebab):

import { configs, createNamingConventionOptions } from '@vcsuite/eslint-config';

export default [
  ...configs.nodeTS,
  {
    files: ['**/src/oblique/**'], // legacy oblique uses kebab-case URG
    rules: {
      '@typescript-eslint/naming-convention': [
        'error',
        ...createNamingConventionOptions(),
        {
          selector: 'property',
          format: null,
          filter: {
            regex: '^(\\w+-)*\\w+$',
            match: true,
          },
        },
      ],
    },
  },
];

Why is prettier config still needed?

Some packages do not properly adhere to the "no fromatting rules" of eslint9 (vue/recommended). Prettier config suppresses this properly.