命令行CLI一键生成各种烦人的lint配置实例

 更新时间:2023年02月24日 08:59:01   作者:李瑞丰_liruifengv  
这篇文章主要为大家介绍了命令行CLI一键生成各种烦人的lint配置实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

写一个前端工程,要配置特别多的配置文件,大量的配置文件让我们很烦心,占用了大量写代码的时间。

就像上图,看着就头大。

每次要启动一个新的项目,都要从头配一遍。有人可能把这些文件当做模板保存下来,有需要的时候再复制粘贴。可是各个项目还是不尽相同,还是需要手动改动。

于是我决定写一个命令行工具来解决这件事。

create-lint-config

这个工具叫做 create-lint-config,一个一键创建所有的 lint 配置的 CLI 命令行工具。前端工程中特别多的配置文件例如 Eslint、Prettier 等让我们心烦意乱。我们的目标是快速而轻松地生成这些配置!

github 地址

npm 地址

使用

在你的项目根目录执行以下命令:

# npm
npm create lint-config@latest
# yarn
yarn create lint-config
# pnpm
pnpm create lint-config@latest

执行结果如下:

这个命令,一次执行,创建了 Eslint、StyleLint、prettier、commitlint、husy、lint-staged 等所有配置文件。

现有功能

  • 生成 Eslint 配置。
  • 生成 prettier 配置。
  • 生成 stylelint 配置。
  • 生成 husky 配置。
  • 生成 commitlint 配置。
  • 自动安装依赖。
  • 期待更多。

源码解读

#!/usr/bin/env node
async function install({ pkgManager, cwd, _arguments }: { pkgManager: string; cwd: string; arguments: array }) {}
async function init() {
  // 拷贝配置文件基础模板,包括 Eslint、StyleLint、prettier、commitlint、husy、lint-staged
  await spinner({
    start: `Base template copying...`,
    end: 'Template copied',
    while: () => {
      try {
        copy('base')
      } catch (e) {
        error('error', e)
        process.exit(1)
      }
    },
  })
  // 安装 husky
  await spinner({
    start: `Husky installing...`,
    end: 'Husky installed',
    while: () =>
      install({
        cwd: process.cwd(),
        pkgManager: 'npx',
        _arguments: ['husky', 'install'],
      }).catch((e) => {
        error('error', e)
        process.exit(1)
      }),
  })
  // husky 写入 commit-msg 校验指令,使用 commitlint
  await spinner({
    start: `Adding commit-msg lint...`,
    end: 'Commit-msg lint added',
    while: () =>
      install({
        cwd: process.cwd(),
        pkgManager: 'npx',
        _arguments: ['husky', 'add', '.husky/commit-msg', 'npx --no-install commitlint --edit ""'],
      }).catch((e) => {
        error('error', e)
        process.exit(1)
      }),
  })
  // husky 写入 pre-commit校验指令,使用 lint-staged 执行 elint 等
  await spinner({
    start: `Adding lint-staged...`,
    end: 'Lint-staged added',
    while: () =>
      install({
        cwd: process.cwd(),
        pkgManager: 'npx',
        _arguments: ['husky', 'add', '.husky/pre-commit', 'npx lint-staged'],
      }).catch((e) => {
        error('error', e)
        process.exit(1)
      }),
  })
  // 安装依赖
  await spinner({
    start: `Dependencies installing with npm...`,
    end: 'Dependencies installed',
    while: () =>
      install({
        cwd: process.cwd(),
        pkgManager: 'npm',
        _arguments: ['install'],
      }).catch((e) => {
        error('error', e)
        process.exit(1)
      }),
  })
}
init().catch((e) => {
  console.error(e)
})

更多源码请移步 GitHub 查看

TODO

  • 支持通过--template标志来选择模板,创建更多的配置文件模板,包括 ts、vue、react、node 等等
  • 支持更灵活的交互式选项。现在只能一键生成默认的模板,有些配置可能是一些人不需要的,后续计划可以更灵活。

总结

这个包还在起步阶段,我希望有需求的同学可以来参与贡献。

  • 你可以贡献 feature
  • 提交你自己正在使用的模板,以后用这个工具一键生成
  • 你也可以 fork 或 clone 此项目,变成你自己的命令行工具
  • 你也可以发布到你们公司的私有 npm,今年的 KPI 不就有了么

github 地址

npm 地址

以上就是命令行CLI一键生成各种烦人的lint配置实例的详细内容,更多关于命令行CLI一键生成lint配置的资料请关注脚本之家其它相关文章!

相关文章

  • 解决VantUI popup 弹窗不弹出或无蒙层的问题

    解决VantUI popup 弹窗不弹出或无蒙层的问题

    这篇文章主要介绍了解决VantUI popup 弹窗不弹出或无蒙层的问题。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue3 vite配置css 的sourceMap及文件引用配置别名的过程

    Vue3 vite配置css 的sourceMap及文件引用配置别名的过程

    这篇文章主要介绍了Vue3 vite配置css的sourceMap,及文件引用配置别名的过程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue Echarts实现带滚动效果的柱形图

    Vue Echarts实现带滚动效果的柱形图

    这篇文章主要为大家详细介绍了Vue Echarts实现带滚动效果的柱形图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue 计算属性之姓名案例的三种实现方法

    Vue 计算属性之姓名案例的三种实现方法

    这篇文章主要介绍了Vue 计算属性之姓名案例的三种实现方法,计算属性实现、methods实现和插值语法实现,下面文章具体介绍,需要的小伙伴可以参考一下
    2022-05-05
  • Vue3进阶主题Composition API使用详解

    Vue3进阶主题Composition API使用详解

    这篇文章主要为大家介绍了Vue3进阶主题Composition API使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue2 如何实现div contenteditable=“true”(类似于v-model)的效果

    vue2 如何实现div contenteditable=“true”(类似于v-model)的效果

    这篇文章主要给大家介绍了利用vue2如何实现div contenteditable="true",就是类似于v-model的效果,文中给出了两种解决的思路,对大家具有一定的参考价值,有需要的朋友们下面来一起看看吧。
    2017-02-02
  • Vue-router优化import引入过多导致index文件臃肿问题

    Vue-router优化import引入过多导致index文件臃肿问题

    这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue.js集成Word实现在线编辑功能

    Vue.js集成Word实现在线编辑功能

    在现代Web应用中,集成文档编辑功能变得越来越常见,特别是在协作环境中,能够直接在Web应用内编辑Word文档可以极大地提高工作效率,本文将详细介绍如何在Vue.js项目中集成Word在线编辑功能,需要的朋友可以参考下
    2024-08-08
  • vue路由 遍历生成复数router-link的例子

    vue路由 遍历生成复数router-link的例子

    今天小编就为大家分享一篇vue路由 遍历生成复数router-link的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue.js Ajax动态参数与列表显示实现方法

    Vue.js Ajax动态参数与列表显示实现方法

    Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。下面通过本文给大家介绍vue.js ajax动态参数与列表显示实现方法,感兴趣的朋友一起看看吧
    2016-10-10

最新评论