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

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.

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:

cd etc/quiz-app
npm install

This command pulls in all packages listed in package.json, establishing the linting infrastructure for the Vue.js application.

Run ESLint with the Built-In npm Scripts

The 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:

# 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 under the eslintConfig key. This setup extends Vue.js recommended rules and adds project-specific preferences:

{
  "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 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:

# 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 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. For example, to enforce double quotes:

{
  "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	Contains eslintConfig and npm scripts (lint, lint:fix).
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	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.
• 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 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 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 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 for Babel settings.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}