@vue/cli-plugin-eslint

What is @vue/cli-plugin-eslint?

@vue/cli-plugin-eslint is a Vue CLI plugin that adds ESLint support to your Vue.js projects. It helps in maintaining code quality and consistency by integrating ESLint, a popular linting tool for JavaScript, into the Vue development workflow.

What are @vue/cli-plugin-eslint's main functionalities?

Linting on Save

This feature enables linting of your code every time you save a file. It helps catch errors and enforce coding standards in real-time.

module.exports = {
  lintOnSave: true
};

Custom ESLint Configuration

This feature allows you to customize the ESLint configuration to fit your project's specific needs. You can add custom rules, plugins, and settings.

module.exports = {
  lintOnSave: true,
  configureWebpack: {
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        }
      ]
    }
  }
};

Linting Scripts

This feature adds a linting script to your package.json file, enabling you to run ESLint checks via the command line. This is useful for integrating linting into your CI/CD pipeline.

{
  "scripts": {
    "lint": "vue-cli-service lint"
  }
}

Other packages similar to @vue/cli-plugin-eslint

eslint

ESLint is a widely-used linting tool for JavaScript. It can be used independently of Vue CLI and offers extensive customization options. While @vue/cli-plugin-eslint integrates ESLint into Vue projects seamlessly, ESLint itself can be used in any JavaScript project.

eslint-plugin-vue

eslint-plugin-vue is a plugin for ESLint that provides linting rules specific to Vue.js. It can be used alongside ESLint to enforce Vue-specific coding standards. While @vue/cli-plugin-eslint includes this plugin by default, eslint-plugin-vue can be added to any ESLint configuration.

vue-eslint-parser

vue-eslint-parser is a parser for ESLint that allows it to lint Vue.js template files. It works with eslint-plugin-vue to provide comprehensive linting for Vue components. This parser is included in @vue/cli-plugin-eslint but can also be used independently.

README

@vue/cli-plugin-eslint

eslint plugin for vue-cli

Injected Commands

• vue-cli-service lint

  Lints and fixes files in src and test.

Configuration

ESLint can be configured via .eslintrc or the eslintConfig field in package.json.

Lint-on-save during development with eslint-loader can be enabled with the lintOnSave option in vue.config.js:

module.exports = {
  lintOnSave: true
}

Installing in an Already Created Project

npm install -D @vue/cli-plugin-eslint
vue invoke eslint

Injected webpack-chain Rules

• config.rule('eslint')
• config.rule('eslint').use('eslint-loader')

Changelog

3.0.0-alpha.10 (2018-02-08)

cli-plugin-pwa

Bug Fixes

• fix pwa info link (close #801) (a0004ea)

cli-plugin-typescript

Bug Fixes

• vue-class-component and vue-property-decorators should be dependencies (c26559d)

Features

• support using ESLint to lint TypeScript (dd04add)

eslint-config-prettier

Features

• include eslint:recommended in prettier config (e261718)