vue + vite 使用onchange和prettier 进行文件变化监视和格式化

在现代的前端开发中,文件的格式化和实时监视是一个必不可少的环节。为了提高开发效率,我们可以利用一些工具来自动化这个过程。本文将介绍如何使用 onchange 和 prettier 来监视文件变化并进行格式化。

concurrently和onchange

concurrently 是一个用于在命令行中同时运行多个命令的工具。它允许我们在一个终端窗口中并行运行多个命令,提高了开发过程中的效率。

onchange 是一个监视文件变化的工具,它可以检测指定文件的修改并触发相应的操作。我们可以利用 onchange 来监视文件的变化并执行格式化操作。

prettier和write

prettier 是一个代码格式化工具,它可以帮助我们保持代码的一致性和可读性。它支持多种编程语言,并提供了许多配置选项,以便根据个人或团队的偏好进行定制。

prettier 的 --write 选项用于在原始文件上进行格式化,并将格式化后的结果写回到原始文件中。这意味着当文件发生变化时,我们可以使用 prettier --write 命令自动格式化修改后的文件,而不是生成一个新的格式化文件。

安装依赖

首先,我们需要在项目中安装所需的依赖项。通过以下命令安装 concurrentlyonchangeprettier

npm install concurrently onchange prettier --save-dev

配置package.json

接下来,我们需要在 package.json 文件中配置一个 dev 脚本,用于并行运行 onchange 和其他命令。

在 scripts 部分添加以下内容:

"scripts": {"dev": "concurrently \"onchange '**/*.{js,jsx,ts,tsx,vue,less,md,json}' -- prettier --write '{{changed}}'\" \"vite\""
}

在上述代码中,我们使用了 concurrently 来同时运行两个命令。第一个命令使用 onchange 来监视指定类型的文件变化,并在文件变化时运行 prettier --write 进行格式化。{{changed}} 是 onchange 提供的占位符,表示发生变化的文件。

Prettier配置

在项目根目录下创建一个 .prettierrc 文件,用于配置 prettier。

在 .prettierrc 文件中,我们可以指定 prettier 的配置选项,例如缩进大小、换行符风格、引号类型等。根据个人或团队的编码规范,可以进行相应的定制。

以下是一个示例的 .prettierrc 配置文件:

{"tabWidth": 2,"useTabs": false,"singleQuote": true,"trailingComma": "all"
}

上述配置将使用 2 个空格作为缩进,使用单引号而不是双引号,以及在多行结尾添加逗号。

运行开发环境

现在,我们可以运行以下命令启动开发环境

npm run dev

运行上述命令后,onchange 会监视指定类型的文件变化,并在文件发生变化时自动运行 prettier --write 进行格式化。同时,vite 也会启动开发服务器,以便我们可以实时预览和调试应用程序。

通过这种方式,我们可以在开发过程中保持代码的一致性,并实时查看应用程序的变化。

总结

本文介绍了如何使用 onchange 和 prettier 来实现文件变化监视和格式化。通过配置 package.json 中的 dev 脚本,我们可以使用concurrently 同时运行 onchange 和其他命令,从而实现文件变化时的自动格式化和开发服务器的实时预览。使用 prettier --write 命令可以在原始文件上进行格式化,并将格式化后的结果写回到原始文件中。我们还可以根据个人或团队的偏好使用 .prettierrc 文件进行 prettier 的配置,以满足特定的格式化需求。

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

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

相关文章

论文阅读-THE GENERALIZATION GAP IN OFFLINE REINFORCEMENT LEARNING(ICLR 2024)

1.Motivation 本文希望比较online RL、offline RL、序列决策和BC等方法的泛化能力(对于不同的初始状态、transition functions、reward functions,现阶段offline RL训练的方式都是在同一个环境下的数据集进行训练)。实验发现offline的算法相较于online算法对新环境…

Oracle-savepoint相关

总结:在同一个会话下,如果savepoint的名称相同,新的savepoint则会覆盖旧的savepoint,在不同的会话下,savepoint的名称相同,不会相互影响。 为了避免savepoint名称相同,可以在建立savepoint名称时…

特别提醒:2024年软考连考时间再次调整!

近期,辽宁省发布了今年5月软考考试安排,有以下变化: 高级论文单独考试(2小时),之前是案例和论文一起考,案例剩下的时间可以给论文用,现在是综合和案例一起考,综合剩下的…

菜鸡学习netty源码(一)——ServerBootStrap启动

1.概述 对于初学者而然,写一个netty本地进行测试的Server端和Client端,我们最先接触到的类就是ServerBootstrap和Bootstrap。这两个类都有一个公共的父类就是AbstractBootstrap. 那既然 ServerBootstrap和Bootstrap都有一个公共的分类,那就证明它们两个肯定有很多公共的职…

Redis集群.md

Redis集群 本章是基于 CentOS7 下的 Redis 集群教程,包括: 单机安装RedisRedis主从Redis分片集群 1.单机安装Redis 首先需要安装Redis所需要的依赖: yum install -y gcc tcl然后将课前资料提供的Redis安装包上传到虚拟机的任意目录&#xf…

PHP8.2-xlswriter 扩展

