工程提速,Vscode插件整理
2024-07-06 05:05:44

工欲善其事必先利其器,整理一套好用的开发插件,就像是工匠在打磨自己的工具,johh要有自己的装备。

就算是差生也要文具多呢,出门在外,怎么能不整理一套属于自己的插件套装呢。

正文

以前整理过一套,但是现在毕竟是VUE3的时代了,以前整理的那一套多少有点落伍。

所以,根据新的开发习惯,重新整理一套。

通用

必装,常规的开发插件,前端开发必装。

Chinese (Simplified) Language Pack for Visual Studio Code

工具的简中插件,早年很多人非得说要适应英语,我的评价是,别逞能了,是中国人肯定还是看中文来的亲切

vscode-icons

给不同的文件对应的icon,让开发者更形象的记住所有的文件。不过,你如果只记文件后缀的话,或许不需用。

open-in-browser

在浏览器打开当前文件,几乎是传统页面独立开发的必备工具,如果你喜欢用vscode手撸html的话,那这确实是个不错的插件。

不过,为什么不直接问问神奇的webstorm呢?

Git Graph

VScode用的图形化git管理插件有不少,Git Graph和Git History都可以,二者随便选一个都可以。

GitLens — Git supercharged

可以在行内提示本行代码由谁提交,非常便利的git版本排查管控插件。

开发

必装,无论用什么框架都不影响。

Auto Close Tag

html自动闭合标签

Auto Rename Tag

html辅助修改标签,可以辅助修改闭合标签,省的开发者前后都要改一遍

Color Info

当您将鼠标悬停在CSS颜色上,会提示颜色信息

Bracket Pair Color DLW

函数方法括号颜色加深,清亮的颜色可以帮你在眼瞎的回调函数中增加发现BUG的几率,比原版的提示效果好不少

提示

必装,这些工具算是大浪淘沙留下来比较实用的提示插件。

Path Intellisense

智能路径提示,提示文件中的引用路径,必用的路径提示插件

SVG Viewer

svg预览工具,可以右键选中,预览项目中的svg,如果项目中有很多SVG的icon,那么,这个插件就是很有必要的。

filesize

可以告诉你写的文件有多大,虽然我们的代码终归会成为屎山,但是我们尽量还是要控制啊(笑)

Element Plus Helper

选择性安装,个人因为公司项目安装,此插件适用于 Vue Admin PlusVue Shop Vite 等基于 element-plus 开发的项目

格式

选择性安装,我个人是习惯这套代码格式化+检测辅助,不过这套插件推荐根据项目习惯而选择性安装的,并非是必须安装的。

ESLint

检测js标准的工具,只是一个检测和提示插件

Prettier - Code formatter

自定义代码格式化工具,是用来做格式化配置的,建议配合上边的Eslint标准使用,这是一个格式化插件

vscode-fileheader

ctrl+alt+i 快速在文件开始写注释,如果有其他更好的代码注释插件,那么没必要安装。

HTML+CSS

传统的html和CSS的开发提示支持,这套提示插件现在似乎已经被vscode内置

HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式,新版已经支持scss文件检索,也支持vue。

HTMLHint

HTML格式提示,HTMLHint 工具内置 23 条规则,可以对 HTML 代码文件进行静态代码检查,从而提高 HTML 代码编写的规范和质量。

VUE2

如果主要以vue3开发为主的话,以下这套开发插件可以避免,选择性安装。

这套插件和vue3的相关插件有一定的冲突,如无VUE2项目的开发需求,则没必要装这些插件。

Vetur

主要是为vue提供快捷语法提示,非常好用,但是不建议使用作为格式化工具

Vue 2 Snippets

基于最新的 Vue 官方语法高亮文件添加了语法高亮,并且依据 Vue 2 的 API 添加了代码补全

Vue Peek

必装,即便是vue3里边,也可以装这个插件,用于查找vue组件文件

VueHelper

vue代码提示插件,包括了vue2所有api,vue-router2和vuex2的代码提示。

VUE3

选择性安装,如果Vue3开发的倾向比较多,那么就用这套插件。

Vue VSCode Snippets

  • 提供 Vue 3 相关的代码片段,方便快速输入常见代码结构。
  • 支持 Vue 组件选项、指令、生命周期等。

Vue Language Features (Volar)

  • 提供 Vue 文件的语法高亮。
  • 支持 Vue 文件的智能感知和自动完成。
  • 提供了 Vue 文件的格式化工具。

结语

本篇文档并未有任何参考,纯粹是自己这几年开发整理出来的经验,因为个人擅长使用vue相关,所以本篇的工具更倾向于vue。

如果以后用react的话,我会考虑使再用react整一套。

Prev
2024-07-06 05:05:44
Next