直接上手!不容错过的Visual Studio Code十大扩展组件
作者 | 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为结对的括号提供了颜色高亮功能,便于我们直观的看出对应的左括号和右括号。
npm
npm扩展组件有两个功能:运行编辑器中webpack.json定义的npm脚本,并验证package.json中列出的文件包。
npm Intellisense
使用require()导入模块代码时,npm Intellisense组件会自发进行包提示。
ESLint
在初始化一个新的Node.js项目文件时,我要做的第一件事就是在终端安装ESLint。
npm init -ynpm install --save-dev eslintnpm 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" ] }};
Code Spell Checker
我不知道大家的情况怎么样,但当我发现我在代码中拼错了函数名、变量、注释或其他任何东西时,我真的很恼火。如果通篇都是拼写错误的,那是可以正常运行的,但是拼写错误仍然会让人沮丧或尴尬。
Code Spell Checker组件的出现终结了拼写错误时代!该组件很好的一个特性是可以区分camelCase、PascalCase、snake_case等。另一个很棒的特性是它有西班牙语、法语、德语、俄语和其他一些语言的词典。
Auto Close Tag(自动关闭标签)
VS Code最新版本会对HTML或XML文件自动创建结束标签。对于其他文件类型,如JavaScript、Vue和JSX,Auto Close Tag将为我们缩短某些输入。
DotENV
用环境变量来配置Node.js应用程序是很常见的。管理环境变量最流行的一个模块是dotenv。VS Code的DotENV扩展组件在编辑.env文件时添加了便捷的语法高亮显示功能。
Path Intellisense
Path Intellisense组件增加了对文件路径和名称的自动补全功能,以此来降低手工输入从而减少引入与路径相关的bug。
MarkDownLint
优秀的代码和文档是相辅相成的。我更喜欢用markdown格式编写README文件或其他文档。Markdownlint组件可以帮助我们确保markdown语法的正确性。
Material Icon Theme
Material Icon Theme组件为VS Code的不同文件类型添加了多种图标。˙这样能快速区分项目中不同的文件以便很大限度的节省时间!
其他权威的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”,了解票务以及会务详情。
推荐阅读
赌5毛钱,你解不出这道Google面试题
@程序员,别再自己闷头学了
我用Python,3分钟快速实现,9种经典排序算法的可视化
手把手教你利用爬虫爬网页(Python代码)
云在物联网中的惊人优势 | 技术头条
天才少年,大学创业,29 岁创立 Coinbase!| 人物志
没上过大学,曾拒绝盖茨的 Offer,四代码农靠他吃饭 | 人物志
狂赚320亿! 小伙建立第一个区块链国家, 国土面积7km², 自由之城诞生记
小姐姐公开征婚高智商 IT 男:微信号竟要质数解密?
直接上手!不容错过的Visual Studio Code十大扩展组件相关推荐
- 直接上手!不容错过的 Visual Studio Code 十大扩展组件
盘点最常用的十大 Visual Studio Code 扩展组件. 作者 | David Neal 译者 | 谭开朗,责编 | 屠敏 出品 | CSDN(ID:CSDNnews) 各大平台与各种语言的 ...
- 不得不爱,Visual Studio Code十大超酷特性
这大半夜的,是不是有很多码农的在熬夜奋战? 如果你最近关注了Microsoft Developer的空间,你可能会想"这是一个新的微软".如果你参加了最近的 BUILD 开发者大会 ...
- Visual Studio Code 十大效率(摸鱼)插件
- Visual Studio Code 202008 Python 扩展更新
微软发布了 8 月的 Visual Studio Code Python 扩展更新,此版本总共修复了总共 38 个问题. 主要更新内容包括: 支持多个 Python 交互式窗口 这是用户呼声最高的功能 ...
- Visual Studio 2008 十大新功能
VS2005还没有最终稳定的版本,但是我想在微软的某个办公室,一个项目组正在研究发展Visual Studio 2008这个版本.我看了一下表,现在的时间是公元2006-3-9日,离微软发布V ...
- Visual Studio Code 如何编写运行 C、C++ 程序?
本文面向初学者,但是不适合还在学写Hello World级别的初学者.阅读本文能在一定程度上了解程序编译的知识,以及使用VS Code的知识. 本文大部分内容都可从VS Code官方文档:C++ pr ...
- Visual Studio Code 如何编写运行 C、C++ 程序
转载自https://www.zhihu.com/question/30315894/answer/154979413 侵删 作者:谭九鼎 链接:https://www.zhihu.com/quest ...
- Visual Studio Code 配置 gcc
作者:谭九鼎 链接:https://www.zhihu.com/question/30315894/answer/154979413 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
- 【环境配置】Visual Studio Code 如何编写运行 C、C++ 程序?
作者:谭九鼎 链接:https://www.zhihu.com/question/30315894/answer/154979413 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
最新文章
- 机器学习(14)逻辑回归(理论)
- 新型量子计算机首个基本元件问世,扩展性更强运算速度更快
- 让 CPU 告诉你硬盘和网络到底有多慢
- Spark2.11 两种流操作 + Kafka
- 第二代商用计算机,紫光计算机第二代商用台式机上市 支持十一代英特尔酷睿...
- 怎样用MATLAB画二次函数曲线,MATLAB 二次函数的画图.doc
- SQL注入 ——sql数据库操作基础(一)
- 人类究竟有多喜欢看热闹?! | 今日最佳
- python爬虫脚本ie=utf-8_分享一个Python爬虫小脚本
- 计算时间间隔分钟_九个小技巧,玩转Excel的时间计算
- 通过jdbc的mysql驱动连接oceanbase mysql模式数据库
- Spring-01-IOC控制反转/DI依赖注入
- Pytorch tensor基础知识
- yolo系列之yolo v3【深度解析】
- 《周易》中的君子形象--http://cul.china.com.cn/guoxue/2018-06/04/content_40369049.htm
- 如何选择适合你的兴趣爱好(五十三),跳水
- ES6高级:扩展运算符,箭头函数,class类,iterator迭代器
- flash 的鼠标事件详解
- pixiv爬虫,下载关注的所有画师的所有插画----解决谷歌人机,模拟登录,SSL错误与反反爬
- unity 和安卓互相交互