npm 包 eslint-config-dreidev 使用教程

前言：在前端工程化的开发中，eslint 起到了重要的作用。但是，eslint 的规则配置是很繁琐的，我们需要一定的经验和技巧。如果你是一位前端工程师，想要加深你的 eslint 规则配置的经验，那么本文将会给你一些指导。本文将以 eslint-config-dreidev 为例，讲解这个 npm 包的使用教程。

什么是 eslint-config-dreidev

我们来先了解一下 eslint-config-dreidev。eslint-config-dreidev 是基于 eslint-plugin-import，提供代码风格和规范的一套配置规则。包含了常见的 js、react、vue 等脚手架，并有很多自定义的规则。因此，如果我们使用它的话，就不用自己去配置一些基础规则了。

如何使用 eslint-config-dreidev

我们将会以 Vue 项目为例子来讲解如何进行 eslint-config-dreidev 的使用。

安装 eslint-config-dreidev

我们在命令行输入以下命令进行安装：

npm i eslint-config-dreidev --save-dev

配置 eslint

在项目的根目录下，新建 .eslintrc.js 文件，然后进行如下的配置：

module.exports = {
  extends: ['dreidev/vue'],
  rules: {
    // 所有的自定义的规则
  }
}

这样，我们就配置好了 eslint 的基本配置。并使用 dreidev 的 Vue 规则。

使用示例

我们来看一个示例，定义一个变量，它的值固定是 10。

const test = 10;

我们使用 dreidev 的规则，它会报如下的错误：

   error  Variable 'test' must be assigned a value                no-undef
   error  Expected variable declaration containing a '--const' modifier  dreidev/vue

因为 eslint-config-dreidev 默认使用强类型的检查方式，我们定义的变量是用 const 来定义的，所以我们应该要求它被赋值了。修改代码：

const test = 10;
console.log(test);

重新运行，错误提示就消失了。

总结

本文主要介绍了 eslint-config-dreidev 的使用教程，包括它的定义和安装、以及在 Vue 项目中应该如何使用。希望这篇文章对你有所帮助。

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