【从零到一手撕脚手架 | 第三节】项目集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged

这篇具有很好参考价值的文章主要介绍了【从零到一手撕脚手架 | 第三节】项目集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【从零到一手撕脚手架 | 第三节】项目集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged

Hello大家好我是⛄,前两节教大家如何初始化一个脚手架项目以及如何封装Vue技术栈常用的工具库。本小节教大家如何向我们的脚手架中配置ESLint、Prettier、StyleLint、LintStage。帮助大家规范项目代码,能够更好的进行团队协作开发。

项目地址:

  • GitHub:LonelySnowman/sv3-template
  • 官方文档:SV3-Family | Vue3
  • 前置知识:Vue全家桶,了解Vite或WebPack等构建工具,Node.js
  • 您将收获到:从零到一构建一个规范的 Vue3+TS+Vite 脚手架

配置 ESLint

  • ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。它拥有以下功能:

    • 查出 JavaScript 代码语法问题。
    • 根据配置的规则,标记不符合规范的代码。
    • 自动修复一些结构、风格问题。
  • 防止代码成为shi山😀,可以帮我们检查有没有死循环,有没有定义但未使用的变量等等。

  • ESLint官方文档:ESLint - Pluggable JavaScript linter - ESLint中文

安装依赖

pnpm install -D eslint @eslint/create-config
  • @eslint/create-config:eslint配置文件初始化工具

生成配置文件

#  生成 ESLint 配置文件模板
npx eslint --init
# 出现如下选择
​
# 选择2 我们会使用 prettier 进行代码风格校验
How would you like to use ESLint?
1.只检查语法
2.检查语法并提示问题
3.检查语法、提示问题并且强制使用一些代码风格
​
# 你的项目用的哪一种模块化方式 选择1
What type of modules does your project use?
1.ES6
2.CommonJS
3.None
​
# 使用的框架 选择2
Which framework does your project use?
1.React
2.Vue.js
3.None
​
# 项目是否使用TS yes
Does your project use TypeScript?
​
# 项目在哪里跑的 选择1
Where does your code run?
1.browser
2.node
​
# 项目用哪种配置文件 选择1
What format do you want your config file to be in?
1.JavaScript
2.YAML
3.JSON
 
# 是否立即安装需要的依赖
Would you like to install them now?
# 会帮我们安装如下插件
# pnpm install -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
  • 熟悉之后我们就可以不使用配置生成工具
  • 直接新建配置文件进行配置即可
  • ESLint配置文件名称可以为:.eslintrc.js.eslint.config.js (根据个人习惯选择即可)

这里是我常用的配置规则,更多配置规则请查阅ESLint中文。

单独的语法配置需要在rules中编写,全部配置请参考:List of available rules - ESLint中文

module.exports = {
   // 使 eslint 支持 node 与 ES6
   env: {
      browser: true,
      es2021: true,
      node: true,
   },
   // 引入推荐的语法校验规则
   extends: [
      'plugin:vue/vue3-recommended',
      'plugin:@typescript-eslint/recommended',
   ],
   overrides: [],
   /* 
   这里一定要配置对 先使用vue-eslint-parser 再使用@typescript-eslint/parser
   先解析 <template> 标签中的内容 然后再解析 vue <script> 标签中的 TS 代码
   */
   // 选择使用的解析器
   parser: 'vue-eslint-parser',
   // 解析器的详细配置
   parserOptions: {
      // 使用最新版 ES 语法
      ecmaVersion: 'latest',
      // 使用 ESLint TS 解析器
      parser: '@typescript-eslint/parser',
      // 使用 ES 模块化规范
      sourceType: 'module',
   },
   // 使用的插件
   plugins: ['vue', '@typescript-eslint'],
   // 自定义规则
   rules: {},
};
  • 配置完规则后我们配置一条指令用于代码质量的修复
// package.json
// --cache 为仅检测改动过的代码
// --max-warnings 0 表示出现超过0个警告强制eslint以错误状态推出
"scripts": {
    "lint:eslint": "eslint --cache --max-warnings 0 {src,mock}/**/*.{vue,ts,tsx} --fix",
},

我们还可以配置忽略文件,让 ESLint 不对这些文件进行校验。

新建 .eslintignore 进行配置。

node_modules
*.md
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

