使用vite创建vue3项目及项目的配置 | 环境准备 ESLint配置 prettier配置 husky配置

使用vite创建vue3项目及项目的配置

1.环境准备

使用vite搭建项目,vite需要nodejs版本14.18+、16+

  • node v18.16.1
  • pnpm 8.7.4

pnpm:performant npm(高性能的npm)由npm/yarn衍生而来,解决了npm/yarn内部潜在的bug,极大的优化了性能,扩展了使用场景。

pnpm安装指令

npm i -g pnpm

创建项目

pnpm create vite
cd # 进入项目
pnpm install # 安装依赖 + @vitejs/plugin-vue 4.3.4 + typescript 5.2.2 + vite 4.4.9 + vue-tsc 1.8.10
pnpm run dev # 运行项目

打开项目,需要手动在浏览器输入地址。
修改package.json文件的字段 "dev": "vite --open",这样使用pnpm run dev命令会自动打开浏览器。

项目配置

VSCode 有对应插件Prettier - Code formatterESlintStylelint可以实现相同的功能

以下配置适用于协同开发的大项目配置。

ESLint校验代码工具配置 - js代码检测工具

eslint:提供一个插件化的javaScript代码检测工具

1.安装ESLint到开发环境 devDependencies

//完整写法
pnpm  install --save-dev eslint 
//简写
pnpm i eslint -D

2.生成配置文件:.eslint.cjs**

npx eslint --init

在这里插入图片描述

.eslint.cjs文件

