Linting with ESLint in Vue

Outline how to integrate ESLint into a Vue.js 3 project for code quality checks, including setting up a custom linting configuration and fixing linting errors.

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    // Add more custom rules here
  }
};

This code defines the ESLint configuration for a Vue.js 3 project. It extends the recommended ESLint and Vue plugin rules, sets the parser to 'babel-eslint', and adds environment-specific rules for 'no-console' and 'no-debugger'. Additional rules can be added as desired.

npm install eslint --save-dev

Installs ESLint as a development dependency in the project.

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

Installs the official ESLint plugin for Vue.js, enabling linting of Vue template syntax.

npx eslint --init

Initializes ESLint in the project by creating an ESLint configuration file. This command guides you through setting up a configuration that fits your project.

npx eslint src/

Runs ESLint on the 'src' directory of the project, which is the typical location for Vue.js source files.

npx eslint --fix src/

Executes ESLint with the --fix option to automatically fix as many linting issues as possible in the 'src' directory.

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src"
  }
}

Adds a script entry to the project's package.json file, allowing linting to be run with the command 'npm run lint'. This script includes checking both JavaScript and Vue files.