因为我经常配置重复的 eslint，我被孤立了🤣🤣🤣

站长

2023年06月21日 16:51 · 阅读数 40

事情是这样的,我每创建一个项目都要配置一遍 eslint 配置,而且还要去安装那些一大堆的依赖包,看见我每天都在做重复的事情,于是把我踢出群了。除了我之前,还有一个经常重复配置 babel 的,也被踢出群了。(妈的我编不下去了)

实际上是这样的,因为最近在开发一个脚手架,并且有很多个模板,分别有 react、vue 的,它们两个就有好几个 eslint 基本相同的配置,难道我要每一个模板配置一遍吗。于是我就将这些常用配置封装成了一个包,直接在使用的项目的 eslint 文件中 extends 继承一下就可以了。

项目初始化

到这里我们先新建一个文件,然后使用 npm init 创建一个文件,如下代码所示:

{
  "name": "eslint-config-liang-zai",
  "version": "777.777.777",
  "description": "超级无敌的eslint配置,学会即实业,你值得拥有",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "moment",
  "license": "MIT"
}

在上面的代码中,最重要的还是 name 字段和 version 字段,name 字段为你的 npm 包的名称。

通常情况下，用于 esLint 的配置包的命名是以 eslint-config- 开头的。这是一种常见的命名约定,用于指示该包是用于 eslint 配置的。

version 字段那里这样设计这么大的设计,这样就会显得逼格很高,一般人我不会告诉他,但是我这次说了之后你们别说是我教的,我怕被打。

在初始化完成之后,你可以创建一个 README.md 文件用来介绍你的依赖包是怎么用的或者有什么规则,你写的内容会显示在 npm 官网上,如下图所示: 因为我经常配置重复的 eslint，我被孤立了🤣🤣🤣

在初始化完成之后,我们开始写代码了。

编写 eslint

首先我们应该安装 eslint 作为依赖项:

npm install eslint

并创建一个 index.js 文件作为 eslint 的配置文件,并在其中配置你的规则和选项,关于用什么配置这里我就不讲了,来一个简单的吧,待会测试一下是否成功:

module.exports = {
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
      experimentalObjectRestSpread: true,
    },
  },
  env: {
    browser: true,
    node: true,
  },
  rules: {
    "no-var": "error",
  },
};

因为这里不详细讲 eslint 的配置,这里就写这么一点的配置,如果你更懂 eslint 的配置,那么欢迎你来给我的脚手架里贡献代码,目前这个脚手架提供的功能已经很多了, 有 react 和 vue 的 web 应用开发已经 react 组件库和普通库的开发,一行命令即可创建项目,零配置开箱即用: 因为我经常配置重复的 eslint，我被孤立了🤣🤣🤣