eslint-plugin-vue|极客教程

eslint-plugin-vue

在Vue开发中，代码规范是非常重要的，可以帮助我们写出更加易读、易维护的代码。ESLint 是一个用于识别和报告代码中的模式的工具，而 eslint-plugin-vue 则是专门为 Vue 项目制定的ESLint插件，可以帮助我们检测Vue代码中的错误和潜在问题。

本文将详细介绍 eslint-plugin-vue 的用法，包括安装、配置和常见规则示例。

安装

首先我们需要确保已经安装了 ESLint 和 Vue 的相关依赖。然后使用 npm 或者 yarn 安装 eslint-plugin-vue：

npm install eslint eslint-plugin-vue --save-dev
# 或者
yarn add eslint eslint-plugin-vue --dev

配置

在项目根目录下新建一个 .eslintrc 文件，并添加如下内容：

{
  "plugins": ["vue"],
  "extends": [
    "plugin:vue/recommended"
  ]
}

这里通过 extends: ["plugin:vue/recommended"] 来使用 eslint-plugin-vue 推荐的规则。

常见规则示例

vue/no-unused-components

这个规则用来检测未使用的组件，在 Vue 组件中，如果我们注册了组件但却未在模板中使用，很可能是一个错误。

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

在上面的示例中，我们注册了 HelloWorld 组件但却未在模板中使用，这时 eslint-plugin-vue 就会提示错误。

vue/require-default-prop

这个规则要求给组件的 prop 指定默认值。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在上面的示例中，我们给 message prop 指定了类型为 String，但是没有设置默认值，这时 eslint-plugin-vue 就会提醒我们添加默认值。

vue/order-in-components

这个规则规定了组件选项的顺序，如 name、props、data、computed、methods 等应该按照一定的顺序编写。

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  props: {
    message: String
  },
  name: 'MyComponent'
}
</script>

在上面的示例中，将 props 放在了 data 和 methods 之后，不符合规范，eslint-plugin-vue 将会提示错误。