ESLint 插件之 Vue 插件

ESLint 是一个用于静态代码分析的工具，它可以帮助开发者在编码过程中自动检测潜在错误，并提供相关的修复建议。对于前端开发者而言，一个好的代码规范工具可以使团队协作更高效，同时也可以提升自己的开发水平。ESLint 的 Vue 插件就是为 Vue 开发量身定做的代码规范插件。

安装

首先，需要全局安装 ESLint：

npm i -g eslint

接着，安装 Vue 插件：

npm i eslint-plugin-vue

配置

在项目的根目录下，新建 .eslintrc.js 文件，并添加以下内容：

// www.javascriptcn.com code example
module.exports = {
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended'
  ],
  plugins: ['vue'],
  rules: {
    // 在此添加需要的规则配置
  }
}

其中，extends 数组指定了使用的规则集，plugin:vue/recommended 表示使用 Vue 推荐的规则集，eslint:recommended 表示使用 ESLint 推荐的规则集。plugins 数组指定了使用的插件名称，这里我们需要指定 vue。最后的 rules 对象用于配置具体的规则。

规则

Vue 插件提供了多种规则，这里介绍几个常用的规则：

vue/component-name-in-template-casing

这个规则用于检查组件中标签的命名规范。Vue 组件名称采用 PascalCase 命名法，但在模板中使用时需要使用 kebab-case 命名法。例如：

// www.javascriptcn.com code example
<template>
  <my-component></my-component> <!-- 错误 -->
  <my-component></my-component> <!-- 正确 -->
</template>

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

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

可以通过以下配置启用该规则：

module.exports = {
  rules: {
    'vue/component-name-in-template-casing': ['error', 'kebab-case']
  }
}

vue/html-self-closing

这个规则用于检查自闭合标签的写法。Vue 推荐使用自闭合标签，而非闭合标签。例如：

<template>
  <img src="http://example.com" alt="Example" /> <!-- 正确 -->
  <img src="http://example.com" alt="Example"> <!-- 错误 -->
</template>

可以通过以下配置启用该规则：

// www.javascriptcn.com code example
module.exports = {
  rules: {
    'vue/html-self-closing': ['error', {
      'html': {
        'void': 'always',
        'normal': 'never',
        'component': 'always'
      }
    }]
  }
}

vue/no-unused-components

这个规则用于检查未使用的组件。Vue 组件需要在 components 属性中注册后才能使用，如果未注册或者未使用，这个规则会提示错误。例如：

// www.javascriptcn.com code example
<template>
  <my-component />
</template>

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

export default {
  // components: { MyComponent } // 注释掉该行会提示错误
}
</script>

可以通过以下配置启用该规则：

module.exports = {
  rules: {
    'vue/no-unused-components': 'error'
  }
}

结语

ESLint 插件之 Vue 插件提供了多种规则，可以在 Vue 开发中帮助我们遵循优秀的编码习惯，规范团队代码风格。在熟练掌握了以上规则后，可以灵活地运用和配置，让代码更加优雅和健壮。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d5ffaea941bf7134b94d43