https://pecl.php.net/package/xlswriter ### 进入/root/ cd ~ ### 下载扩展 wget https://pecl.php.net/get/xlswriter-1.5.5.tgz ### 解压扩展 tar -zxvf xlswriter-1.5.5.tgz ### 进入扩展目录 cd xlswriter-1.5.5 ### 查找对应php版本的phpize find / -name phpi…

sh: 1: appimagetool: not found

下载 appimagetool: 首先,访问 AppImageHub 或者 AppImage GitHub releases 页面 查找 appimagetool 的最新版本。 安装 appimagetool: 下载完成后,你将获得一个 .AppImage 文件。你需要将这个文件转换为可执行文件&#xff0c…

如何在CentOS部署青龙面板并实现无公网IP远程访问本地面板

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Java双亲委派机制

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 概述 Java程序在运…

一起长锈:4 默认不可变的变量绑定与引用(从Java与C++转Rust之旅)

讲动人的故事,写懂人的代码 故事梗概:在她所维护的老旧Java系统即将被淘汰的危机边缘,这位在编程中总想快速完事的女程序员,希望能转岗到公司内部使用Rust语言的新项目组,因此开始自学Rust;然而,在掌握了Rust编程知识之后,为了通过Rust项目组的技术面试,使得转岗成功而…

激光雷达仿真代码(matlab)

模拟实车多线激光雷达 clc clear close all %% 一 fileName lidarData_ConstructionRoad.pcap; deviceModel HDL32e; veloReader velodyneFileReader(fileName,deviceModel); %% 二 ptCloudreadFrame(veloReader); %% 三 %设置点云显示的区域 xlimits [-25,45]; yl…

sql优化思路

sql的优化经验 这里解释一下SQL语句的优化的原理 1.指明字段名称,可以尽量使用覆盖索引,避免回表查询,因此可以提高效率 2.字面意思,无需过多赘述。索引就是为了提高查询效率的。 3.图中两条sql直接可以使用union all 或者 uni…

C语言三维数组的创建

#include <stdio.h> int main() { int n 5; // 假设我们想要一个 5x5x5 的三维数组 // 但这样声明是不允许的&#xff0c;因为 n 的值在编译时未知 // int f[n][n][n]; // 错误 // 如果 n 是一个编译时常量&#xff08;例如枚举值或 const 变量&#xff09;&#x…

使用react hooks写一个倒计时功能

先要明确的是&#xff0c;setTimeout函数中执行代码的时间肯定是要大于等于setTimeout时间的&#xff0c;那么就可能出现设定的 1 秒&#xff0c;实际执行却执行了 2 秒的情况&#xff0c;那么我们的实现思路也很简单&#xff0c;每次计算一下setTimeout实际执行的时间&#xf…

羊大师分解,羊奶不为人知的健康奇迹

羊大师分解&#xff0c;羊奶不为人知的健康奇迹 羊奶是一种营养丰富的食品&#xff0c;拥有许多不为人知的健康益处。 益智健脑&#xff1a;羊奶中含有较高的钙、蛋白质、氨基酸、维生素、矿物质、无机盐、核酸等营养成分&#xff0c;这些都对大脑发育及增强智力有很大帮助。…

MySQL mydumper工具

目录 1. mydumper介绍 2. mydumper参数解释 3. 备份例子 3.1 备份全库(未包含其他) 3.2 备份全库(包含其他) 3.3 备份指定数据库(-B或--database) 3.4 导出指定表(-T或--tables-list) 3.5 只导出表结构&#xff0c;不导出表数据(-d或--no-data) 3.6 只导出表数据&#…

iOS 横竖屏的正确打开姿势

一、使用场景概述 一种是在present出来的vc中打开横竖屏 固定只有一个方向&#xff08;横屏的方向&#xff09; 可根据重力感应进行横竖屏 某个特定的push出来的vc中打开横竖屏&#xff08;只能根据重力感应横竖屏&#xff0c;不能设置强制的方向&#xff09; 二、具体代码…

包管理工具npm的安装和使用

包管理工具 管理 包 的应用软件&#xff0c;可以对 包 进行下载 安装&#xff0c;更新&#xff0c;删除&#xff0c;上传 等操作。 借助包管理工具&#xff0c;可以快速开发项目&#xff0c;提升开发效率。 包管理工具是一个通用的概念&#xff0c;很多编程语言都有包管理工…

likeshop多商户单商户商城_likeshop跑腿源码_likeshop物品租赁系统开源版怎么配置小程序对接?

本人是商业用户所以能持续得到最新商业版&#xff0c;今天我说下likeshop里面怎么打包小程序&#xff0c;大家得到程序时候会发现它有admin目录 app目录 server目录 这三个目录分别是做什么呢&#xff1f; 1.admin目录 下面都是架构文件使用得是Node.js打包得&#xff0c;至于…

管道通信与Linux命令的执行-(读书笔记-十三)

|前一个命令的输出作为后一个命令的输入。 在Linux中&#xff0c;|符号是一个管道符号&#xff0c;用于将前一个命令的输出作为后一个命令的输入。这种机制允许你将多个命令组合在一起&#xff0c;以执行复杂的操作。下面是一些基本的例子&#xff1a; 查看当前目录下的文件列…