自动修复

  • 大部分IDE支持在修改代码后进行自动修复
  1. WebStorme:直接在Setting中搜索ESLint即可进行配置
  2. VSCode:需要在项目目录下加入如下配置文件,还需要下载ESLint插件

/.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

配置 Prettier

  • 多人协作的项目开发中,保持统一的代码风格是一件很重要的事。
  • Prettier就可以帮我们做到这个事情,但是ESLint不是也能规范代码风格么?可以是可以,但是相比Prettier差了很多,术业有专攻,Prettier可以让我们拥有超级整齐的代码。可以帮助我们配置是否使用分号,缩进的格式等等。
  • 官方文档:Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具

安装依赖

pnpm install -D prettier

添加配置文件

  • Prettier配置文件名称可以为:.ptettierrc.js.ptettier.config.js (根据个人习惯选择即可)
  • 下面是我常用的一些配置,更多配置规则大家可以前官网查看:Options · Prettier 中文网
module.exports = {
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
}
  • 配置一个指令便于我们使用prettier进行修复代码风格
{
    "script": {
        "lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}",
    }
}

解决ESLint与Prettier冲突问题

安装依赖
pnpm install -D eslint-config-prettier eslint-plugin-prettier
  • eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。
  • eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。 安装依赖并修改.eslintrc文件。
配置ESLint
// 此配置在eslint配置文件中新增 
"extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended" // 在最后面新增extends
  ],

配置完成之后我们对代码风格的配置只会使用prettier的配置,相当于将eslint中冲突的规则覆盖掉了。

我们还可以配置忽略文件,让 Prettier 不对这些文件进行校验。

新建 .prettierignore 进行配置。

/dist/*
/node_modules/**

配置 StyleLint

  • tylelint 是一个强大、先进的 CSS 代码检查器(linter),可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。
  • 你可能会想:WTF😓,怎么有有一个配置编码风格的,不是已经有Prettier了么。StyleLint,是专用于规范样式代码的工具,可以做到一些Prettier做不到的功能,有了它能让我们的样式代码(CSS/Less/Scss)更加美观,比如说对CSS样式代码进行顺序规定。
  • 但是 StyleLint 与 Prettier 也有配置冲突,所以我们也要将 StyleLint 中与 Prettier 冲突的配置关闭。

安装依赖

pnpm install -D stylelint stylelint-config-standard
​
pnpm install -D stylelint-config-prettier stylelint-config-html stylelint-order stylelint-scss postcss-html postcss-scss stylelint-config-standard-vue
  • stylelint-config-standard:StyleLint 推荐配置
  • stylelint-config-prettier:关闭与 prettier 冲突的配置
  • stylelint-config-standard-vue:StyleLint Vue 项目推荐配置
  • postcss-html postcss-scss:支持检查 scss 与 html
  • stylelint-order:支持 css 样式排序

添加配置文件

  • Prettier配置文件名称可以为:.stylelintrc.js.stylelint.config.js (根据个人习惯选择即可)
  • 更多详细配置规则请查看官方文档:List of rules | Stylelint 中文文档 (bootcss.com)
module.exports = {
   // 继承推荐规范配置
   extends: [
      'stylelint-config-standard',
      'stylelint-config-prettier',
      'stylelint-config-recommended-scss',
      'stylelint-config-standard-vue',
   ],
   // 添加规则插件
   plugins: ['stylelint-order'],
   // 不同格式的文件指定自定义语法
   overrides: [
      {
         files: ['**/*.(scss|css|vue|html)'],
         customSyntax: 'postcss-scss',
      },
      {
         files: ['**/*.(html|vue)'],
         customSyntax: 'postcss-html',
      },
   ],
   // 忽略检测文件
   ignoreFiles: [
      '**/*.js',
      '**/*.jsx',
      '**/*.tsx',
      '**/*.ts',
      '**/*.json',
      '**/*.md',
      '**/*.yaml',
   ],
   // 自定义配置规则
   rules: {
      // 便于配置变量 关闭未知属性检测
      'property-no-unknown': null,
      // 指定类选择器的模式
      'selector-class-pattern': null,
      // 允许 Vue 的 global
      'selector-pseudo-class-no-unknown': [
         true,
         {
            ignorePseudoClasses: ['global'],
         },
      ],
      // 允许 Vue 的 v-deep
      'selector-pseudo-element-no-unknown': [
         true,
         {
            ignorePseudoElements: ['v-deep'],
         },
      ],
      // 允许对应内核前缀
      'property-no-vendor-prefix': null,
      // 指定样式的排序 修复后会帮我们自动整理CSS样式的顺序
      'order/properties-order': [
         'position',
         'top',
         'right',
         'bottom',
         'left',
         'z-index',
         'display',
         'justify-content',
         'align-items',
         'float',
         'clear',
         'overflow',
         'overflow-x',
         'overflow-y',
         'padding',
         'padding-top',
         'padding-right',
         'padding-bottom',
         'padding-left',
         'margin',
         'margin-top',
         'margin-right',
         'margin-bottom',
         'margin-left',
         'width',
         'min-width',
         'max-width',
         'height',
         'min-height',
         'max-height',
         'font-size',
         'font-family',
         'text-align',
         'text-justify',
         'text-indent',
         'text-overflow',
         'text-decoration',
         'white-space',
         'color',
         'background',
         'background-position',
         'background-repeat',
         'background-size',
         'background-color',
         'background-clip',
         'border',
         'border-style',
         'border-width',
         'border-color',
         'border-top-style',
         'border-top-width',
         'border-top-color',
         'border-right-style',
         'border-right-width',
         'border-right-color',
         'border-bottom-style',
         'border-bottom-width',
         'border-bottom-color',
         'border-left-style',
         'border-left-width',
         'border-left-color',
         'border-radius',
         'opacity',
         'filter',
         'list-style',
         'outline',
         'visibility',
         'box-shadow',
         'text-shadow',
         'resize',
         'transition',
      ],
   },
};

