Creating vite vue ts template: Configure Eslint for Jest

Enable linting for tests

1. Update .eslintrc.js
   

   @@ -16,4 +16,15 @@ module.exports = {
        'plugin:vue/vue3-recommended',
        'prettier',
      ],
   +  overrides: [
   +    {
   +      files: [
   +        '**/__tests__/*.{j,t}s?(x)',
   +        '**/tests/unit/**/*.spec.{j,t}s?(x)',
   +      ],
   +      env: {
   +        jest: true,
   +      },
   +    },
   +  ],
    }
   

2. git add -u

3. git commit -m 'enable jest tests linting'

4. Install eslint-plugin-jest
   

   $ npm install --save-dev eslint-plugin-jest
   

5. Update .eslintrc.js
   

   -  plugins: ['@typescript-eslint'],
   +  plugins: ['@typescript-eslint', 'jest'],
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:vue/vue3-recommended',
   +    'plugin:jest/recommended',
        'prettier',
      ],
      overrides: [
   

6. Add eslint-plugin-jest to .pre-commit-config.yaml
   

              - vue-eslint-parser@7.9.0
   +          - jest@27.0.6
   +          - eslint-plugin-jest@24.4.0
   

7. git add -u

8. git commit -m 'install eslint-plugin-jest'

Links

• https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments
• https://eslint.org/docs/user-guide/configuring/configuration-files#how-do-overrides-work
• https://github.com/jest-community/eslint-plugin-jest

Project

imomaliev / vue-ts

Vite + Vue + TypeScript template