Using the Airbnb JavaScript Style Guide with Vue.js: Complete Configuration Guide

Yes, you can apply the Airbnb JavaScript style guide to Vue.js projects by using the airbnb-base ESLint configuration combined with eslint-plugin-vue for single-file component support.

The airbnb/javascript repository provides industry-standard JavaScript conventions that extend beyond React applications. The airbnb-base package contains only generic JavaScript rules without React-specific plugins, making it ideal for Vue.js codebases. When paired with Vue's official ESLint plugin, this setup enforces Airbnb's rigorous standards across both your plain JavaScript files and Vue single-file components.

Why Airbnb Base Works for Vue.js Projects

The airbnb-base configuration is framework-agnostic by design. Unlike the full eslint-config-airbnb package—which the root package.json defines as a meta-package bundling React and JSX rules—airbnb-base focuses solely on universal JavaScript best practices.

In packages/eslint-config-airbnb-base/rules/imports.js, the style guide already recognizes Vue CLI tooling. The import/no-extraneous-dependencies rule explicitly treats vue.config.js as a development-only file, preventing false positive warnings when you import build tools in your Vue configuration.

Setting Up ESLint for Vue.js with Airbnb Rules

Installation

According to packages/eslint-config-airbnb-base/README.md, you must install the configuration alongside its peer dependencies. Run the following commands to set up the complete linting environment:

# Install Airbnb base config and peer dependencies

npx install-peerdeps --dev eslint-config-airbnb-base

# Add Vue-specific ESLint support

npm install --save-dev eslint-plugin-vue vue-eslint-parser

Configuration

Create an .eslintrc.json file in your project root that extends both the Airbnb base rules and Vue's recommended configuration:

{
  "extends": [
    "airbnb-base",
    "plugin:vue/recommended"
  ],
  "plugins": [
    "vue"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true
  }
}

The vue-eslint-parser enables ESLint to parse Vue single-file components (*.vue), while the inner parser: "babel-eslint" handles modern JavaScript syntax within your script blocks.

How the Integration Works

When you execute npm run lint, the Airbnb base rules enforce general JavaScript conventions—such as no-unused-vars and consistent spacing—across both regular .js files and the <script> sections of Vue components. Meanwhile, eslint-plugin-vue adds template-aware checks for Vue-specific syntax and component structure. This layered approach ensures your entire codebase follows consistent standards without conflicts between generic JavaScript rules and Vue's unique patterns.

Example Vue Component Following Airbnb Standards

The following MyComponent.vue demonstrates code that passes both Airbnb's JavaScript rules and Vue's template validation:

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count += 1;
    },
  },
};
</script>

<style scoped>
button {
  cursor: pointer;
}
</style>

Running npm run lint applies Airbnb's JavaScript conventions to the script block while Vue-specific rules validate the template structure and component definition style.

Summary

• airbnb-base provides framework-agnostic JavaScript rules suitable for Vue projects, excluding React-specific plugins found in the full Airbnb config.
• The import/no-extraneous-dependencies rule in packages/eslint-config-airbnb-base/rules/imports.js automatically ignores vue.config.js as a development file.
• Combine airbnb-base with eslint-plugin-vue and vue-eslint-parser to lint both JavaScript logic and Vue templates.
• Use plugin:vue/recommended alongside Airbnb rules to ensure comprehensive coverage of Vue single-file components.

Frequently Asked Questions

Can I use the full Airbnb config instead of airbnb-base with Vue.js?

You should use airbnb-base rather than the full eslint-config-airbnb package. The root package.json in the airbnb/javascript repository defines the full package as a meta-bundle that includes React-specific plugins and JSX rules. These React rules are irrelevant to Vue applications and may cause linting conflicts with Vue's template syntax.

Does Airbnb's style guide conflict with Vue's recommended rules?

No, the configurations complement each other. Airbnb's rules govern JavaScript syntax and code quality patterns, while Vue's rules handle component structure and template semantics. When extending both airbnb-base and plugin:vue/recommended, ESLint merges these rule sets without overlap, though you may need to disable specific Airbnb rules in your .eslintrc.json if they contradict Vue conventions.

How do I handle TypeScript in Vue single-file components with Airbnb rules?

For TypeScript Vue projects, replace babel-eslint with @typescript-eslint/parser in your parserOptions.parser setting while keeping vue-eslint-parser as the top-level parser. Install @typescript-eslint/eslint-plugin and extend its recommended rules alongside airbnb-base to maintain type-aware linting within your .vue files.

Will ESLint check the template section of .vue files?

Yes, when using vue-eslint-parser and eslint-plugin-vue, ESLint analyzes the <template> section for Vue-specific issues like invalid directive syntax or accessibility concerns. However, Airbnb's JavaScript rules apply only to the <script> sections, as the base configuration defined in packages/eslint-config-airbnb-base does not include HTML or template-specific logic.

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