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

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 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 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, 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, Home.vue, Quiz.vue, and NotFound.vue in the src/ directory.

Routing and Navigation Configuration

The router configuration in etc/quiz-app/src/router/index.js implements Vue Router with HTML5 history mode:

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 component initializes the i18n instance with imported JSON translation files and manages locale switching through watched data properties:

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 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.
• 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.

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 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.

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