当前位置： 首页 > 编程日记 > 正文

直接上手！不容错过的Visual Studio Code十大扩展组件

编程日记 2025-01-04 14:40:00

640?wx_fmt=jpeg


作者 | David Neal

译者 | 谭开朗，责编 | 屠敏

转载自CSDN（ID：CSDNnews）


各大平台与各种语言的开发人员都在使用Visual Studio Code，我对此感到惊讶。Stack Overflow发布的2019年开发者调查结果显示，VS Code占主导地位。我使用VS Code的主要原因是它能很好的支持JavaScript和Node.js的代码调试，并且能免费使用Visual Studio Marketplace中提供的定制化扩展组件。

然而，这里面有成千上万个扩展组件！我们怎么知道哪些是好用的呢？

一种方法是通过查看扩展组件的平均评级和下载数量来衡量其受欢迎程度。另一种方法是阅读像本文这种包含个人观点的文章。一起来看看吧！

下面是我为Node.js开发人员推荐的Visual Studio Code扩展组件。


Bracket Pair Colorizer2


我写代码是尽可能的简洁明了，并且不嵌套太多的东西。然而事与愿违，有些时候这是不可避免的。Bracket Pair Colorizer2为结对的括号提供了颜色高亮功能，便于我们直观的看出对应的左括号和右括号。

640?wx_fmt=gif


npm


npm扩展组件有两个功能：运行编辑器中webpack.json定义的npm脚本，并验证package.json中列出的文件包。

640?wx_fmt=gif

640?wx_fmt=gif


npm Intellisense


使用require()导入模块代码时，npm Intellisense组件会自发进行包提示。

640?wx_fmt=gif


ESLint


在初始化一个新的Node.js项目文件时，我要做的第一件事就是在终端安装ESLint。


npm init -ynpm install --save-dev eslint
npm install --save-dev eslint

ESLint组件会使用本地ESLint和配置规则来查找JavaScript代码中的常见模式问题，以便减少bug而编写出更好的代码。ESLint还可以重新格式化代码使其一致性更好，这取决于我们启用的规则。请确保VS Code设置了自动保存修复功能（”eslint.autoFixOnSave”: true）。
要初始化ESLint配置文件，我们可以在项目中运行此命令：

npx eslint --init

当前的.eslintr .js内容如下：

module.exports = { env: {   commonjs: true,   es6: true,   node: true }, extends: "eslint:recommended", globals: {}, parserOptions: {   ecmaVersion: 2018 }, rules: {   indent: [ "error", "tab" ],   "linebreak-style": [ "error", "unix" ],   quotes: [ "error", "double" ],   semi: [ "error", "always" ],   "array-bracket-spacing": [ "error", "always" ],   "object-curly-spacing": [ "error", "always" ],   "space-in-parens": [ "error", "always" ] }};exports = {
 env: {
   commonjs: true,
   es6: true,
   node: true
 },
 extends: "eslint:recommended",
 globals: {},
 parserOptions: {
   ecmaVersion: 2018
 },
 rules: {
   indent: [ "error", "tab" ],
   "linebreak-style": [ "error", "unix" ],
   quotes: [ "error", "double" ],
   semi: [ "error", "always" ],
   "array-bracket-spacing": [ "error", "always" ],
   "object-curly-spacing": [ "error", "always" ],
   "space-in-parens": [ "error", "always" ]
 }
};

640?wx_fmt=gif


Code Spell Checker

我不知道大家的情况怎么样，但当我发现我在代码中拼错了函数名、变量、注释或其他任何东西时，我真的很恼火。如果通篇都是拼写错误的，那是可以正常运行的，但是拼写错误仍然会让人沮丧或尴尬。
Code Spell Checker组件的出现终结了拼写错误时代！该组件很好的一个特性是可以区分camelCase、PascalCase、snake_case等。另一个很棒的特性是它有西班牙语、法语、德语、俄语和其他一些语言的词典。
640?wx_fmt=gif

Auto Close Tag（自动关闭标签）

VS Code最新版本会对HTML或XML文件自动创建结束标签。对于其他文件类型，如JavaScript、Vue和JSX，Auto Close Tag将为我们缩短某些输入。
640?wx_fmt=gif

DotENV

用环境变量来配置Node.js应用程序是很常见的。管理环境变量最流行的一个模块是dotenv。VS Code的DotENV扩展组件在编辑.env文件时添加了便捷的语法高亮显示功能。
640?wx_fmt=png

Path Intellisense

Path Intellisense组件增加了对文件路径和名称的自动补全功能，以此来降低手工输入从而减少引入与路径相关的bug。
640?wx_fmt=gif

MarkDownLint

优秀的代码和文档是相辅相成的。我更喜欢用markdown格式编写README文件或其他文档。Markdownlint组件可以帮助我们确保markdown语法的正确性。
640?wx_fmt=gif

