1.你还不会写vite插件吗？没关系，源码我教你啊！源码
2.vue3-element-adminESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范
3.vscode代码格式化
4.10个不容错过的源码VSCode插件（上）
5.开箱即用开发一个基于环信IM的Vue3聊天室插件，从而快速实现直播间聊天室功能
6.详解prettier使用以及与主流IDE的源码配合

你还不会写vite插件吗？没关系，我教你啊！源码

       前言

       大家好，源码生日礼物 源码我是源码易师傅，在现如今Vite工具快开始盛行之下，源码我们是源码不是可以去做一件有意义的事呢，比如写一个vite插件，源码你觉得怎么样？

       刚好我们可以趁vite插件生态还未很成熟阶段，源码做一个让自己顺心，源码让领导赏心，源码让社区开心的源码插件，与之携手共进。源码

       如果大家对vite感兴趣可以去看看专栏：?《Vite从入门到精通》

通过本文你可以学到

       如何创建一个vite插件模板

       vite插件的各个钩子作用

       vite插件的钩子执行顺序

       如何写一个自己的插件

了解vite插件1.什么是vite插件

       vite其实就是一个由原生?ESModule?驱动的新型Web开发前端构建工具。

       vite插件就可以很好的扩展vite自身不能做到的事情，比如文件的压缩、对commonjs的支持、打包进度条等等。

2.为什么要写vite插件

       相信在座的每位同学，到现在对webpack的相关配置以及常用插件都了如指掌了吧；

       vite作为一个新型的前端构建工具，它还很年轻，也有很多扩展性，那么为什么我们不趁现在与它一起携手前进呢？做一些于你于我于大家更有意义的事呢？

快速体验

       要想写一个插件，那必须从创建一个项目开始，下面的vite插件通用模板大家以后写插件可以直接clone使用；

       插件通用模板github：体验入口

       插件github：体验入口

       建议包管理器使用优先级：pnpm>yarn>npm>cnpm

       长话短说，直接开干~

创建vite插件通用模板1.初始化

       1.1创建一个文件夹并且初始化：初始化按照提示操作即可

mkdirvite-plugin-progress&&cdvite-plugin-progress&&pnpminit

       1.2安装typescript

pnpmitypescript@types/node-D

       1.3配置tsconfig.json

{ "compilerOptions":{ "module":"ESNext","target":"esnext","moduleResolution":"node","strict":true,"declaration":true,"noUnusedLocals":true,"esModuleInterop":true,"outDir":"dist","lib":["ESNext"],"sourceMap":false,"noEmitOnError":true,"noImplicitAny":false},"include":["src/*","*.d.ts"],"exclude":["node_modules","examples","dist"]}

       1.4安装vite

//进入package.json{ ..."devDependencies":{ "vite":"*"}...}2.配置eslint和prettier（可选）

       安装eslint

pnpmieslint@typescript-eslint/parser@typescript-eslint/eslint-plugin--save-dev

       配置.eslintrc：配置连接

       安装prettier（可选）

pnpmiprettiereslint-config-prettiereslint-plugin-prettier--save-dev

       配置.prettierrc：配置连接