我们还可以配置忽略文件,让 StyleLint 不对这些文件进行校验。

新建 .stylelintignore 进行配置。

/dist/*
/public/*
public/*
/mock/*
/node_modules/*
/plop-templates/*
/types/*

配置 Husky

  • 团队协作时,我们会遇到多种问题,最让人难受的就是每个人书写的代码风格不一致😅,使用的规范不一致,导致团队协作效率极低,代码可读性差。
  • 这时候就需要 Husky 来帮忙了,它可以帮助我们在代码提交前后进行一些自定义的操作,像是代码风格的校验,并且它支持所有的 Git 钩子(钩子是你可以放在钩子目录中触发的程序 在 Git 执行的某些点执行的操作)。

Git全部钩子的详细介绍:Git - githooks Documentation (git-scm.com)

本文用到的钩子

  • pre-commit 触发时进行代码格式验证,在 commit-msg 触发时对 commit 消息和提交用户进行验证。
git hook 执行时期 备注
pre-commit git commit 执行前 git commit --no verify 命令可以绕过该钩子
commit-msg git commit 执行前 git commit --no verify 命令可以绕过该钩子

安装依赖

pnpm install -D husky

然后配置一个初始化 Hysky 的命令

// package.json
{
    "script": {
        "prepare": "husky install"
    }
}

运行这个命令

# 运行后会初始化husky
pnpm run prepare

运行之后就会出现.husky文件夹,之后我们就可以配置在GItHook中执行的操作啦😀。

配置 LintStaged

  • 有些同学感觉使用IDE的保存自动修复相当麻烦,我每次改完之后都需要等他修复一下😡,太不方便啦!
  • 接下来就要请出我们的好帮手:lint-staged,它可以帮助我们在 git 缓存中进行代码质量与风格的修复,在代码提交前进行统一校验,通过后才可以提交。

安装依赖

pnpm install -D lint-staged

配置

在 package.json 配置一个指令方便我们使用

{
    "script":{
        "lint:lint-staged": "lint-staged",
    }
}

使用 husky 配置一个 pre-commit 钩子

# --no-install 代表强制使用本地模块
npx husky add .husky/pre-commit "npm run lint:lint-staged"

LintStaged 的配置文件方式也有多种:

  • package.json 中配置
  • lint-staged.jslint-staged.config.js
  • .lintstagedrc.json.lintstagedrc.yaml
  • 等等

这里我们直接在 package.json 中配置

// 我们直接配置在 package.json 中
/*
配置的含义:
<需要执行的文件>: <对应文件需要执行的命令数组>
*/
"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
     "eslint --fix",
     "prettier --write"
  ],
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
     "prettier --write--parser json"
  ],
  "package.json": [
     "prettier --write"
  ],
  "*.vue": [
     "eslint --fix",
     "prettier --write",
     "stylelint --fix"
  ],
  "*.{scss,less,styl,html}": [
     "stylelint --fix",
     "prettier --write"
  ],
  "*.md": [
     "prettier --write"
  ]
}

