【整理分享】2023年前端必备的VSCode插件

青灯夜游
发布: 2023-03-21 19:05:03
转载
2210 人浏览过

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

【整理分享】2023年前端必备的VSCode插件

前端框架


ES7+ React/Redux/React-Native snippets

该插件提供了许多速记前缀来加速开发并帮助开发人员为 React、Redux、GraphQL 和 React Native 创建代码片段和语法。image.png例如,创建一个新文件并输入 rfce 然后按回车键,这将生成一个 React 函数组件,导入 React 并导出组件。image.png

VSCode React Refactor

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

Simple React Snippets

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

image.png

Typescript React Code Snippets

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

  • 默认导出 React:

image03.gif

  • 导出 React 组件:

image04.gif

Vue Language Features (Volar)

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

image.png

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

image.png

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

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

最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!