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

干货满满!25个很棒的VSCode扩展,体验便捷高效的生活

时间:2023-03-21 14:43:19 科技观察

来源:Unsplash最强大的营销策略之一:帮助人们在知道自己需要什么之前就意识到他们需要什么。这一点,VSCode心知肚明。VSCode可能是目前最流行的代码编辑器,因为它满足了每一个开发者的需求,甚至是开发者自己都不知道的需求。这就是VSCode的独特魅力。VSCode是为现代技术而创建的,因此大多数VSCode爱好者都是JavaScript开发人员。当前流行的JavaScript框架已经非常适合VSCode,它拥有您需要的一切。技术日新月异,在选择文本编辑器时,一定要选择最新最好的。好的开发人员不能浪费他们的时间。但这并不是说您应该切换到另一种语言或另一种框架。正如笔者在之前的博客中一直强调的,开发者要紧跟潮流,保持敏锐,了解最新信息,与目前使用的工具进行对比,了解差异和优缺点,观察其支持和稳定性至关重要到社区的发展。这将大大提高您的工作效率。来源:unsplashVSCode拥有庞大的开源社区,其发展和潜力是无限的,本文将向您介绍25个最佳VSCode扩展。1、Auto-CloseTag需要有VCSCode扩展。编写代码已经很困难了,有了VSCode扩展,你不需要仅仅因为缺少结束标记(

)就发现错误。VSCode扩展可以自动添加您刚刚添加的开始标签的右括号,然后将鼠标光标放在标签之间。是不是很酷?2.VisualCode集成终端将命令/终端放在VSCode编辑器中,不仅可以让工作更轻松,还可以节省空间。有了VSCode,您的终端就派上用场了。3.ESLint/TSLint这个扩展的主要功能是自动格式化代码,以实现整个团队的格式化一致。ESLint还可以配置为自动格式化代码,每当出现问题时发出一连串警告。数以百万计的下载不是免费的~4.如果您的母语不是英语,甚至可能不是第二语言,代码拼写检查器对于避免代码中的拼写错误非常有帮助。无论您的英语是否流利,拼写错误都是不可避免的——人们不想花时间寻找拼写错误,尤其是在面对长代码时。5.SettingsSync这个扩展在使用多台机器时会有很大的帮助。设置同步允许所有计算机/笔记本电脑根据visualstudio的设置进行同步。同时使用办公室计算机和家庭计算机的开发人员基本上会在不同的地点工作。手动更改两端的设置非常耗时,因为您需要根据正在处理的项目不时更改设置以减轻编程压力。建议使用此扩展程序,以便所做的所有更改自动同步到PC和工作站点。6.BracketPairColorizer支架可能是一个痛苦的来源,尤其是在处理大型项目时。使用长代码时情况更糟。BracketPairColorizer将有效缓解这种压力。对于大量嵌套的长代码,尤其是在使用Javascript时,几乎不可能确定哪些括号相互匹配。此工具有助于更轻松地找到开口和闭合,并且颜色编码的括号对将使代码更具可读性。立即下载!7、Prettier之前提到过ESLint,可以自动格式化连续代码,并显示警告和错误。作为React/Native开发者,保持代码整洁干净是很有必要的。首要的是正确缩进和分隔,以提高代码的可读性,尤其是在处理编写了很长时间的代码时——样式、函数和处理程序的分隔非常重要,不仅是为了您的方便,而且为了您的方便同事。设置起来非常简单,点击保存就会自动格式化。8.PathIntellisense这个扩展是笔者常用的VSCode扩展之一。它节省了很多时间。作为一名前端开发人员,我经常健忘并使用大量组件、扩展和包,尤其是在使用React格式化时,所以我需要一些有助于文件路径的东西。在大型项目中工作很麻烦,pathIntellisense将是您的得力助手。尝试在引文中输入路径时,IntelliSense会自动填写或显示建议。PathIntellisense还可以帮助自动完成所有隐藏文件。9.BrowserPreview这个扩展对于前端开发者来说是必不可少的。无需在Chrome中打开另一个窗口来查看您在代码中所做的更改,下载此浏览器以预览并在VSCod中完成所有工作。该扩展程序会显示代码的浏览器预览,因此您无需在浏览器上打开选项卡即可查看细小的更改,从而节省时间和空间。10.Chrome调试器这是我最喜欢和最常用的VSCode扩展。作为一名前端Web移动开发人员,DebuggerforChrome为我提供了很大的帮助。尤其是对于JavaScript开发者来说,它可以节省大量的时间进行小的改动,有助于快速查找和解决bug,对调试有很大的帮助。控制台可以很好地帮助找出错误来自哪些行和功能,甚至可以查看其数据处理。11.MaterialIconTheme可以通过这个扩展为文件列表选择漂亮可爱的图标。如果文件是JavaScript,则在文件名旁边的材料样式中将有一个JavaScript图标。如果你从事视觉开发,那么这个扩展是完美的。12.Javascript(ES6)CodeSnippets如果你是一名JavaScript开发者,Javascript(ES6)CodeSnippets将是你最好的帮手。无论您使用什么JavaScript框架,此扩展都会有所帮助。如果只是一遍又一遍地键入相同的泛型代码,效果不是很明显。代码片段很方便,是一个轻量级的库扩展,可以绑定任何标准的JavaScript调用,因此只需键入快捷代码,即可看到自动输入到编辑器中的整个通用代码。该扩展不仅支持JavascriptES6,还支持Typescript、Reactjs、Vue和HTML。13.LiveServer在使用LiveServer时,这个VSCode扩展会帮助打开当前项目的LiveWeb服务器。通常这项工作可以使用Webpack这样的构建器来完成,但这种扩展显然更高效。只需右键单击并打开即可运行实时服务器,其余的将自动完成。14.Github扩展如果你正在使用Github作为项目仓库,或者想使用其他开发者的源代码仓库,那么这个扩展就是为你量身定做的。顺便说一下,Github现在由微软拥有和管理,所以Github和VSCode现在都是微软的产品之一。使用Github扩展,您可以轻松连接到其他开发人员的存储库、最喜欢的开发人员的存储库,甚至是您自己的存储库。如果你经常使用Github,切换存储库将非常方便。15.GitLensGiltens是另一个有用的扩展。它扩展了当前的VSCodeGit功能,能够同时执行以前提交和更改的代码比较,以及其他很酷的功能。16.NPM所有现代开发人员都知道NPM是什么以及它为何如此重要。节点包管理器是管理包.json文件的扩展。如果未安装必需的依赖项以及NPM包的版本控制,它会警告您。我处理的大多数错误和错误都来自于使用NPM包、功能和特性,这些包、功能和特性因为与其他包不兼容而不起作用。如果没有它需要的依赖的兼容版本,那真是梨花带雨啊!17.BeautifyBeautify是另一个很好的代码格式化扩展,和前面提到的Prettier几乎一样,但是效果更漂亮。到目前为止,它已经有近1200万的下载量,我还能说什么呢?它可以格式化用Javascript、JSON、Sass、CSS和HTML编写的代码。18.LiveSassCompiler如果你喜欢Sass风格,或者你恰好在使用Sass只是因为它是项目应用需求的一部分,那么这个VSCode扩展就是为你准备的!它将SASS/SCSS文件实时编译成CSS文件,并自动在应用程序或浏览器中提供编译样式的实时预览。19.Emmet从笔者开始使用VSCode开始,我就一直在使用Emmet。它可以帮助开发人员更快地编写代码。使用扩展程序很短时间后,我离不开它。20.VSCodeIcons这是面向前端开发人员的VSCode扩展。类似于前面提到的材料图标,但设计不同。前端开发人员通常喜欢可视化,对吧?此图标有助于查看文件类型,无论它们是HTML、CSS、Javascript还是其他类型。21.ColorPickerColorPicker扩展有助于轻松选择CSS文件中的颜色。它将立即反映或应用于当前正在处理的属性。如果您更喜欢使用RGBA颜色,也可以使用它。22.QuokkaQuokka被称为JavaScript开发人员的现代便签本。它旨在帮助开发人员进行代码检查。这是一个完美的解决方案。与其他VSCode扩展相比,它非常轻量、高效且功能强大,有助于加快工作进程。同时,它是实时的,可以即时反馈。它可以为每个结果匹配固定的颜色类型,使开发人员更容易理解代码。23.LiveShareLiveShare是VSCode文本编辑器中最高级的功能之一。与团队成员一起工作时无可挑剔。LiveShare的一个特点是允许每个开发人员与其他开发人员实时共享代码片段。这是完美的,有助于提高团队合作的效率和生产力。LiveShare允许即时共享当前项目,即使在调试时也是如此。协作者不需要安装任何存储库、sdk或任何东西来连接其他开发人员的当前代码。团队中的每个人都可以协作以远程探索和解决问题。24.ES7、React、Redux和GraphQLSnippets高级开发人员目前正在使用JavaScript框架(例如React)以及与生产和复杂应用程序兼容的其他技术。这个扩展是为他们量身定做的。重复输入标准代码效率低下。借助这段代码片段,您可以轻松创建基于类的组件、功能组件、输入项、生命周期方法等,只需键入快捷代码,这是我使用最多的扩展之一,因为我一直在使用Reactjs和ReactNative。25.RESTclient另一个高级工具是Restclientextension,在使用其他第三方工具和API时会有很大的帮助。还有助于轻松发出HTTP请求。这个扩展使得直接在代码编辑器中调用和关闭变得很容易,这节省了大量时间——你可以使用这个方法而不是仅仅为了完成一个请求而来回切换浏览器或邮箱。来源:unsplash无论你是追求效率还是寻求体验,你都会在这里找到满意的答案。