这样就配置完毕啦,当我们使用 git commit -m "xxx" 时,lint-staged 会自动执行帮我们进行代码质量与风格的修复。

配置 CommitLint

  • 每次看 Github 仓库的时候,总感觉有些不顺眼。原来是提交附带的信息乱糟糟的,都是"新增xx功能",“修复xxBUG”,非常的不工整,看着太不舒服啦🤯。
  • 不要慌,我们可以使用 CommitLint 对提交的信息进行规范。
  • 官方文档:commitlint - Lint commit messages

安装依赖

pnpm install -D @commitlint/cli  @commitlint/config-conventional
  • @commitlint/config-conventional:commitlint自定义配置规则插件

配置

规则配置
  • CommitLint配置文件名称可以为:.commitlintrc.js.commitlint.config.js (根据个人习惯选择即可)

配置文件内容如下

  • 官方文档的配置规则讲解:Rules (commitlint.js.org)

规则由名称和配置数组组成:

<配置名称>: [<警报级别>, <是否启用>, <规则对应的值>]

  • 警报级别

    • 0 无提示 disable
    • 1 警告 warning
    • 2 错误 error
  • 是否启用

    • always 启用
    • never 禁用
  • 规则对应的值:查看官方文档进行配置

// 这里是通俗的解释 详情请前往官方文档查阅
module.exports = {
   ignores: [(commit) => commit.includes('init')],
   extends: ['@commitlint/config-conventional'],
   rules: {
      // 信息以空格开头
      'body-leading-blank': [2, 'always'],
      'footer-leading-blank': [2, 'always'],
      // 信息最大长度
      'header-max-length': [2, 'always', 108],
      // 信息不能未空
      'subject-empty': [2, 'never'],
      // 信息类型不能未空
      'type-empty': [2, 'never'],
      // 提交信息的类型 下文有介绍
      'type-enum': [
         2,
         'always',
         [
            'feat',
            'fix',
            'perf',
            'style',
            'docs',
            'test',
            'refactor',
            'build',
            'ci',
            'chore',
            'revert',
            'wip',
            'workflow',
            'types',
            'release',
         ],
      ],
   },
};

提交信息的类型一般有如下规范(可根据团队习惯进行更改):

  • feat : 增加一个新特性
  • fix : 修复一个 bug
  • perf : 更改代码以提高性能
  • build : 更改构建系统和外部依赖项(如将 gulp 改为 webpack,更新某个 npm 包)
  • ci : 对 CI 配置文件和脚本的更改
  • docs : 仅仅修改文档说明
  • refactor : 代码重构时使用
  • style : 不影响代码含义的改动,例如去掉空格、改变缩进、增删分号
  • test : 增加新的测试功能或更改原有的测试模块

钩子配置

# 配置 commit-msg 钩子 运行 commitlint
# --no-install 代表强制使用本地模块
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

配置完成后我们就可以在git commit时进行信息的规范

我们需要按照以下格式进行提交:

# git commit -m "类型: 信息"
# 新增功能示例
git commit -m "feat: 新增用户登录功能"
# 修复Bug示例
git commit -m "fix: 修复首页用户头像不显示问题"

结语

终于配置完啦,用到的依赖实在是太多啦😭,配置的头都大了,希望日后能有一个库能集成它们的所有功能,这样就会方便的不止一点,待我日后成长起来,如果没人去搞⛏,我可以尝试一下(胡言乱语)。

参考学习项目

  • fast-vue3
  • vue-pure-admin

如果有任何不正确的地方请指正,我会及时更改。

更文不易,如果对你有帮助的话,请给我点个赞吧👍

关注我,后续文章不迷路⛄文章来源地址https://www.toymoban.com/news/detail-853096.html

