vite初始化vue3项目(配置自动格式化工具与git提交规范工具)

初始化项目

vite构建vue项目还是比较简单的,简单配置选择一下就行了

  1. 初始化命令
npm init vue@latest

初始化最新版本vue项目
2. 基本选项含义
在这里插入图片描述

  1. Add TypeScript 是否添加TS
  2. ADD JSX是否支持JSX
  3. ADD Vue Router是否添加Vue Router路由管理工具
  4. ADD Pinia 是否添加pinia(状态管理工具)
  5. Add ESLinit 是否添加ESLint是否添加eslint工具
  6. Add Prettier 是否添加Prettier(代码格式化工具)

配置还是比较简单的,只用选择是否需要就行了,不管需要注意的是我们选择过后并不会给我们一个下载好依赖的框架,给我们的是配置文件,我们需要手动下载

配置格式化工具与代码提交规范工具

代码格式工具
  1. 安装(如果上边已经安装过了就不要安装了)
npm install --save-dev --save-exact prettier
  1. 创建配置文件
echo {}> .prettierrc.json

该文件配置的是格式化代码的一些规范,不过需要注意的是通过该命令行生成的.prettierrc.json可能会被错误的解析为utf-16格式,如果是就自己手动将代码格式转换为utf-8格式否则会导致格式化是乱码问题
3. 创建忽略格式化文件.prettierignore
该文件用于写忽略的文件,因为有些文件是不需要我们格式化的

build
coverage
  1. 检测是否配置成功
    执行**npx prettier --write .**命令,查看是否格式化代码,npx的作用是使用当前文件夹中的prettier命令而不是全局的
  2. 配置文件其他信息
    官网配置
    可以根据自己习惯调整代码格式
  3. 添加git钩子函数
    虽然配置好了prettier 工具但是我们还是得自己手动执行命令格式化,比较麻烦,所以我们可以借助git hook来在我们提交代码之前自动格式化代码
npx mrm@2 lint-staged

另外我们需要把package.json的配置修改一下

"lint-staged": {"*.js": "eslint --cache --fix"
}

修改为

"lint-staged": {"*.{js,css,md,vue}": "prettier --write"
}

代码提交规范配置

  1. 安装
npm i @commitlint/config-conventional @commitlint/cli -D

安装上述插件后我们也可以在命令行输入npx cz来提交代码,我们可以输入内容来让我们代码提交更加规范
2. 在根目录创建commitlint.config.js文件,配置commitlint

module.exports = {extends: ['@commitlint/config-conventional']
}

module可能会导致eslint报错,所以我们需要让eslint忽略该文件的检测
在tsconfig.json中添加

"exclude": ["commitlint.config.js"],
  1. 生成钩子函数
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

这样如果我们提交代码不够规范的话,gitlint会自动把我们本次提交判定为失败
4. 规范详情

Type作用
feat新增特性 (feature)
fix修复 Bug(bug fix)
docs修改文档 (documentation)
style代码格式修改(white-space, formatting, missing semi colons, etc)
refactor代码重构(refactor)
perf改善性能(A code change that improves performance)
test测试(when adding missing tests)
build变更项目构建或外部依赖(例如 scopes: webpack、gulp、npm 等)
ci更改持续集成软件的配置文件和 package 中的 scripts 命令,例如 scopes: Travis, Circle 等
chore变更构建流程或辅助工具(比如更改测试环境)
revert代码回退

也可以查看官网来获取更多信息

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/46844.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx反向代理配置流式响应

Nginx 是通过缓存响应内容来处理请求的。也就是说,当 Nginx 接收到完整的响应后,才会将其发送给客户端,所以默认不支持流式响应,这里讲讲 Nginx 反向代理中怎么配置流式响应? 一、使用背景 最近使用 Egg.js 搭建自动化…

TypeError: Cannot read properties of undefined (reading ‘container‘)

问题环境: element项目 el-table的错误 项目是由 webpack项目迁移为 vite项目 问题描述: errorLog.js?t1692581753160:17 TypeError: Cannot read properties of undefined (reading container) at unbind (infinite-scroll.js:259:31) …

【腾讯云 TDSQL-C Serverless 产品测评】全面测评TDSQL-C Mysql Serverless

全面测评TDSQL-C Mysql Serverless 文章目录 全面测评TDSQL-C Mysql Serverless前言什么是TDSQL-C Mysql Serverless初始化 TDSQL-C Mysql Serverless新建数据库建立数据表开启外网访问 兼容性SQL文件 导入导出navicat 直接在线传输 构建测试环境准备Python测试脚本准备 Jmeter…

php的openssl_encrypt是不是自动做了PKCS5Padding?

在PHP中,openssl_encrypt函数默认使用的是PKCS7填充(不是PKCS5填充)。PKCS7填充实际上是PKCS5填充的扩展,用于对不同块大小的数据进行填充。 当你使用openssl_encrypt函数进行加密时,如果你没有显式指定填充模式和填充…

Unity框架学习--对象池

频繁创建和销毁对象会造成性能的开销。 创建对象的时候,系统会为这个对象开辟一片新的空间。销毁对象的时候,这个对象会变成内存垃圾,当内存垃圾达到一定程度,就会触发垃圾回收机制,清理内存垃圾,由…

下载安装并使用小乌龟TortoiseGit

