V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 96 天前的主题，其中的信息可能已经有所发展或是发生改变。

分享下最近前端圈特别好用的 vscode 插件：（插件根据个人喜好选择，希望能帮助到大家😊，如果有好的建议或者遇到的问题可以提一下 issue ，作者会在空闲之余极力的给予解决的），如果我的插件帮助到了你，可以考虑赞助我一杯咖啡，留下你的 github username ，作为感谢会被我记录到sponsor list中，另外后续的新插件考虑会针对 sponsor 有优先使用权和解决问题的优势😊

作者：Simon He

To Ts Type
- 解决项目中全都是 any 的问题，有些时候很讨厌自己去定义类型，这个插件可以将定义的数据复制完，通过快捷键转成 TS 的类型，好处是可以根据当前的位置生成对应形式的类型，比如我是ref({}),在 ref 后使用快捷键会自动处理成ref<xxx>(),在变量后会处理成: xx ,在空白行则会变成type IType = xxx，比如const a = [123,'123'] 会被处理成(number | string)[]基本可以解决大部分的场景，有一些数据未能体现的可以再基础上调整都是比较方便的

File Name Detection
- 偶然发现推上有人说，我排查了好久的 bug 原因是因为文件名前面有一个空格，所以写了这个插件，在你新建或者修改文件名时，检测文件名中是否有空格或者零长字符，给出一个警告并且可以快速自动修复这个文件名～

fast-jump
- 这个插件真的超级好用，我最近在改 vben 的时候发现，我要看组件里的内容时候，我总是点了模板然后跳到下面的导入的 components 然后点了 components 名再跳到 import xx from ，然后我再点 from 的链接，进入到一个被封装的 ts 文件然后再点到对应的.vue 文件，我找一个组件我要经历 5 ～ 7 步才可以到达，那也太痛苦了吧，于是我写了这个插件一步直达目的地

export-what
- 当你 hover 到一个链接时候，他会告诉你这个模块中暴露出了什么函数，只支持 esm 形式，并且在你 import 里面的模块时，会自动提示所有能导入的依赖，当你不记得自己写的文件中有哪些函数可以使用的时候，不必在跳转到那个文件夹再切回来了，另外一些外部的依赖的类型可能都是需要跳好几次才能知道有什么函数，这个插件会递归到所有被导出的依赖

vscode-care
- 为您保驾护航，在 vscode 中提醒你不要那么卷，提醒你喝水、吃饭、下班、特殊节假日，另外会有一些有意思的警告。

auto-click
- 提供非常简便的自动选中功能，比如鼠标单击到文本中，如果你 500 毫秒内未有其它操作，会自动选中左右区域可连贯的文案，很多时候默认的点击效果打不到我的预期，比如<a-text>,双击永远只能选中 a 或者 text ，三击就选中整条文案，这个插件只需要单机自动选择 a-text ，如果你只想选中局部，你可以通过鼠标拖拽或者左右键的移动，此时插件是不会再次干涉，主要是简化拖拽或者点击操作的频率

vscode icones
- 将icones的网站页面以 webview 的方式直接在 vscode 中打开，这样你就不用脱离 vscode 去粘贴 icones 的代码和下载 icon 了

vscode yesicon
- 同样是一个 icon 网站，阮一峰老师推荐过，里面聚合了 icones ，并且里面的 icon 已经超过了 18w

vscode tailwind magic
- 针对 tailwindcss 中自定义的样式需要用w-[10px]包裹，为了实现和 unocss 一样舒适的写法w10px,才产出的插件，并且他甚至超越了 unocss 的写法，更加灵活简单，结合官方的 Tailwind CSS Intellisense 效果更好哦～

to tailwindcss
- 提供了 css 转换成 tailwindcss 的能力，可以 hover 到 css 显示对用 tailwindcss 的写法，对于初次使用 tailwindcss 是绝佳哦

Unot
- 提供了 unocss 的代码提示和将 css 转换成 unocss 的能力和更加简化 unocss 写法的转换能力,比如默认从原型图粘贴背景色#ffff，或者rgba，你需要自己特殊处理缩紧和用[#fff]包裹，然后这个插件开启后，可以直接写bg#fff 和 bg-rgba(10, 20, 30, .1)，他在保存后会转换成 unocss 可识别的语法，大大提高了开发效率

