在Visual Studio Code中安装加速TypeScript程序开发的插件

在Visual Studio Code中安装加速TypeScript程序开发的插件

Install Extensions on Visual Studio Code for TypeScript Application Development

By Jackson
2023-11-28

众所周知,微软的Visual Studio Code是一款轻量级、功能强大的集成开发环境。它支持各种编程语言,像C/C++,Java, Python, JavaScript, TypeScript, PHP, Rust, Ruby, Go, Kotlin, Bash等等。同时,利用其自带的mareketplace,可以找到功能强大的各类插件以丰富Visual Studio Code的开发功能。

为了加强TypeScript开发,笔者建议安装一些必要的、非常有效的Extension(扩展),也就是通常所说的插件。

打开Visual Studio Code,通过点击Extensions (或者按组合键 Ctrl + Shift + X),打开marketplace搜索栏,在此安装您喜欢的Extension吧。

1. TypeScript Extension Pack

这个插件包含了一些最常用、最流行的TypeScript功能插件,安装好后无疑会对TypeScript开发铺平了道路。
在这里插入图片描述

2. JavaScript and TypeScript Nightly

功能是启用TypeScript Nightly主题,作为VS Code的内置TypeScript版本,同时支持JavaScript和TypeScript IntelliSense。

在这里插入图片描述

3. ESLint

功能是集成ESLint JavaScript到VS Code。

在这里插入图片描述

4. Quokka

Quokka.js 是一个开发人员生产力工具,用于快速 JavaScript / TypeScript 原型(prototype)设计。当你键入代码时,运行时值会更新并显示在 IDE 中的代码旁边。

在这里插入图片描述

5. Live Server

功能为对HTML页面在本地服务器(localhost)上的静态页面重载。当完成HTML页面内容时,用鼠标右键单击,在右键菜单上点击Live Server,能够快速激活该页面的显示效果(Web服务器默认在本地主机)。

在这里插入图片描述

6. Open in Browser

功能为在默认浏览器中打开当前的HTML文件。当需要浏览网页时,右键单击该HTML文件, 在右键菜单中选择单击Open in Default Browser,即用默认浏览器打开页面。

在这里插入图片描述

7. TypeScript Import Sorter

功能是根据提供的配置对TypeScript导入(import)进行排序。配置默认值遵循 ESLint 排序导入规则。配置支持正则表达式函数设置排序优先级和规则。只要两者的配置设置一致,该扩展就可以与prettier一起使用。

在这里插入图片描述

8. Docstrings

功能为生成、保存和维护文档字符串并将README保存和持久化文档字符串。这一功能需要有效订阅才能生效。

在这里插入图片描述

9. Auto Close Tag

功能为自动添加HTML/XML关闭标签。该插件目前下载量达到
例如:在输入< div> 时,输入完最后一个尖括号>时,会自动添加对应的闭合标签< /div>。

在这里插入图片描述

10. Auto Rename Tag

功能为自动重命名成对的HTML/XML tag(标记)。
例如,将< div>< /div>标签重命名为标签时,只需修改第一个div标签名称为span,后跟的div标签也会自动跟着改成span。
在这里插入图片描述

11. Color Highlight

功能为对CSS/web中的颜色值高亮显示。

在这里插入图片描述

12. vscode-icons

用于Visual Studio Code的图标。当使用Visual Studio Code打开项目时,会根据项目中文件类型显示该文件对应的图标。

在这里插入图片描述

13. Rainbow Brackets

功能是高亮显示代码中匹配的各种括号,并以不同颜色匹配显示,像彩虹一样丰富视觉效果。

在这里插入图片描述

本文简要介绍了在marketplace能够找到的,对TypeScript开发有极大帮助的Extensions(扩展),这些也成为插件的组件,将使TypeScript开发工作高效有趣,事半功倍。

技术好文陆续推出,敬请关注。

喜欢就点赞哈,您的认可,我的动力!😊

相关阅读

  1. JavaScript 编程基础 - 布尔值
  2. JavaScript 编程基础 - 对象
  3. JavaScript 编程基础 - 函数进阶
  4. JavaScript编程基础 - 条件语句
  5. JavaScript编程基础 - 函数入门
  6. JavaScript编程基础 - 变量
  7. JavaScript编程基础 - 输出

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/229022.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SystemVerilog 入门