// 对外暴露的配置对象
module.exports = {"env": { // eslint的工作环境"browser": true,"es2021": true // 校验js语法},"extends": [ //规则的继承//全部规则默认是关闭的,这个配置项会开启推荐规则(推荐需要遵守的规则)"eslint:recommended",//vue3语法规则"plugin:@typescript-eslint/recommended",//ts语法规则"plugin:vue/vue3-essential"],"overrides": [ //为特定类型的文件指定处理器{"env": {"node": true},"files": [".eslintrc.{js,cjs}"],"parserOptions": {"sourceType": "script"}}],//指定解析器选项"parserOptions": {"ecmaVersion": "latest", //校验ECMA最新版本"parser": "@typescript-eslint/parser",//指定解析器,当前表示ts解析器,还可以选择Babel=ESLint babel解析器、默认Esprima解析器"sourceType": "module"// 设置为},// ESLint支持使用第三方插件,在使用插件之前,必须使用npm安装"plugins": ["@typescript-eslint","vue"],//ESLint校验规则"rules": {}
}

3.安装vue3环境代码校验插件**

# 让所有与prettier规则存在冲突的Eslint rules失效,并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint,使prettier规则优先级更高,Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件(查找vue语法错误,发现错误指令,查找违规风格指南)
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",# 指令
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

4. 修改.eslintrc.cjs配置文件

module.exports = {//..../* 规则的状态* "off" 或 0    ==>  关闭规则* "warn" 或 1   ==>  打开的规则作为警告(不影响代码执行)* "error" 或 2  ==>  规则作为一个错误(代码不能执行,界面报错)*/"rules": {// eslint(https://eslint.bootcss.com/docs/rules/)// key为规则,右侧为规则的状态'no-var': 'error', // 要求使用 let 或 const 而不是 var'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-unexpected-multiline': 'error', // 禁止空余的多行'no-useless-escape': 'off', // 禁止不必要的转义字符// typeScript (https://typescript-eslint.io/rules)'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型'@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。'@typescript-eslint/semi': 'off',// eslint-plugin-vue (https://eslint.vuejs.org/rules/)'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用'vue/no-mutating-props': 'off', // 不允许组件 prop的改变'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式},
}

5.生成ESLint忽略文件

文件名:.eslintignore
作用:设置不需要进行校验的文件夹

dist  // 打包文件
node_modules // 依赖文件

6.在package.json新增运行脚本

// 新增运行脚本
"scripts": {// ...."lint": "eslint src",  // 运行lint指令时,eslint校验src文件夹里面的文件"fix": "eslint src --fix", // 对于不符合规则的语法进行纠正
}

prettier配置 - 格式化检测工具

1.安装prettier依赖包

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2.prettierrc.json添加规则

创建prettierrc.json配置文件

{"singleQuote": true, // 使用单引号"semi": true,   //语句最后方的分号"bracketSpacing": true,"htmlWhitespaceSensitivity": "ignore","endOfLine": "auto","trailingComma": "all","tabWidth": 2 //缩进占2个位置
}

3. 新建.prettierignore忽略文件

设置不需要格式化的文件夹

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

4. 在package.json新增运行脚本

"scripts": {// ...."lint": "eslint src",  // 运行lint指令时,eslint校验src文件夹里面的文件"fix": "eslint src --fix", // 对于不符合规则的语法进行纠正"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
}

husky配置 提交代码前进行的操作

利用husky在代码提交之前触发git hook(git在客户端的钩子),然后执行pnpm run format来自动的格式化我们的代码。

安装husky

pnpm install -D husky

执行npx husky-init 会在根目录下生成个一个.husky目录,在这个目录下面会有一个pre-commit文件,这个文件里面的命令在我们执行commit时执行。

前提是文件夹先git init 创建git追踪

.husky/pre-commit文件添加如下命令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format

配置commitlint 统一提交规范

利用commitlint统一commit信息的规范

pnpm add @commitlint/config-conventional @commitlint/cli -D

添加配置文件,新建commitlint.config.cjs(注意是cjs),然后添加下面的代码:

module.exports = {extends: ['@commitlint/config-conventional'],// 校验规则rules: {'type-enum': [2,'always',['feat',//新特性、新功能'fix',//修改bug'docs',//文档修改'style',//代码格式修改, 注意不是 css 修改'refactor',//代码重构'perf',//优化相关,比如提升性能、体验'test',//测试用例修改'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等'revert',//回滚到上一个版本'build',//编译相关的修改,例如发布版本、对项目构建或者依赖的改动],],'type-case': [0],'type-empty': [0],'scope-empty': [0],'scope-case': [0],'subject-full-stop': [0, 'never'],'subject-case': [0, 'never'],'header-max-length': [0, 'always', 72],},
}

package.json中配置scripts命令

# 在scrips中添加下面的代码
{
"scripts": {"commitlint": "commitlint --config commitlint.config.cjs -e -V"},
}

配置husky

npx husky add .husky/commit-msg 

在生成的commit-msg文件中添加下面的命令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint

当 commit 提交信息时,必须是git commit -m 'type: xxx' 符合类型的才可以,需要注意的是类型的后面需要用英文的 :,并且冒号后面是需要空一格的,这个是不能省略的

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

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

相关文章

能用就行——玄学问题:Compile with TORCH_USE_CUDA_DSA to enable device-side assertions

配置&#xff1a; python 3.9.0&#xff0c;torch2.0.1cu118 背景&#xff1a; 一直使用这个配置训练都没问题。搁置了一个月之后&#xff0c;再次使用就显示报错“Compile with TORCH_USE_CUDA_DSA to enable device-side assertions.” 过程&#xff1a; 尝试了网上的各种方…

【SG滤波】三阶滤波、五阶滤波、七阶滤波(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

气传导耳机对耳朵有伤害吗?气传导耳机哪款好?

​随着气传导耳机的快速发展&#xff0c;在运动、办公等场合能够经常看到&#xff0c;带来了前所未有的舒适体验。作为一种新型耳机类型&#xff0c;相较传统入耳式耳机来说&#xff0c;更有利于耳道卫生&#xff0c;在听歌时还能保持对环境声的感知。面对市面上这么多气传导耳…

GEE:快速实现NDVI时间序列NDVI线性趋势和变化敏感性计算(斜率、截距)

作者:CSDN @ _养乐多_ 本博客将向您介绍如何使用Google Earth Engine(GEE)平台来处理Landsat 5、7和8的卫星图像数据,计算NDVI的斜率和截距,以及如何导出这些结果供进一步分析使用。 文章目录 一、代码详解1.1 核心代码详解1.2 核心代码详解1.3 代码框架介绍二、完整代码…

Python 多进程异常

这里写目录标题 1、捕获异常2、退出程序3、进程共享变量4、multiprocessing的Pool所起的进程中再起进程 1、捕获异常 https://zhuanlan.zhihu.com/p/321408784 try:<语句> except Exception as e:print(异常说明,e)1 捕获所有异常 包括键盘中断和程序退出请求&#xff0…

KINODYNAMIC-路径规划

工程自动导航分为两步&#xff1a;先路径规划&#xff0c;再轨迹规划 但是如果路径规划与轨迹规划完全独立开&#xff0c;不考虑运动学约束&#xff0c;会导致搜索出来的路线无法用轨迹优化矫正过来 例如&#xff1a; 因此再路径规划的时候&#xff0c;就应该一定程度上将运动…

CANoe-Model Editor无法修改ARXML文件的问题、E2E在SOME/IP通信中的使用问题

1、Model Editor无法修改ARXML文件的问题 在CANoe 15软件版本中,Communication Setup导入arxml文件后,可以在model editor中打开arxml并修改配置。关闭model editor后再打开,可以看到修改的配置被保存了。 但是,当我把arxml文件从Communication Setup中移除后,再导入。此…

基于Java的大学生心理健康答题小程序设计与实现(亮点:选题新颖、可以发布试卷设置题目、自动判卷、上传答案、答案解析)

校园点餐小程序 一、前言二、我的优势2.1 自己的网站2.2 自己的小程序&#xff08;小蔡coding&#xff09;2.3 有保障的售后2.4 福利 三、开发环境与技术3.1 MySQL数据库3.2 Vue前端技术3.3 Spring Boot框架3.4 微信小程序 四、功能设计4.1 主要功能描述 五、系统主要功能5.1 登…

python生成PDF报告

前言 最近接到了一个需求-将项目下的样本信息汇总并以PDF的形式展示出来&#xff0c;第一次接到这种PDF的操作的功能&#xff0c;还是有点慌的&#xff0c;还好找到了reportlab这个包&#xff0c;可以定制化向PDF写内容&#xff01; 让我们由简入深进行讲解 一、reportlab是…

BLE Mesh蓝牙mesh传输大数据包传输文件照片等大数据量通讯

1、BLE Mesh数据传输现状 BLE Mesh网络技术是低功耗蓝牙的一个进阶版&#xff0c;Mesh扩大了蓝牙在应用中的规模和范围&#xff0c;因为它同时支持超过三万个网络节点&#xff0c;可以跨越大型建筑物&#xff0c;不仅可以使得医疗健康应用更加方便快捷&#xff0c;还能监测像学…

【大数据之Kafka】十三、Kafka消费者生产经验之分区的分配及再平衡、数据积压和消费者事务

1 分区的分配及再平衡 一个consumer group中有多个consumer组成&#xff0c;一个 topic有多个partition组成&#xff0c;使用分区分配策略决定由哪个consumer来消费哪个partition的数据。 Kafka有四种主流的分区分配策略&#xff1a; Range、RoundRobin、Sticky、CooperativeSt…

C++中的深拷贝和浅拷贝介绍

对于基本类型的数据以及简单的对象,它们之间的拷贝非常简单,就是按位复制内存。例如: class Base{public:Base(): m_a(0), m_b(0){ }Base(int a, int b): m_a(a), m_b(b){ }private:int m_a;int m_b;};int main(){int a = 10;int b = a; //拷贝Base obj1(10, 20);Base obj2…

kafka管理工具之kafka-ui的环境搭建笔记

由于项目需要kafka支持认证功能&#xff0c;就把kafka升级到3.2.0了。之前一直使用的kafka tools(现在叫Offset Explorer&#xff0c;个人使用免费&#xff0c;商用付费)&#xff0c;开了认证之后就不好用了&#xff0c;卡的很&#xff0c;一点也不丝滑了&#xff0c;于是只好重…

TC397 IfxAsclin串口收发分析

TC397 IfxAsclin串口收发分析 硬件FIFO 16 bytes TxFIFO 16 bytes RxFIFO 软件操作: 通过以上函数调用分析,可知: 1:初始化串口时,指定的FIFO为S/W 缓冲FIFO 2:ILLD提供的ISR操作函数: IfxAsclin_Asc_isrTransmit(&gstAsc2); IfxAsclin_Asc_isrReceive(&gs…

Linux集群时间同步方法

参考&#xff1a;https://www.cnblogs.com/felixzh/p/10638399.html

SpringMvc决战-【SpringMVC之自定义注解】

目录 一、前言 1.1.什么是注解 1.2.注解的用处 1.3.注解的原理 二.注解父类 1.注解包括那些 2.JDK基本注解 3. JDK元注解 4.自定义注解 5.如何使用自定义注解&#xff08;包括&#xff1a;注解标记【没有任何东西】&#xff0c;元数据注解&#xff09;&#xff1f; 三…

8种LED显示屏的安装方式

LED显示屏可以根据不同的应用需求和场地条件采用多种安装方式。 LED显示屏的常见安装方式包括&#xff1a; 立柱式&#xff1a;一般多用于大厦门口、大楼大厅等户外场所&#xff0c;可以抵抗风雨侵蚀&#xff0c;更适用于户外广告牌的使用。安装方式有单立柱安装、双立柱安装和…

【C++】搜索二叉树底层实现

目录 一&#xff0c;概念 二&#xff0c;实现分析 1. 插入 &#xff08;1.&#xff09;非递归版本 &#xff08;2.&#xff09;递归版本 2. 打印搜索二叉树 3.查找函数 &#xff08;1.&#xff09;非递归版本 &#xff08;2.&#xff09;递归版本 4. 删除函数&#x…

stm32--独立看门狗

最近学习到独立看门狗&#xff0c;总结下笔记 1.看门狗的作用&#xff1a;防止程序异常跑飞&#xff0c;跑飞时&#xff0c;进行系统复位&#xff0c;从而不会导致代码瘫痪&#xff0c;奔溃卡死在某段程序。 2.看门狗其实是12bit递减计数器&#xff0c;&#xff0c;减到0会产…

入户式防汛报警器是什么?

入户式防汛报警器是一款能够和雨量气象监测设备搭配的仪器&#xff0c;是集实时监测、信息显示、多时段声光报警功能的监测报警设备&#xff0c;支持不同级别的声光报警。 当监测要素超过设定的危险警戒值时设备发出报警声&#xff0c;提醒居民做好防汛&#xff08;转移&#…