# ESLint Rules and Vue 2 Conventions in the AI-For-Beginners Quiz App

> Discover ESLint rules and Vue 2 conventions in the AI-For-Beginners quiz app. Learn about configurations, Options API, Vue Router, and state management.

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

---

**The quiz-app in Microsoft's AI-For-Beginners repository uses ESLint with `plugin:vue/essential` and `eslint:recommended` configurations alongside `babel-eslint`, while implementing Vue 2's Options API with single-file components, Vue Router history mode, and local state management.**

The `quiz-app` located at `etc/quiz-app/` in the [microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners) repository demonstrates fundamental Vue 2 patterns for beginners. This educational codebase combines strict linting standards with classic Vue architectural patterns to create a maintainable single-page application for quiz functionality.

## ESLint Configuration and Rules

The project's linting setup is defined directly within [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) under the `eslintConfig` key, leveraging shared presets rather than custom rule overrides.

### Base Configurations and Extensions

The configuration extends two primary rule sets:

- **`plugin:vue/essential`** – Enforces core Vue-specific best practices including duplicate key prevention, component name requirements, and proper directive usage.
- **`eslint:recommended`** – Activates core JavaScript linting rules such as `no-unused-vars`, `no-undef`, and consistent spacing conventions.

### Parser Configuration

The project uses `babel-eslint` as its parser, enabling modern JavaScript syntax and JSX-like expressions within Vue single-file components. This parser bridges the gap between experimental syntax and ESLint's static analysis capabilities.

### Custom Rule Overrides

The `rules` object remains empty, indicating the project relies entirely on the default configurations provided by the extended presets without project-specific modifications.

## Vue 2 Architectural Conventions

The codebase strictly adheres to Vue 2's **Options API** patterns, avoiding the Composition API introduced in Vue 3.

### Options API Structure

Components follow the classic object-based declaration style. In [`etc/quiz-app/src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/App.vue), the root component exports a configuration object containing:

- The `name` property for component identification
- A `data()` function returning reactive state objects
- `computed` properties for derived values
- `watch` handlers for reactive side effects
- Lifecycle hooks like `created()` for initialization logic

### Single-File Component Organization

All UI components utilize the standard Vue SFC format with three distinct blocks:

- `<template>` for HTML structure
- `<script>` for JavaScript logic using ES6 module syntax
- `<style>` for scoped or global CSS

This pattern appears consistently across [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue), [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue), [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue), and [`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/NotFound.vue) in the `src/` directory.

### Routing and Navigation Configuration

The router configuration in [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js) implements Vue Router with HTML5 history mode:

```javascript
Vue.use(Router);
const router = new Router({
  mode: 'history',
  routes: [...]
});
export default router;

```

The routing table includes a dynamic segment pattern `/quiz/:id`, allowing the `Quiz` component to access parameters via `this.$route.params.id`. Navigation uses `<router-link>` components with standard `to` attributes for declarative routing.

### Internationalization and State Management

Rather than using Vuex for state management, the application employs **local component state** combined with `vue-i18n`. The [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) component initializes the i18n instance with imported JSON translation files and manages locale switching through watched data properties:

```javascript
watch: {
  locale(val) {
    this.$root.$i18n.locale = val;
  }
}

```

### Module Resolution and Aliases

The codebase utilizes the `@` alias configured by Vue CLI for clean import paths, as demonstrated in component imports like `import Quiz from "@/components/Quiz.vue";`.

## Summary

- The ESLint configuration in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) extends `plugin:vue/essential` and `eslint:recommended` with `babel-eslint` parsing and no custom rule overrides.
- Components use Vue 2's **Options API** with `data()`, `computed`, `watch`, and lifecycle hooks defined in plain object exports.
- **Single-file components** organize template, script, and style blocks within `.vue` files located in `src/components/` and `src/views/`.
- **Vue Router** runs in `history` mode with dynamic route parameters configured in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js).
- State management remains **local to components** without Vuex, while `vue-i18n` handles translations through JSON assets in `src/assets/translations/`.

## Frequently Asked Questions

### Why does the quiz-app use `babel-eslint` instead of the default parser?

The project uses `babel-eslint` to support modern JavaScript syntax features and JSX-like expressions within Vue single-file components. This parser allows ESLint to lint code containing experimental ECMAScript features that the standard parser might not recognize, ensuring compatibility with contemporary JavaScript patterns while maintaining the linting standards defined in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json).

### What Vue 2 specific patterns should beginners notice in this codebase?

Beginners should observe the **Options API** structure where components export plain objects containing `data()` functions, `computed` properties, and lifecycle hooks like `created()`. The absence of `setup()` functions or Composition API patterns confirms this is idiomatic Vue 2 code. Additionally, the use of `this.$route` and `this.$root` for accessing router and i18n instances represents classic Vue 2 dependency access patterns seen throughout the `src/` directory.

### How does the application handle routing without hash-based URLs?

The router configuration in [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js) explicitly sets `mode: 'history'`, which utilizes the HTML5 History API to enable clean URLs without hash fragments. This requires server-side configuration to handle deep linking but provides better SEO and user experience. Dynamic segments like `/quiz/:id` demonstrate how Vue Router passes parameters to components through `this.$route.params.id`.

### Why is there no Vuex store in this quiz application?

The quiz-app intentionally avoids Vuex because the state management needs are minimal and localized. By keeping state within component `data()` properties and using props and events for communication, the codebase remains simpler for educational purposes. This approach suits small applications where global state management would add unnecessary complexity, aligning with the repository's goal of teaching fundamental Vue concepts without architectural overhead.