2023年最新最全 VSCode 插件推荐

素颜马尾好姑娘i 2024-03-26 18:29 196阅读 0赞

Visual Studio Code 是由微软开发的一款免费的、针对于编写现代Web和云应用的跨平台源代码编辑器。它包含了一个丰富的插件市场,提供了很多实用的插件。下面就来分享 2023 年前端必备的 VS Code 插件!

00decfe3e55a4d3790fc05a43f66f835.png

前端框架

ES7+ React/Redux/React-Native snippets

该插件提供了许多速记前缀来加速开发并帮助开发人员为 React、Redux、GraphQL 和 React Native 创建代码片段和语法。

6702a02010508e9a756470dbae488c99.png

例如,创建一个新文件并输入 rfce 然后按回车键,这将生成一个 React 函数组件,导入 React 并导出组件。

710a32eae029b89ca3471738f38f2c90.png

VSCode React Refactor

这是一个专门为 React 开发人员设计的 VS Code 扩展。在处理大型项目时,重构可能很有挑战性。可以使用 VSCode React Refactor 快速重构代码,它会将 JSX 代码片段提取到新的类、组件中。此外,它还支持 TypeScript、TSX、常规函数、类和箭头函数。

Simple React Snippets

该插件提供了一组精心挑选的 React 代码片段,可以通过输入几个字母轻松地将其添加到代码中。例如,输入 imr 会将 React 导入到组件中。

f23fadbdd29a19de02ff1169b0788769.png

Typescript React Code Snippets

此插件包含了使用 Typescript 的 React 代码片段,它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等语言。以下是使用 TypeScript 创建 React 组件的两个片段。

  • 默认导出 React:

9c7d916cf73b68bbffd3662480a32dec.gif

Vue Language Features (Volar)

默认情况下,我们的 Vue 组件看起来像这样:

f7c369b1f939ef57dd66ff6e393226be.png

使用该插件可以获得漂亮的语法高亮显示、错误检查和代码格式化。并且,它还添加了很多 Vue 指令和事件处理程序,在输入时提供很好的建议。

57a235592f0e0e3c3ead8f04965a9f6c.png

volar 是专门为 Vue 3 构建的语言支持插件。它基于 @vue/reactivity 按需计算一切,实现原生 TypeScript 语言服务级别的性能。

随着 Vue 3 + TypeScript 越来越流行,Vetur(Vue 的官方 VS Code 扩展)开始出现问题,例如,将 Vue 与 TypeScript 一起使用时 CPU 使用率过高,或者不支持 Vue 3 的新

发表评论

表情:
评论列表 (有 0 条评论,196人围观)

还没有评论,来说两句吧...

相关阅读

    相关 react开发vscode推荐

    由于本人主要是做react开发,用的代码编辑器是传说中的宇宙第一前端神器[vscode][], 所以在这里记录并推荐一些本人开发过程中常用的一些vscode插件帮助开发。