到了这里,关于【从零到一手撕脚手架 | 第三节】项目集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue脚手架搭建项目

    一、 安装Node.js (一) 注意事项 1. 注意电脑系统版本以及位数,按照自己电脑的环境下载相应的Node.js安装包 2. 确定运行项目的Node.js版本和npm版本,避免后期因为版本不同而产生的一些差异问题 3. 在官网下载Node安装包时请下载稳定版(或不同版本的稳定版),正确区分稳定版

    2024年02月09日
    浏览(51)
  • VUE——使用VUE脚手架创建项目

    前言 vue脚手架工具,对vue项目构造做了封装,直接使用vue-cli创建项目,常用配置自动帮你完成,不用自己像使用webpack一样配置。 目录 1、安装 npm i vue 2、创建vue项目 3、运行项目 ps:项目化开发中,使用import导入vue,而不用script src标签引入 我们的第一步需要下载vue及vue脚手

    2024年02月02日
    浏览(58)
  • Vue开发项目入门——Vue脚手架

            Vue脚手架是Vue官方提供的标准化开发工具(开发平台), 它 提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程。         特别注意:Vue脚手架是用来方便开发的,但vue脚手架不是最终发布到生产环境的产品。很多人会误认为生产环境也要安装

    2023年04月08日
    浏览(43)
  • 和chatgpt学架构01-搭建项目脚手架

    今年3月份以来,chatgpt就热度不减。有了这种聊天机器人,就可以很方便的帮助我们提高。无论是我们独立创业还是做项目外包,拥有一套自己可以把握的脚手架还是必备的能力。 过去如果靠自己摸索,组装这么一套脚手架还是费事费力的。一个是涉及技术比较多,既要架构

    2024年02月16日
    浏览(53)
  • Vue3 脚手架搭建项目详细过程

    如果之前安装了2.0的脚手架,要先卸载掉,输入:npm uninstall vue-cli -g 进行全局卸载 然后重新安装:npm install @vue/cli -g 由于 git bash 来执行命令的时候无法使用键盘上下键来进行选项选择,所以我们要使用  cmd / powershell,这里使用 cmd 1.vue create + 项目名称  2.模板选择,通过键

    2024年02月06日
    浏览(75)
  • 5个开源的Java项目快速开发脚手架

    概览  : Guns pig RuoYi Jeecg-boot iBase4J 推荐指数  :⭐⭐⭐⭐⭐ 简介 采用主流框架  : 基于 Spring Boot2.0+版本开发,并且支持 Spring Cloud Alibaba 微服务。 功能齐全  :包含系统管理,代码生成,多数据库适配,SSO 单点登录,工作流,短信,邮件发送,OAuth2 登录,任务调度,持续

    2024年02月10日
    浏览(76)
  • Maven之自定义archetype生成项目骨架(构建脚手架项目)

    pom引入 2. 3. 4. 5. 6. 参考文档: maven-archetype自定义模板创建,并在本地和远程仓库生成模板项目_maven-archetype-plugin 版本-CSDN博客

    2024年01月21日
    浏览(51)
  • go脚手架,可快速构建一个go小型项目

    1、项目技术使用 gin+sqlx+redis ,后续会引入需要的技术 2、项目目的 当我们有一个新的 idea 需要马上付出实践,用于构建小型项目,直接上手写接口即可,主要为了大学生可以快速完成作业,不需要搭建环境,本项目暂时完成不了复杂的业务哦~ 3、项目介绍 脚手架架构分为

    2024年02月09日
    浏览(61)
  • 搭建SpringBoot多模块微服务项目脚手架(一)

    这篇文章介绍下搭建SpringBoot多模块项目脚手架,他最大的优点就是配套了开发微服务业务所有的附属产品,可以直接开发业务节省了搭建环境时间。 因为脚手架内容很多,因此将它设计为一个系列介绍,共分为三篇文章。 第一篇文章 搭建SpringBoot多模块微服务框架 第二篇文

    2024年02月09日
    浏览(45)
  • 创建一个vue2的脚手架项目(超详细)

    0.前言 在用npm安装vue脚手架之前需要安装node,前面博客有详细安装过程,请读者安装node之后再进行脚手架的安装 1 npm vue2的安装脚手架 2.创建vue2脚手架项目 3.开启服务器 4.在浏览器中输入端口地址 5.项目目录介绍

    2024年02月11日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包