# How to Configure and Use ESLint for Linting the Vue.js Quiz App in Microsoft AI-For-Beginners

> Learn to configure and use ESLint for Vue.js quiz app linting in Microsoft AI-For-Beginners. Run npm install and npm run lint or lint fix to ensure clean code.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: how-to-guide
- Published: 2026-08-25

---

**Configure and use ESLint for the Vue.js quiz app by running `npm install` in `etc/quiz-app/` followed by `npm run lint` to check code or `npm run lint:fix` to auto-fix issues, with all rules defined in the `eslintConfig` section of [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json).**

The Microsoft AI-For-Beginners repository includes a **Vue.js quiz application** located at `etc/quiz-app/` that ships with a complete ESLint setup. This guide walks you through installing dependencies, running the linter, customizing rules, and integrating ESLint into your development workflow.

## Install Dependencies and Set Up ESLint

Before linting, install the project's development dependencies including Vue CLI, ESLint, and required plugins.

Navigate to the quiz app directory and run npm install:

```bash
cd etc/quiz-app
npm install

```

This command pulls in all packages listed in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json), establishing the linting infrastructure for the Vue.js application.

## Run ESLint with the Built-In npm Scripts

The [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) file defines two npm scripts for linting operations:

- **`npm run lint`** — Executes ESLint in **check-only** mode. Reports errors and exits with a non-zero code if any rule is violated.
- **`npm run lint:fix`** — Runs ESLint with the `--fix` flag, automatically correcting fixable problems like stray spaces, missing semicolons, and inconsistent quoting.

Run either command from the `etc/quiz-app` directory:

```bash

# Check only — fails on lint errors

npm run lint

# Auto-fix what can be fixed

npm run lint:fix

```

## Understand the ESLint Configuration in package.json

The ESLint configuration resides in **[`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json)** under the `eslintConfig` key. This setup extends Vue.js recommended rules and adds project-specific preferences:

```json
{
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-console": "off",
      "no-debugger": "off",
      "vue/max-attributes-per-line": ["error", { "singleline": 3 }]
    }
  }
}

```

Key configuration elements:

- **`plugin:vue/essential`** — Enables Vue-specific linting for template syntax, component naming, and Vue patterns.
- **`eslint:recommended`** — Activates core JavaScript linting rules from ESLint.
- **`parser: "babel-eslint"``** — Uses Babel parser for modern JavaScript features, configured via [`etc/quiz-app/babel.config.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/babel.config.js).
- **Custom rules** — Overrides like `"no-console": "off"` allow `console` statements during development.

Modify this block directly in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) to adjust linting behavior, then re-run the lint scripts.

## Integrate ESLint Into Your Development Workflow

### Pre-Commit Hooks

Add a Git hook that runs `npm run lint` before each commit to prevent style regressions from entering the codebase:

```bash

# Add to .git/hooks/pre-commit

cd etc/quiz-app && npm run lint

```

### IDE Integration

Most editors automatically detect the ESLint configuration when opening the workspace:

- **VS Code**: Enable the ESLint extension for inline warnings while editing Vue files in `etc/quiz-app/src/**/*.vue`.
- **WebStorm**: Built-in ESLint support reads the `eslintConfig` from [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) without additional setup.

## Common Linting Issues and Fixes

| Issue | Resolution |
|-------|------------|
| **Unused variables** | Remove the variable or prefix with `_` if intentionally kept. |
| **Missing semicolons** | Run `npm run lint:fix` for automatic correction. |
| **Too many attributes per line** | Split long component tags across lines or adjust `vue/max-attributes-per-line` in rules. |
| **Trailing spaces** | `lint:fix` removes these automatically. |

## Customize ESLint Rules for Your Needs

To add a custom rule, edit the `eslintConfig.rules` section in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json). For example, to enforce double quotes:

```json
{
  "eslintConfig": {
    "rules": {
      "quotes": ["error", "double"]
    }
  }
}

```

Save the file and run `npm run lint` to see the new rule applied to your Vue components.

## Key Files for ESLint Configuration

| File | Purpose |
|------|---------|
| [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) | Contains `eslintConfig` and npm scripts (`lint`, `lint:fix`). |
| [`etc/quiz-app/README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) | Documents lint commands and project setup. |
| `etc/quiz-app/src/**/*.vue` | Vue component files checked by ESLint. |
| [`etc/quiz-app/babel.config.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/babel.config.js) | Provides Babel parser configuration for `babel-eslint`. |

## Summary

- **Navigate** to `etc/quiz-app/` and run `npm install` to set up ESLint dependencies.
- **Check code** with `npm run lint` or **auto-fix** with `npm run lint:fix`.
- **Configure rules** in the `eslintConfig` section of [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json).
- **Integrate** linting via pre-commit hooks or IDE extensions for continuous code quality.

## Frequently Asked Questions

### Where is the ESLint configuration stored in the Vue.js quiz app?

The ESLint configuration is stored in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) under the `eslintConfig` key, as implemented in microsoft/AI-For-Beginners. This inline configuration extends `plugin:vue/essential` and `eslint:recommended`, and includes custom rules for the project.

### How do I automatically fix ESLint errors in the quiz app?

Run `npm run lint:fix` from the `etc/quiz-app` directory. This executes ESLint with the `--fix` flag, automatically resolving fixable issues like spacing, semicolons, and quote consistency without manual intervention.

### Can I modify ESLint rules for the Vue.js quiz app?

Yes—edit the `eslintConfig.rules` object in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) directly. Add, remove, or change rule values, then re-run `npm run lint` to apply your changes. Common customizations include adjusting `vue/max-attributes-per-line` or enforcing specific quote styles.

### Why does the quiz app use babel-eslint as its parser?

The `babel-eslint` parser in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) enables ESLint to understand modern JavaScript and Vue-specific syntax that standard ESLint parsers may not support. The parser configuration references [`etc/quiz-app/babel.config.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/babel.config.js) for Babel settings.