common intellisense
- 他提供了大量频繁使用的组件库的代码提示，他会让你在使用这个 ui 组件时，享受到丝滑的体验，你的一个空格就能提示这个组件上的属性，并且处理过滤了已经写好的属性，包括 vue 中的事件@xxx，当你输入@，就会提示组件上暴露的事件，并且你如果用到组件实例的 ref ，他会在你使用xxx.value.的时候提供实力的方法和对应的描述和参数，如果你不知道这个组件该怎么使用，他在属性上敲击空格会有一个 vscode 内部打开的官方文档，直接在 vscode 上查文档粘贴代码，带给你最舒适的开发体验
  目前已经支持了
  - vant 4
  - element 2
  - antd 4 、5
  - antdv 4
  - varlet 2
  - naive 2
  - primevue 3
  - quasar 2
  - @nextui-org/react 2
  - @nuxt/ui 2
  - vuetify 3
  - radix-vue 1
  - next-ui 2
  - arco-design/web-react 2
  - arco-design/web-vue 2

vscode emoji
- 当你书写 md 文档时候，你可能想加入一些 emoji ，这个插件在你输入:,会提供 emoji 搜索的功能

log
- ctrl+l，生成 log 日志，展示 log 位置和行数，并且可以选中变量，直接输出，另外他是直接 go 和 rust 中使用

vscode json structure
- 针对 json 格式的数据，嵌套层级比较深时，不利于查找对应父节点，他会 hover 到该层级时候，提供顶层如何能够获取到该层级的对象形式

Vitesse Theme Colorful X
- 基于 vitesse theme 调整的样式，可以尝试换换主题

Material Icon Theme Simon
- 基于 Material Icon 按照自己的喜好调整了个别 icon 图标和对比度

vscode script
- 一个仓库代码脚本执行选择器，如果终端已经执行过该条命了，再次点击会复用，可以直接跳转到对应路径，支持 monorepo 和 learn 模式

function-quick-locking
- 最近在推上看到有人在卖这个类似功能的 vscode 插件，我觉得对于 vue2 的 export default 使用的话确实是能带来一定的便捷，就简单实现了一个，能够列出当前的 methods 、computed 等等的数据，当然是支持 setup 的，目前支持了 vue 、js 、ts ，可以体验一下，对于老项目几千行代码，去查找一个函数可能搜索能搜到一大片，使用这个快捷跳转到指定方法，能带来一定的便利，新增了在 vue2 中 template 中按住option+方法名，直接跳转到对应 methods 的方法中

vscode-alias-jump
- 因为遇到 webpack 中一下路径跳转没有高亮跳转不了的情况，写了这个插件，需要配置 tsconfig 或者 jsconfig ，解决了一下 css 路径无法跳转和 alias 别名 @开头的路径跳转问题，还有一些组件导入省略.vue 导致的组件跳转问题

vscode-css-selector
- 组件中的 class 类在底部 style 中输入.或者#时，会提示当前 template 定义的 class 或者 id

vscode-transfer
- 一个比较好用的转换工具，可能一些 css 需要被动态转换成:style 语法或者驼峰和 hyphen 之间相互转换，或者字符串的大小写，不规则的 json 转换成 json

generate variable names
- 一个变量命名的工具，可以给到一个中文，会有比较多的组合变量名提供选择

vscode-unocss-highlight
- 提供 unocss 样式的高亮背景，可以针对自己比较关注的样式突出样式，比如我比较关心width 、height 、position相关的，我会突出这些以便我在修改查找时更加方便

Vscode Tailwind CSS Highlight
- 提供 tailwindcss 样式的高亮背景，可以针对自己比较关注的样式突出样式，比如我比较关心width 、height 、position相关的，我会突出这些以便我在修改查找时更加方便

vscode-open-pkg
- 快速查看第三方 npm 依赖包的主页，对于某些依赖想去看一下它的文档或实现，能够快速的打开

fast-create-variable
- 比如在 vue ，可以在.vue 文件基于当前 vue2 或者 vue3 的语法，快速的创建 ref ，computed, methods, function, watch, reactive ，极致的偷懒专家😂，解释一下这个插件的作用，正常我们写代码，是先去写 template ，比如 el-input 然后写 v-model 或者 @click 等事件，然后再去顶部去定义 ref ，或者 function ，通过这个插件可以直接在 js 逻辑生成对应的变量或者方法，然后你再去根据你的需求去初始化变量值和补充 function 逻辑即可，会节约你很多的时间，和初始化变量的 coding 负担。
  已经支持
  - vue
  - jsx ｜ ts (react)
  - svelte