Material Icon Theme

Material Icon Theme组件为VS Code的不同文件类型添加了多种图标。˙这样能快速区分项目中不同的文件以便很大限度的节省时间！
640?wx_fmt=png

其他权威的VSCode扩展组件（Node.js适用）

以下扩展组件没有排进前10名，但是对于Node.js开发人员来说，它们在某些场景中很有用！
  • Encode Decode——通过添加命令来快速切换文本与其他各种格式，比如Base64、HTML和JSON数组。
  • Rest Client——直接从编辑器发出HTTP请求，并在一个独立窗口中查看响应数据。非常适合测试和原型化API。
  • Better Comments——在不同类型的注释中添加高亮显示，助于创建更“人性化”的注释。
原文：
https://developer.okta.com/blog/2019/05/08/top-vs-code-extensions-for-nodejs-developers
（*本文为 AI科技大本营转载文章，转载请联系原作者）
◆
CTA核心技术及应用峰会
◆

5月25-27日，由中国IT社区CSDN与数字经济人才发展中心联合主办的第一届CTA核心技术及应用峰会将在杭州国际博览中心隆重召开，峰会将围绕人工智能领域，邀请技术领航者，与开发者共同探讨机器学习和知识图谱的前沿研究及应用。

更多重磅嘉宾请识别海报二维码查看。目前会议8折预售票抢购中，点击阅读原文即刻抢购。添加小助手微信15101014297，备注“CTA”，了解票务以及会务详情。


640?wx_fmt=jpeg

推荐阅读

  • 赌5毛钱，你解不出这道Google面试题
  • @程序员，别再自己闷头学了
  • 我用Python，3分钟快速实现，9种经典排序算法的可视化
  • 手把手教你利用爬虫爬网页（Python代码）
  • 云在物联网中的惊人优势 | 技术头条
  • 天才少年，大学创业，29 岁创立 Coinbase！| 人物志
  • 没上过大学，曾拒绝盖茨的 Offer，四代码农靠他吃饭 | 人物志
  • 狂赚320亿! 小伙建立第一个区块链国家, 国土面积7km², 自由之城诞生记
  • 小姐姐公开征婚高智商 IT 男：微信号竟要质数解密？

640?wx_fmt=png

 https://www.dkcj.cn/info/34824.html
 