文章目录 包定义SystemVerilog 数据类型结构体 SystemVerilog 过程块可嵌套模块接口 System Verilog 的优点 提高了硬件建模能力、编码效率和抽象能力&#xff1b;RTL 级、系统级行为描述&#xff1b; 增强了验证能力和为大规模复杂设计编写有效、无竞争测试程序的断言功能&am…

webpack如何设置兼容浏览器的范围​browserslist

Browserslist 是前端工程化不可或缺的工具&#xff0c;无论是处理 js 的 babel 还是处理 css 的 postcss&#xff0c;他们背后都有Browserslist 的身影。 一、如何查看查看所有浏览器和它的市场占有率 我们如何知道现在的浏览器那些被废弃、那些市场占有率高&#xff0c;可以…

mysql 性能排查

mysql 下常见遇到的问题有&#xff0c;mysql连接池耗尽&#xff0c;死锁、慢查、未提交的事务。等等我们可能需要看&#xff1b;我们想要查看的可能有 1.当前连接池连接了哪些客户端&#xff0c;进行了哪些操作 2.当前造成死锁的语句有哪些&#xff0c;是哪个客户端上的&#x…

dcat admin日志扩展 dcat-log-viewer 遇到的问题记录

扩展地址&#xff1a; https://github.com/duolabmeng6/dcat-log-viewer 问题描述&#xff1a; 使用很简单&#xff0c;直接安装扩展包&#xff0c;开启扩展就可以了&#xff0c;会自动生成菜单。 之前在别的系统用过&#xff0c;没问题&#xff0c;今天在一个新的系统用的时…

肖sir__mysql之单表练习题2__(2)

mysql之单表练习题 一.建表语句 create table grade(class int(4),chinese int(8),english int(4),math int(8),name varchar(20),age int(8),sid int(4)primary key auto_increment) DEFAULT charsetutf8; insert into grade(class,chinese,english,math,name,age)values(1833…

导致Facebook广告投放不成功的原因

Facebook是全球最大的社交媒体平台之一&#xff0c;也是众多跨境卖家选择广告投放的首选平台&#xff0c;但也还是会有很多跨境卖家在Facebook上推广效果不佳。那么本文小编讲一下导致Facebook广告投放不成功的原因以及相应解决方法。 1、受众群体太少 Facebook有个要求就是广告…

Programming Abstractions in C阅读笔记:p202-p234

《Programming Abstractions in C》学习第65天&#xff0c;p202-p234总结。 一、技术总结 完成第五章学习&#xff0c;第五章介绍递归在实际问题中的进一步应用&#xff0c;例如汉诺塔问题&#xff0c;数学中的排列问题&#xff0c;更有难度。使用递归解决问题时有时候需要借…

业务建模工具BPMN

目录 一、什么是BPMN 二、业务流程梳理的重要作用 三、BPMN的全图 四、BPMN的组成 1.BPMN的基本元素&#xff08;2.0&#xff09; 1.1 流对象&#xff08;Flow Objects&#xff09; 1.2 数据&#xff08;Data&#xff09; 1.3 连接对象&#xff08;Connecting Objects&a…

Leetcode—1670.设计前中后队列【中等】

2023每日刷题&#xff08;四十三&#xff09; Leetcode—1670.设计前中后队列 实现代码 erase(iterator position)在删除vector中的元素后&#xff0c;会将该元素的后面所有元素都往前挪一位。因此&#xff0c;原先的迭代器指向的元素就不是原来那个了&#xff0c;而是它的后…

0 NLP: 数据获取与EDA

0数据准备与分析 二分类任务&#xff0c;正负样本共计6W&#xff1b; 数据集下载 https://github.com/SophonPlus/ChineseNlpCorpus/raw/master/datasets/online_shopping_10_cats/online_shopping_10_cats.zip 样本的分布 正负样本中评论字段的长度 &#xff0c;超过500的都…

命令模式 rust和java实现

文章目录 命令模式介绍javarustrust仓库 命令模式 命令模式&#xff08;Command Pattern&#xff09;是一种数据驱动的设计模式。请求以命令的形式包裹在对象中&#xff0c;并传给调用对象。调用对象寻找可以处理该命令的合适的对象&#xff0c;并把该命令传给相应的对象&…

git打tag和版本控制规范

我们在开发中经常会遇到要打tag的情况&#xff0c;但这个tag应该如何打呢&#xff1f;我不知道大家平时是怎么打的&#xff0c;但我基本就是从1.0.0开始进行往上递增&#xff0c;至于如何递增&#xff0c;基本凭感觉。今天同事新打了一个tag进行发版&#xff0c;然后被架构点名…