当前位置: 首页 > 科技观察

让开发效率翻倍的VSCode插件

时间:2023-03-22 16:57:14 科技观察

今天给大家分享几个实用的提高开发效率的VSCode插件!1.图片预览通过本插件,当鼠标悬停在图片链接上时,可以实时预览图片。此外,您还可以看到图片的大小和分辨率。2.AutoRenameTag使用该插件在重命名HTML标签时自动重命名HTML标签的开始和结束标签。避免只修改开始标签而忘记修改结束标签。该扩展适用于HTML、XML、PHP和JavaScript。3.BracketPairColorizer使用该插件可以用不同颜色区分代码中的括号,对于括号较多的代码非常实用。该插件还支持自定义括号颜色。4.ColorHighlight此扩展可用于设置CSS颜色的样式。除了CSS之外,它还为不显示默认颜色的JavaScript、HTML、JSON等文件着色。该插件为颜色名称、RGB、RGBA和十六进制颜色着色。5.BetterCommentsBetterComments扩展可以帮助我们在代码中创建更加人性化的注释,有不同形式和颜色的注释供我们选择。6.GitLensGitLens增强了VisualStudioCode中内置的Git功能。它可以帮助我们更好地理解我们的代码,并快速了解更改代码行或代码块的人员、原因和时间。7、VSCode-IconsVSCode-Icons是一款文件图片插件,可以为项目中不同类型的文件赋予不同的图标。方便我们区分不同的文件类型。安装完成后,按照以下步骤使用:文件→首选项→文件图标主题→VSCode-Icons。8、TabnineTabnine是一款多语言插件,可以自动帮我们完成代码输入。Tabnine的目标是通过基于AI的系统提高开发人员的生产力。9.ProjectDashboardProjectDashboard是一个项目仪表板插件,可以将经常访问的文件夹、文件等固定到仪表板,以便快速访问。10.CodeSnapCodeSnap是一款代码截图插件,只需在项目中选中相应的代码段,即可快速创建代码截图。11.CSSPeekCSSPeek插件可以让我们在HTML中选中一个class或者id名称,按住Ctrl键+鼠标左键可以直接定位到该名称的CSS位置。12.PathAutocompletePathAutocomplete提供自动路径补全,让你不必记住那些长长的文件路径。13.AutoCloseTagAutoCloseTag插件用于自动完成HTML结束标签。14、VeturVue是Vue.js开发必备的插件,它为Vue.js提供了有用的工具,如调试、错误检查、语法高亮、代码片段等。15、IntelliCodeIntelliCode旨在帮助开发者提供智能代码建议.它默认支持Python、TypeScript/JavaScript、React和Java。IntelliCode通过将最有可能被使用的代码放在列表的顶部来节省时间。IntelliCode建议基于GitHub上数以千计的开源项目。16.ImportCast此插件用于在编辑器中内联显示导入包的大小。此扩展使用webpack来检测导入包的大小。17.BeautifyBeautify可以帮助我们把代码格式化得更漂亮。它支持流行的语言,如JavaScript、JSON、CSS、Sass和HTML。18.CodeTimeCodeTime可以计算我们使用VisualStudioCode的时间,提供多种数据指标。19.SettingsSyncSettingsSync用于将VisualStudioCode的设置保存在GitHub上,方便在其他电脑上使用,例如关于扩展或系统设置的信息。这个插件可以很容易地为许多不同的机器设置,而无需打开以前安装的扩展和相关设置。20.LiveShareLiveShare帮助团队中的开发人员实时共享程序中的代码,以便于编辑和调试程序,例如共享调试会话、终端实例、localhostweb应用程序、语音调用等。21.CodeSpellCheckerCodeSpellChecker可以帮助我们检查单词是否存在拼写错误,检查规则遵循驼峰命名法(驼峰命名法)。22.ErrorLensErrorLens是一个突出显示代码检查(错误、警告、语法问题)的插件。ErrorLens通过使诊断更加突出、突出显示语言生成诊断的整行并在代码行的位置逐行打印诊断消息来增强语言的诊断能力。23.ES7React/Redux/GraphQL/React-NativesnippetsReact/Redux/ReatcNative/react-router语法智能提示,React开发者必备。借助此代码片段,您可以轻松创建基于类的组件、功能组件。24.RESTClientRESTClient允许直接在VSCode中发送HTTP请求和查看响应。它是VSCode的Postman,可以轻松集成到代码编辑器中。REST客户端同时支持REST和GraphQLAPI。25.JavaScriptBoosterJavaScriptBooster通过分析代码及其上下文自动建议快速操作以重构或增强代码。它支持来自重构条件、声明、函数、TypeScript、promises、JSX等的多种代码操作。26.LiveSASSCompilerLiveSASSCompiler扩展可以将SASS或SCSS文件实时编译或翻译成CSS文件。27、Remote-SSHRemote-SSH可以使用任何带有SSH服务器的远程机器作为开发环境。由于扩展直接在远程机器上运行命令,它允许快速操作远程服务器,而无需将源代码放在本地机器上。28.DebuggerforchromeDebuggerforChrome是微软开发的一个插件,可以让我们在VSCode中调试JS代码。您可以设置断点、逐步执行代码、调试动态添加的脚本等。它有助于在开发过程的早期检测错误。29、npmIntellisensenpm安装包后,提供插件whenrequire得到智能提示,npm模块自动填入import语句。30.LiveServerLiveServer是一款具有实时加载功能的小型服务器,您可以在项目中使用live-server作为实时服务器,实时查看开发的网页或项目效果。它通过静态和动态页面的实时重新加载启动本地开发服务器,通过在状态栏中单击来启动或停止服务器。