相关文章：
【Qt】Qt再学习（二）：Bars Example（Q3DBars）
1、简介 Bars example显示了如何使用Q3DBars制作3D条形图，以及如何结合使用小部件来调整几种可调节的质量。该示例显示了如何： 使用Q3DBars和一些小部件创建应用程序 使用QBar3DSeries和QBarDataProxy将数据设置为图形 使用控件调整一些图形和系列属性…
编程日记2025/01/04 14:30:00
记录错误信息的行数
1.try catch 记录错误信息的时候，如果报错了，我们只能粗略估算是什么错误，但如果能够具体知道是哪行错误的话，对错误的分析就能够快速定位问题。 2.只需要记录到错误的行号，就能快速定位问题。 3.ex.stackTrace 就可以…
编程日记2025/01/04 14:20:00
android中PreferencesActivity的使用（一）
在使用android手机的时候，尤其是在操作软件设置时，我们经常见到这样的界面： 这是怎么来实现的的呢？其实android已经提供了相应的类和方法，当进行简单数据存储时（比如：软件配置参数）a…
编程日记2025/01/04 14:10:00
吴恩达团队：神经网络如何正确初始化？
来源 | deeplearning.ai编译 | 刘静转载自图灵TOPIA(ID:turingtopia)初始化对训练深度神经网络的收敛性有重要影响。简单的初始化方案可以加速训练，但是它们需要小心避免常见的陷阱。近期，deeplearning.ai就如何有效地初始化神经网络参数发表了交互式文章…
编程日记2025/01/04 14:00:00
【Qt】Qt再学习（三）：Chart Themes Example（常用图表）
1、简介 该示例中展示了各种图表以及在不同内置主题下的外观。 2、使用到的类 QChart：图表抽象类，继承自QGraphicsWidget QChartView：显示图表窗口，继承自QGraphicsView QLineSeries：折线图 QAreaSeries：面积图 QStackedBarSeries：分段条状图 QScatterSeries：散点图…
编程日记2025/01/04 13:50:00
eyoucms range 范围判断标签
【基础用法】名称：range功能：范围判断标签包括in notin between notbetween四个标签，都用于判断变量是否中某个范围。语法：{eyou:range name$eyou.field.typeid value1,2,3,4 typein}输出内容{/eyou:range}参数：name 变…
编程日记2025/01/04 13:40:00
现实迷途 第七章 特殊客户
第七章 特殊客户 注：原创作品，请尊重原作者，未经同意，请勿转载，否则追究责任。 江北一般都是上午待在办公室里，搜集信息或整理以前做过的系统，下午才出去站街招客。 站街站了一段时间后&#xf…
编程日记2025/01/04 13:30:00
BZOJ1396:识别子串(SAM)
Description Input 一行,一个由小写字母组成的字符串S,长度不超过10^5Output L行,每行一个整数,第i行的数据表示关于S的第i个元素的最短识别子串有多长.Sample Input agoodcookcooksgoodfoodSample Output 1 2 3 3 2 2 3 3 2 2 3 3 2 1 2 3 3 2 1 2 3 4 Solution 1A挺开心的省…
编程日记2025/01/04 13:20:00
【Qt】Qt再学习（四）：Editable Tree Model Example
1、简介 这个示例，展示了如何编辑项目、自定义标题以及插入和删除行和列的功能。 项视图模型的标准用法是继承QAbstractItemModel，然后重载纯虚函数：flags()、data()、 headerData()、columnCount()、 rowCount()、 index() 、parent().等； 对于可编辑项目的实现需要重载接…
编程日记2025/01/04 13:10:00
千亿级照片，毫秒间匹配最佳结果，微软开源Bing搜索背后的关键算法
【导读】随着互联网的普及，搜索成为人们最常用的基本功能之一，但这背后的秘密是什么呢？近日，微软公司介绍了他们是其如何应对用户搜索习惯的改变，并开源了支撑 Bing 搜索背后的算法。 作者 | Charlie Waldburger 译者 …
编程日记2025/01/04 13:00:00
【Qt】Qt再学习（五）：HTTP Example（HTTP下载文件的示例）
1、简介 此示例演示一个简单的HTTP客户端如何从远程主机获取文件。 2、说明 QUrl：url抽象类 QUrl::fromUserInput：从QString转换成QUrl QNetworkAccessManager：网络访问API围绕一个QNetworkAccessManager对象构造，该对象保存其发送的请求的通用配置和设置。创建QNetwork…
编程日记2025/01/04 12:50:00
面对互联网一线大厂，这些技术你需要了解！
2019 年 5 月 26 - 27 日，由中国 IT 社区 CSDN 与数字经济人才发展中心联合主办的第一届 CTA 核心技术及应用峰会将在杭州国际博览中心召开。近 500 名开发者将齐聚于此，共同交流探讨机器学习和知识图谱的技术及行业落地趋势。会议将聚焦机器学习和知识图…
编程日记2025/01/04 12:40:00
Android定制：修改开机启动画面
转自：https://blog.csdn.net/godiors_163/article/details/72529210 引言 Android系统在按下开机键之后就会进入启动流程，这个过程本身需要一些时间，而面向用户的往往是厂商定制的一些宣传用的比较绚丽的启动画面。我们在定制自己的系统时&am…
编程日记2025/01/04 12:30:00
盛大游戏卷入“沙巴克”商标之争
4月12日上午消息，沸沸扬扬的“沙巴克”商标之争再次升级，盛大游戏(微博)也被卷入其中。美国咖啡连锁企业星巴克以“商标侵权”为由将国家商标评审委告上法庭，认为其批准的“沙巴克”商标和“星巴克”近似，要求法庭复审。[/p][p23,…
编程日记2025/01/04 12:20:00
iOS开发经验总结
在iOS开发中经常需要使用的或不常用的知识点的总结，几年的收藏和积累（踩过的坑）。 一、 iPhone Size 二、 给navigation Bar 设置 title 颜色 123UIColor *whiteColor [UIColor whiteColor];NSDictionary *dic [NSDictionary dictionaryWit…
编程日记2025/01/04 12:10:00
焦虑的 BAT、不安的编程语言，揭秘程序员技术圈生存现状！
【编者按】在迭代不休的技术圈中，仅在过去的一个月期间，我们见证了有史以来第一张黑洞照片的诞生；经历了为让人义愤填膺的 996；思考了作为程序员的年龄之槛；膜拜了技术大神的成长历程；追逐了如编程语言、人…
编程日记2025/01/04 12:00:00
【Qt】Qt再学习（六）：Qt中JSON保存和加载的示例
1、简介 该示例演示如何保存和加载JSON格式文件，涉及到的类有：QJsonDocument, QJsonObject and QJsonArray. 2、说明 2.1 QJsonDocument QJsonDocument类提供了一种读取和写入JSON文档的方法。 使用QJsonDocument::fromJson()将JSON文档从其基于文本…
编程日记2025/01/04 11:50:00
H3C ER3260通过Console口重装软件修复路由器
公司在用的H3C ER3260路由器突然罢工，所有LAN、WAN口均无反应，但加电正常，初步判断硬件应该是好的，联系维修要价500，新买一个2000，于是决定自己修下看。 通过配置线连接Console口恢复出厂设置，不…
编程日记2025/01/04 11:40:00
【Qt】Qt再学习（七）：QLocalServer、QLocalSocket
1、QLocalServer QLocalServer类提供基于本地套接字的服务器。 简单的使用方法：首先创建本地服务器并监听 QLocalServer* server = new QLocalServer(this);server->listen("HelloWorld");当有客户端连接时，触发QLocalServer::newConnection信号，在槽函数中处…
编程日记2025/01/04 11:30:00
百度宣布：搜索业务总裁向海龙离职，另回购10亿美元股份
整理 | 一一出品 | AI科技大本营（ID:rgznai100）5 月 17 日，百度公布 2019 年第一季度未经审计的财务报告。本季度百度营收 241 亿元（约合35.9亿美元），同比增长15%，不计入此前宣布的资产剥离交易…
编程日记2025/01/04 11:20:00
Oracle SQL高级编程——分析函数（窗口函数）全面讲解
Oracle SQL高级编程——分析函数（窗口函数）全面讲解注：本文来源于：《Oracle SQL高级编程——分析函数（窗口函数）全面讲解》概述分析函数是以一定的方法在一个与当前行相关的结果子集中进行计算，…
编程日记2025/01/04 11:10:00
学习html5系列之比较典型的div滥用
在做网站过程过比较典型的div滥用，在很多网站中都可看到如下比较典型的div滥用情况。 div滥用情况： 网站首页新闻中心网站案例产品中心在线招聘联系我们优化后可实现相同效果： 网站首页新闻中心建站套餐产品中心关于我们联系我们 最上面的代码…
编程日记2025/01/04 11:00:00
【Qt】Qt再学习（八）：Media Player（Qt实现多媒体播放器）
1、简介 Media Player演示了一个简单的多媒体播放器，该播放器可以使用各种编解码器播放音频和/或视频文件。 涉及到的类有 QMediaPlayer、QMediaPlaylist、QVideoWidget、QVideoProbe、QAudioProbe 2、QMediaPlayer QMediaPlayer是一个媒体播放的高级类。它可以用来播放诸如…
编程日记2025/01/04 10:50:00
一次改变未来10年人生的机会
还记得陆奇在十问里说过马拉松和短跑的概念吗？你需要设计属于你自己的工作和生活节奏，一方面你可以保持高速，这个高速可以给你带来最大的效率。另一方面也需要可以应对突发变化，可以时不时的“冲刺”一下 （比如偶尔过度…
编程日记2025/01/04 10:40:00
SQL Server 2008之WaitFor
在SQL Server 2005以上版本中，在一个增强的WaitFor命令，其作用可以和一个job相当。但使用更加简捷。 看MSDN:http://msdn.microsoft.com/zh-cn/library/ms187331.aspx 语法为：WAITFOR { DELAY time_to_pass | TIME time_to_execute | …
编程日记2025/01/04 10:30:00
“搞垮” 微博服务器？每天上亿条用户推送是如何做到的
记者 | 琥珀出品 | AI科技大本营（ID：rgznai100）想必国内绝大多数网民都有新浪微博的用户账号。据最新数据显示，2018 年第四季度财报，微博月活跃用户突破 4.62 亿，连续三年增长 7000 万 ；微博垂直…
编程日记2025/01/04 10:20:00
【Qt】Qt再学习（九）：并发 QtConcurrent、QFuture、QFutureWatcher
1、QtConcurrent 该QtConcurrent命名空间提供高层次的API，使人们有可能不写使用低级线程原语的多线程程序，如互斥，读写锁，等待条件或信号。用QtConcurrent编写的程序会根据可用处理器内核的数量自动调整使用的线程数。这意味着，当将来在多核系统上部署时，今天编写的应用…
编程日记2025/01/04 10:10:00
Git——如何将本地项目提交至远程仓库(第一次)
1.（先进入项目文件夹）通过命令 git init 把这个目录变成git可以管理的仓库。 git init 2.把文件添加到版本库中，使用命令 git add .添加到暂存区里面去，不要忘记后面的小数点“.”，意为添加文件夹下的所有文件(夹)。 g…
编程日记2025/01/04 10:00:00
连接不上ftp解决方案
今天做linux下的ftp实验，总结一下解决连接不上ftp的解决方案：连接不上ftp解决方案：远程连接vsftp服务时，系统提示：用户没有权限访问。防火墙已经关闭，ftpusers和user_list文件已经删除了root用户。再使用命…
编程日记2025/01/04 09:50:00
Python3破冰人工智能，你需要掌握一些数学方法
为什么要把数学建模与当今火热的人工智能放在一起？首先，数学建模在字面上可以分解成数学建模，即运用统计学、线性代数和积分学等数学知识，构建算法模型，通过模型来解决问题。数学建模往往是没有对与错，只有…
编程日记2025/01/04 09:40:00