1、下载TortoiseGit安装包 官网:Download – TortoiseGit – Windows Shell Interface to Githttps://tortoisegit.org/download/ 2、小乌龟汉化包 在官网的下面就有官方提供的下载包 3、安装

Electron入门,项目运行,只需四步轻松搞定。

electron 简单介绍: 实现:HTML/CSS/JS桌面程序,搭建跨平台桌面应用。 electron 官方文档: [https://electronjs.org/docs] 本文是基于以下2篇文章且自行实践过的,可行性真实有效。 文章1: https://www.cnbl…

Django学习笔记(2)

创建app 属于自动执行了python manage.py 直接在里面运行startapp app01就可以创建app01的项目了 之后在setting.py中注册app01 INSTALLED_APPS ["django.contrib.admin","django.contrib.auth","django.contrib.contenttypes","django.c…

合并jar包导致gradle传递依赖失效

目录 零、背景一、合并jar包1.1、自定义一组jar包1.2、自定义合并jar的任务1.3、定义打包jar的任务 二、发布jar包2.1、未合并jar包之前的合并方式2.2、合并jar包之后的合并方式 三、发现问题3.1、确定gradle中的依赖关系3.2、对比maven是否缺失依赖3.3、对比合并前后的pom.xml…

Source Insight配置Cppcheck做静态测试(Windows)

1.安装cppcheck 先从cppcheck官方网站下载cppcheck的安装包。 注: (1)官网地址:https://sourceforge.net/projects/cppcheck (2)截止2023年8月,官方发布的最新版本是cppcheck-2.11-x64-Setup.…

子集-回溯方法

class Solution {//题解思路//LinkedList<Integer> path new LinkedList<>(); List<List<Integer>> results new ArrayList<>();public List<List<Integer>> subsets(int[] nums) {//主方法中调用方法同时传入指定的参数初始值bac…

【数据挖掘】使用 Python 分析公共数据【01/10】

一、说明 本文讨论了如何使用 Python 使用 Pandas 库分析官方 COVID-19 病例数据。您将看到如何从实际数据集中收集见解&#xff0c;发现乍一看可能不那么明显的信息。特别是&#xff0c;本文中提供的示例说明了如何获取有关疾病在不同国家/地区传播速度的信息。 二、准备您的…

【计算机视觉|生成对抗】改进的生成对抗网络(GANs)训练技术

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;Improved Techniques for Training GANs 链接&#xff1a;[1606.03498v1] Improved Techniques for Training GANs (arxiv.org) 摘要 本文介绍了一系列应用于生成对抗网络&#xff08;G…

ICCV23 | Ada3D:利用动态推理挖掘3D感知任务中数据冗余性

​ 论文地址&#xff1a;https://arxiv.org/abs/2307.08209 项目主页&#xff1a;https://a-suozhang.xyz/ada3d.github.io/ 01. 背景与动因 3D检测(3D Detection)任务是自动驾驶任务中的重要任务。由于自动驾驶任务的安全性至关重要(safety-critic)&#xff0c;对感知算法的延…

HCIP STP总结

网桥的4个选举 根网桥&#xff1a; 有且仅有一台&#xff0c;且由BPDU中的桥ID来决定 桥ID 网桥优先级&#xff08;0-65535公有&#xff09; 默认32768 MAC地址&#xff08;只有存在svi接口…

Pinia基础教程

Pinia wiki Pinia 起始于 2019 年 11 月左右的一次实验&#xff0c;其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起&#xff0c;我们就倾向于同时支持 Vue 2 和 Vue 3&#xff0c;并且不强制要求开发者使用组合式 API&#xff0c;我们的初心至今没有改变。除了安…

数据结构-->栈

&#x1f495;休对故人思故国&#xff0c;且将新火试新茶&#xff0c;诗酒趁年华&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;详解链表OJ题 前言&#xff1a; 前面已经学习过顺序表&#xff0c;链表。他们都是线性表&#xff0c;今天要学习的栈也是一种线…

【C++】C 语言 和 C++ 语言中 const 关键字分析 ② ( const 常量分配内存时机 | const 常量在编译阶段分配内存 )

文章目录 一、const 常量内存分配时机二、使用如下代码验证 const 常量内存分配时机三、分析验证结果 - const 常量在编译阶段分配内存 一、const 常量内存分配时机 在上一篇博客中 , 讲到了获取 const 常量的地址 , 代码如下 : // 定义常量// 该常量定义在了 符号表 中// 符号…

C++--深度理解智能指针

PS:智能指针简单应用看这里 http://t.csdn.cn/qN7IK 1.智能指针的介绍 在C中&#xff0c;智能指针有三个版本&#xff0c;分别为&#xff1a; auto_ptr unique_ptr shared_ptr 这三个版本的智能指针中&#xff0c;shared_ptr最为完善&#xff0c;auto_ptr基本上没有太大用…

leetcode 213. 打家劫舍 II

2023.8.20 本题是 打家劫舍 的进阶版&#xff0c;房屋之间形成一个环了&#xff0c;也就是第一个房屋和最后一个房屋不能一起偷了。那么能偷的情况分为下列三种&#xff1a; 不考虑偷首房间。不考虑偷尾房间。不考虑偷首尾房间。 第三种情况包含于第一和第二种情况了&#xff…