3.新增src/index.ts入口importtype{ PluginOption}from'vite';exportdefaultfunctionvitePluginTemplate():PluginOption{ return{ //插件名称name:'vite-plugin-template',//pre会较于post先执行enforce:'pre',//post//指明它们仅在'build'或'serve'模式时调用apply:'build',//apply亦可以是一个函数config(config,{ command}){ console.log('这里是config钩子');},configResolved(resolvedConfig){ console.log('这里是configResolved钩子');},configureServer(server){ console.log('这里是configureServer钩子');},transformIndexHtml(html){ console.log('这里是transformIndexHtml钩子');},}}

       其中的vite插件函数钩子会在下面详细详解~

       到这里，那么我们的基本模版就建好了，但是我们现在思考一下，我们应该怎么去运行这个插件呢？

       那么我们就需要创建一些examples例子来运行这个代码了；

4.创建examples目录

       我这里创建了三套项目demo，大家直接copy就行了，这里就不详细介绍了

       vite-react

       vite-vue2

       vite-vue3

       如果你的插件需要多跑一些demo，自行创建项目即可；

       那么下面我们就需要配置examples下的项目与当前根目录的插件做一个联调了（下面以examples/vite-vue3为例）。

5.配置examples/vite-vue3项目

       修改examples/vite-vue3/package.json

{ ..."devDependencies":{ ..."vite":"link:../../node_modules/vite","vite-plugin-template":"link:../../"}}

       上面意思就是说：

       要把examples/vite-vue3项目中的vite版本与根目录vite-plugin-template的版本一致；

       同时要把examples/vite-vue3项目中的vite-plugin-template指向你当前根目录所开发的插件；

       引入插件：examples/vite-vue3/vite.config.ts

importtemplatefrom'vite-plugin-template';exportdefaultdefineConfig({ ...plugins:[vue(),template()],...});

       安装：cdexamples/vite-vue3&&pnpminstall

cdexamples/vite-vue3&&pnpminstall

       注意：examples/vite-vue2和examples/vite-react的配置与这一致

       思考：

       到这里，我们再思考一下，我们把examples/vite-vue3中的项目配置好了，但是我们应该怎么去运行呢？

       直接去examples/vite-vue3目录下运行pnpmrunbuild或者pnpmrundev？

       这样显然是不能运行成功的，因为我们的根目录下的src/index.ts是没法直接运行的，所以我们需要把.ts文件转义成.js文件；

       那么我们怎么处理呢？

       那么我们不得不去试着用用一个轻小且无需配置的工具tsup了。

6.安装tsup配置运行命令

       tsup是一个轻小且无需配置的，由esbuild支持的构建工具；

       同时它可以直接把.ts、.tsx转成不同格式esm、cjs、易语言冒泡源码iife的工具；

       安装tsup

pnpmitypescript@types/node-D0

       在根目录下的package.json中配置

pnpmitypescript@types/node-D.开发环境运行

       开发环境运行：实时监听文件修改后重新打包（热更新）

pnpmitypescript@types/node-D2

       运行examples中的任意一个项目（以vite-vue3为例）

pnpmitypescript@types/node-D3

       注意：

       如果你的插件只会在build时运行，那就设置"example:vue3":"cdexamples/vite-vue3&&pnpmrunbuild"；

       反之就运行pnpmrundev

       输出：

       到这里你就可以边开发边运行了，尤雨溪看了都说爽歪歪~

8.发布

       安装bumpp添加版本控制与tag

pnpmitypescript@types/node-D4

       配置package.json

pnpmitypescript@types/node-D5

       开发完插件后运行发布

pnpmitypescript@types/node-D6

       那么到这里，我们的vite插件模板就已经写好了，大家可以直接克隆vite-plugin-template模板使用；

       如果你对vite的插件钩子和实现一个真正的vite插件感兴趣可以继续往下面看；

vite的插件钩子hooks们1.vite独有的钩子

       enforce：值可以是pre?或?post，pre会较于post先执行；

       apply：值可以是build或serve?亦可以是一个函数，指明它们仅在build或serve模式时调用；

       config(config,env)：可以在vite被解析之前修改vite的相关配置。钩子接收原始用户配置config和一个描述配置环境的变量env；

       configResolved(resolvedConfig)：在解析vite配置后调用。使用这个钩子读取和存储最终解析的配置。当插件需要根据运行的命令做一些不同的事情时，它很有用。

       configureServer(server)：主要用来配置开发服务器，为dev-server(connect应用程序)添加自定义的中间件；

       transformIndexHtml(html)：转换index.html的专用钩子。钩子接收当前的HTML字符串和转换上下文；

       handleHotUpdate(ctx)：执行自定义HMR更新，可以通过ws往客户端发送自定义的事件；

2.vite与rollup的通用钩子之构建阶段

       options(options)：在服务器启动时被调用：获取、操纵Rollup选项，严格意义上来讲，它执行于属于构建阶段之前；

       buildStart(options)：在每次开始构建时调用；

       resolveId(source,importer,options)：在每个传入模块请求时被调用，创建自定义确认函数，可以用来定位第三方依赖；

       load(id)：在每个传入模块请求时被调用，可以自定义加载器，可用来返回自定义的内容；

       transform(code,id)：在每个传入模块请求时被调用，主要是用来转换单个模块；

       buildEnd()：在构建阶段结束后被调用，此处构建结束只是代表所有模块转义完成；

3.vite与rollup的通用钩子之输出阶段

       outputOptions(options)：接受输出参数；

       renderStart(outputOptions,inputOptions)：每次bundle.generate和bundle.write调用时都会被触发；

       augmentChunkHash(chunkInfo)：用来给chunk增加hash；

       renderChunk(code,chunk,options)：转译单个的chunk时触发。rollup输出每一个chunk文件的时候都会调用；

       generateBundle(options,bundle,isWrite)：在调用bundle.write之前立即触发这个hook；

       writeBundle(options,bundle)：在调用bundle.write后，所有的chunk都写入文件后，最后会调用一次writeBundle；

       closeBundle()：在服务器关闭时被调用

4.插件钩子函数hooks的执行顺序（如下图）5.插件的执行顺序

       别名处理Alias

       用户插件设置enforce:'pre'

       vite核心插件

       用户插件未设置enforce

       vite构建插件

       用户插件设置enforce:'post'

       vite构建后置插件(minify,manifest,reporting)

手撸一个vite插件

       下面以vite打包进度条插件为例；

       插件地址：github如果您觉得不错欢迎star

       该插件已被vite官方收集至官方文档：链接地址

       因为文章的重点不在于这个插件的详细实现过程，所以本文只会贴上源代码供大家参考，详细介绍会在下一篇文章中讲解，请大家拭目以待吧！

       inde.ts

pnpmitypescript@types/node-D7

       cache.ts

pnpmitypescript@types/node-D8最后

       该系列会是一个持续更新系列，关于整个《Vite从入门到精通》专栏，我主要会从如下图几个方面讲解，请大家拭目以待吧！！！

       宝贝们，都看到这里了，要不点个赞呗?

原文：/post/

vue3-element-adminESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范

       vue3-element-admin 通过集成ESLint、Prettier、Stylelint和EditorConfig，确保前端代码的全面规范。这些工具分别负责代码一致性、抛物点公式源码格式化、CSS规范检查和跨编辑器编码风格统一。

       首先，ESLint作为JavaScript/TS代码的检查工具，可通过安装VSCode插件并配置.eslintrc.cjs文件，确保代码质量。在默认配置中，需更换为vue-eslint-parser，以避免解析错误。

       接下来，Prettier用于自动格式化代码，安装插件后，通过.prettierignore文件指定需要忽略的文件。在package.json中添加prettier指令以启动格式化和验证。

       Stylelint专注于CSS/SCSS规范检测，尽管它不再是代码格式化的首选（Prettier更适合）。安装插件后，配置.stylelintrc.cjs并创建.stylelintignore文件，通过package.json指令执行验证。

       EditorConfig确保不同IDE间的编码一致性，安装VSCode插件并创建.editorconfig文件，设置项目源码中的统一编码规则。项目的完整代码可在此处获取，如有疑问，可通过项目提供的交流渠道寻求帮助。

vscode代码格式化

       vscode如何自动格式化代码？我们一起了解一下吧！

       在 visual studio code编写代码中我们总会遇到代码乱、格式不规范的问题，要解决此类问题将vscode自动格式化代码，需要安装插件并进行设置，具体操作如下。

       1、首先在code中安装 Prettier -Code formatter（代码格式化程序）

       2、在菜单栏中打开设置

       3、在搜索条搜索prettier ，点击“ 在settings中编辑”栏目

       4、添加一条保存时格式化代码的语句 editor.formatOnSave: true

       5、如果出现错误有可能是在上一条语句中的编写格式或者符号错误，重现检查编辑即可。

       VSCode全称是Visual Studio Code，这是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、QQ空间iapp源码代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

       关于vscode如何自动格式化代码，我们就分享到这啦！

个不容错过的VSCode插件（上）

       本文介绍了个强大的Visual Studio Code扩展程序，旨在提升Web开发者的体验。每个插件都附有示例用法和安装链接，让开发者轻松上手。

       首先，我们来看Prettier插件，它的安装链接是：marketplace.visualstudio.com...。Prettier是一个高效自动格式化代码的工具，它通过使用争议性和可定制的规则，帮助开发者保持代码风格一致，减少团队内部因代码风格不一致引发的讨论和争议，提高团队协作效率。使用Prettier的快捷键，可以轻松格式化代码，或在保存文件时自动格式化。

       JavaScript Booster插件的安装链接是：marketplace.visualstudio.com...。它为JavaScript开发者提供了代码重构功能，能够优化代码结构和性能，提高代码的可读性和可维护性。JavaScript Booster支持许多快捷键和命令，简化代码重构过程，无论是进行大型项目重构还是优化小规模代码段，都十分便利。

       ESLint插件的安装链接是：marketplace.visualstudio.com...。它是一款用于查找和修复JavaScript代码问题的工具，能够处理代码质量和编码风格问题，帮助开发者发现潜在错误，提高代码的可读性、可维护性和可靠性。Visual Studio Code的ESLint扩展程序与编辑器集成，方便在编辑器中发现和修复代码问题。

       GitLens插件的安装链接是：marketplace.visualstudio.com...。它是一款强大的Git源代码控制工具，帮助开发者更好地管理和协作代码。GitLens提供文件历史记录、提交、开源办公系统源码分支和远程等关键数据视图，并支持多种Git工作流程，使版本管理和团队协作更加便捷和流畅。

       Live Server插件的安装链接是：marketplace.visualstudio.com...。它允许开发者在本地启动服务器，实时预览网页更改，无需手动刷新页面。Live Server支持自定义端口、HTTPS支持、自动打开浏览器和多浏览器同步预览等功能，提升网页开发效率。

       对于希望深入学习网络编程的开发者，推荐《Netty源码全解与架构思维》一书，它详细介绍了Netty的架构设计和思想，帮助开发者理解和应用Netty进行高效网络编程。

       此外，还有更多与Java相关的资源和技巧分享，例如处理高并发的方法、FPGA与GPU的对比、提升Java程序性能的技巧等，欢迎通过《Java学研大本营》微信公众号加入读者群，获取更多精彩内容。

开箱即用开发一个基于环信IM的Vue3聊天室插件，从而快速实现直播间聊天室功能

       本文将分享如何以Vue3插件的形式快速开发一个轻量级的聊天室，实现直播间聊天功能。首先，明确插件功能范围是关键，接着我们逐步进行开发。

       1. 创建项目并配置：初始化一个空白项目，安装eslint和prettier等代码校验工具，并设置`.eslintrc.cjs`和`.prettierrc.cjs`，注意因项目采用ESM模块，所有js文件需以.cjs结尾。

       2. 打包脚本设置：创建scripts文件夹，引入vite进行打包，添加jsx支持，安装@vitejs/plugin-vue-jsx，并在`package.json`中添加打包命令。完整的build脚本请参阅源码链接。

       3. Vue3插件入口：编写插件入口函数，它接收用户参数，如登录信息和聊天室标识，以及初始状态。

       4. 输入框和消息列表组件：实现输入框功能，包括文本和发送，以及消息列表的渲染和滚动。

       5. 聊天室核心功能：管理聊天室状态，初始化环信SDK，挂载监听事件，确保实时通信。

       要使用这个插件，只需提供必要的配置参数，即可在页面中快速集成一个聊天室。

       查看成果，你可以访问以下地址获取源代码：

       Github 源码地址

       以及npm包地址：

       npm 相关包地址

       参考资料包括环信注册、官方Web端文档，以及前端组件库开发和Vue3组件的TSX编写教程。

详解prettier使用以及与主流IDE的配合

       本文详述prettier在主流IDE中的应用和配置方法，帮助前端开发者解决疑惑。首先，prettier是个代码格式化工具，通过接收源代码并按照配置进行格式化。安装prettier有全局和局部两种方式，通过命令行或配置文件灵活调整规则。在IDE中，如JetBrains的IDEA、WebStorm和VSCode，prettier通过插件实现与IDE的集成。

       在IDEA和WebStorm中，安装prettier插件后，可通过自动或手动配置选择prettier工具和文件类型。自动配置会检测项目配置和全局安装，而手动配置则需要明确指定。保存文件时，有选项可以自动格式化。在VSCode中，安装prettier插件后，通过右键菜单或快捷键实现格式化，同时可查看处理过程。

       总结来说，本文详细解析了prettier的使用技巧和IDE内集成，旨在帮助开发者更好地利用prettier提升代码风格一致性，提高开发效率。

值得收藏！VScode 中这 个神仙插件写代码必备！

       欢迎来到VS Code的插件世界，这里将为您揭示个不容错过的神器插件，旨在让您在编码过程中如虎添翼。这些插件涵盖了Python、C/C++、JavaScript、代码运行、背景调整、标签重命名、注释优化等多个方面，旨在全面提升您的编程效率与体验。收藏、点赞、关注我们的公众号，获取更多优质资源。

       VS Code，作为一款轻量级且功能强大的源代码编辑器，支持多种编程语言，包括但不限于JavaScript、TypeScript、Node.js等，其丰富的扩展生态系统让它的功能更加丰富多样。下面，让我们逐一探索这些插件的魅力。

       Python插件

       Python插件提供了丰富的功能，包括智能代码补全、代码检查、调试、代码导航、格式化、重构、变量浏览器以及测试资源管理等，极大地提升了Python开发的效率和体验。

       Jupyter插件

       Jupyter插件在VS Code中提供了基本的笔记本支持，无需修改即可在多种语言内核上工作。默认情况下，它包括了Jupyter Keymaps和Jupyter Notebook Renderers扩展，为Jupyter笔记本的使用提供了便利。

       C/C++插件

       C/C++插件为VS Code增加了对C/C++语言的全面支持，包括智能代码补全、调试功能等，让C/C++开发变得更加顺畅。

       ESLint插件

       ESLint是一个用于识别并报告JavaScript代码中模式的工具，旨在使代码保持一致并避免错误。它为开发者提供了强大的代码质量检查功能。

       Prettier插件

       Prettier是一个代码格式化工具，支持多种编程语言，包括JavaScript、TypeScript、CSS、SCSS、Less等，能帮助您统一代码风格，提高代码可读性。

       Live Server插件

       Live Server插件为静态和动态页面提供了一个本地服务器，支持实时重新加载，让开发过程更加高效便捷。

       Visual Studio IntelliCode插件

       IntelliCode插件为Python、TypeScript/JavaScript和Java开发提供了AI辅助功能，基于代码上下文与机器学习技术相结合，提高开发效率。

       Code Runner插件

       Code Runner插件允许您直接运行多种语言的代码片段或代码文件，无需保存即可执行，大大节省了开发时间。

       背景调整插件

       对于那些厌倦了单调编程背景的开发者，Background插件提供了更改背景图的功能，为您营造一个更加个性化的开发环境。

       通过这些插件，您可以显著提升编程效率与体验。每款插件都旨在解决特定的编程需求，让您的开发之路更加顺畅。收藏、点赞、关注我们，获取更多编程技巧与资源。

       文章推荐

       精选个炫酷的可视化大屏模板，拿走就用！

       一文从0到1掌握用户画像知识体系

       这9个特征工程使用技巧，解决%机器学习问题！

       万字干货，一文详解数据分析知识体系！

       深度盘点：种最常用的数据分析模型，赶紧收藏

       年，这个Github热门且实用的Python库值得收藏！

       轻松解决时序异常检测问题，pyfbad这次火了！

       心得总结：一名优秀的数据分析专家的能力模型

       实践分享：如何搭建数据指标体系？

       够强大！Python这款可视化大屏不足百行代码！

       太漂亮了！输出好看的表格，就用这个Python库！

       摒弃这个Python坏习惯，让你的代码好用到起飞！

       深度盘点：字详细介绍Python中的7种交叉验证方法

       效率倍增！5个提高生产力的Jupyter notebook插件！

       +时序模型！GluonTS：一个专门为时间序列建模而设计的工具包！

       只需三五行代码即可产出完美数据分析报告，这四大AutoEDA工具包真的太棒了！

       感谢阅读，如文章对您有所启发，记得点赞和关注我们的公众号哦！

你知道什么是AST语法树嘛？你真的了解AST语法树嘛？读到最后你将对AST语法树有新的认识！

       什么是AST语法树？抽象语法树（Abstract Syntax Tree，简称AST）是源代码的抽象语法结构在计算机内存中的表现形式。它是编译器或解释器在处理源代码时所使用的一种中间表示形式。AST在编译和代码生成过程中起着关键作用。AST中的每个节点表示源代码中的一个语法构造，如变量声明、表达式、函数调用、控制结构等。树的根节点通常表示整个源代码文件，而子节点表示具体的语法元素及其关系。例如，一个函数声明的AST节点可能包含多个子节点，如函数名、参数列表和函数体等。

       为什么要了解AST？理解AST及其在编译和解释过程中的作用，可以帮助您更深入地理解编程语言、编译器和解释器的原理，从而提高您的编程能力和专业素养。

       AST是如何生成的？抽象语法树（AST）的生成通常是编译器或解释器在处理源代码的过程中产生的。生成AST的过程可以分为以下几个步骤：语法分析的方法有很多，如自顶向下（如递归下降）和自底向上（如LR）等。不同的编译器和解释器可能采用不同的算法来构建AST。生成AST后，编译器或解释器会对AST进行进一步的处理，如语义分析、优化和代码生成等。在这些过程中，AST可能会发生变化，例如节点可能被修改、删除或添加。

       JS的转换过程？在JavaScript中，使用Babel这样的第三方库来完成AST转换。通过Babel的parser.parse方法将源代码解析为AST。然后，遍历AST，查找所有的FunctionDeclaration节点，并进行修改。使用generator将修改后的AST转换回源代码。这个过程使代码转换更为灵活，实现更复杂的操作。

       AST的具体作用？抽象语法树（AST）在编程语言处理和软件工程中发挥着关键作用。它为编译器和解释器处理源代码提供了结构化的基础，用于代码分析、转换、优化和生成。AST在静态代码分析、代码转换、代码生成和代码重构中都有着广泛的应用。

       AST的具体应用？Prettier是一个流行的代码格式化工具，它使用AST对代码进行解析和转换，以生成统一格式的代码。使用AST实现的Prettier可以处理多种编程语言，如JavaScript、TypeScript、CSS、HTML等。AST还能用于实现代码重构、编辑器支持等功能，提高开发者的生产力。

       实现AST语法分析？通过编写递归下降解析器，可以为简化的JavaScript子集实现语法分析。递归下降解析器通过递归地解析源代码中的各个语法元素，构建AST。此过程结合词法分析器，用于处理简化的JavaScript子集。