四两拨千斤——你不知道的VScode编码TypeScript的技巧
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文参考:https://blog.bitsrc
如果你体验过JAVA这种强类型语言带来的便利,包括其丰富的类型变量、抽象与接口,转而使用JavaScript一定会觉得不够满意。尤其是JavaScript声明的变量Number可以轻而易举的分配给String,IDE如何执行任何类型的IntelliSense都让人十分困扰。
面对这个技术障碍,我们就无法忽视TypeScript带来的便利。相比较于JavaScript,最为明显的一点就是我们可以赋予IDE实际使用的能力, 本文将要介绍一些TypeScript的编码技巧,帮助您更加快速高效的进行工作。
创建自定义代码段
获取默认的代码段以及自定义代码段是VScode的IntelliSense功能的重要部分,代码片可以大幅缩减编写代码的时间,只需要记住使用前缀,用什么触发就可以。
通过从命令菜单中选择“插入代码段”,即可查看,该列表内容丰富,能在日常工作提供很大帮助。
另一个重要内容是添加自定义代码段。
使用方法:选择“文件” > “首选项”下的“用户代码段”(在macOS上为“代码” > “首选项”),选择代码段可访问的语言,或是全局语言。
添加自定义代码段,只需要在文件内添加一个JSON定义。
新的snippets文件就新建在了项目文件夹中,具有自定义扩展名,支持JSON的内联注释。
需要定义的内容包括:
l 名称,如果没有描述将作为IntelliSense下拉列表的一部分
l 范围,默认为全句代码段
l 前缀,作为触发片段的单词,可以定义为字符串组或值
l 主体,包含代码行列表,可以添加VScode标记,使用TAB移动
l 描述,此项为可选内容,如果不使用则在IntelliSense下拉菜单中列出的项目出现时显示其名称
上面的示例中我们创建了一个自定义代码段,当开始编写“ mylog”就会触发该代码段。有人可能对代码中console.log有疑问,但要注意还有一个预定义的变量:TM_SELECTED_TEXT,它引用当前选定的文本。因此,如果我们在选择代码时手动触发此代码段,它将将该选择封装在一条console.log语句中。
这里整理了一些开发中常用代码段的预定义变量:
l TM_SELECTED_TEXT 当前选择的文本或空字符串
l TM_CURRENT_LINE 当前行的内容
l TM_CURRENT_WORD 光标下的单词内容或空字符串
l TM_LINE_INDEX 基于零索引的行号
l TM_LINE_NUMBER 基于一索引的行号
l TM_FILENAME 当前文档的文件名
l TM_FILENAME_BASE 当前文档的文件名,不带扩展名
l TM_DIRECTORY 当前文件的目录
l TM_FILEPATH 当前文档的完整文件路径
l CLIPBOARD 剪贴板中的内容
l WORKSPACE_NAME 打开的工作空间或文件夹的名称
日期和时间的引用:
l CURRENT_YEAR 本年度
l CURRENT_YEAR_SHORT 本年度的最后两位数字
l CURRENT_MONTH 以两位数表示的月份(例如“ 02”)
l CURRENT_MONTH_NAME 月的全名(例如“七月”)
l CURRENT_MONTH_NAME_SHORT 该月的简称(例如“ Jul”)
l CURRENT_DATE 一个月中的某天
l CURRENT_DAY_NAME 一天的名称(例如“周一”)
l CURRENT_DAY_NAME_SHORT 一天的简称(例如“ Mon”)
l CURRENT_HOUR 当前小时(24小时制)
l CURRENT_MINUTE 当前分钟
l CURRENT_SECOND 当前秒
l CURRENT_SECONDS_UNIX 自Unix时代以来的秒数
动态添加有效的注释标签:
l BLOCK_COMMENT_START输出示例:JavaScript/*或HTML<!--
l BLOCK_COMMENT_END输出示例:JavaScript*/或HTML-->
l LINE_COMMENT 示例输出:在JavaScript中 //
举一些例子加以说明:
通过“ doc”,触发创建注释块,光标定位在的$1位置,如果在其中写内容并按TAB键,将跳转到position $2。
最终结果如下所示:
自定义TypeScript格式
根据个人风格和编码习惯自定义自己的编码格式
在设置窗口中,键入“ typescript.formatting ”, TypeScript提供了24种格式化选项。
可选择的范围包括:在打开和关闭字符串括号后添加空格,在函数的新行添加括号,处理分号(可选择忽略,添加缺失的括号或自动将其全部删除)。
通过此列表,我们可以自定义VSCode,使代码风格更符合个人编码习惯。完成后,通过选择命令面板上的“设置文档格式”选项生效。
易重构性强
在大型代码库上进行重构尤其麻烦,进行简单的更改(例如,将类定义从一个文件夹移动到另一个文件夹)会影响很多文件。
而VSCode提供了一组非常好用且无需进行任何额外的扩展的功能。
1.重命名现有符号
通过简单的Search&Replace可以在代码中重命名变量或类名,除非名称是其他实体的一部分,例如命名类Car,然后将其oCar作为实例的变量。如果仅打算重命名实际的类,则会导致一些问题。
VSCode简化了很多工作,我们要做的只是选中要重命名的实体之一,然后按F2(或右键单击它并选择“重命名符号”,mac的操作有些不同)。选择新名称,该过程中使用的任何地方(包括定义,如果最初未单击它的话)都将被正确重命名。
2.抽象的构建
如果不止一次使用,需要对其进行抽象。常见的重构技术是提取逻辑成为如一个函数或一个方法。
通过选择要重复使用的代码并单击其旁边的灯泡进行抽象。例如以下代码,需要提取最后两行:
选择提取在全局范围生效,输入新的函数名,将获得以下内容:
同时countCharacters功能需要一些修饰,在更复杂的用例下好处也很明显。
灯泡的菜单选项是上下文感知的,如果我们正在使用类,则还可以选择将代码提取为新方法,或将类型转换为接口,以及将单个值转换为常量。
3.简化功能签名
将过多参数通过将对象分解添加到混合中进行简化:
选择所有参数,然后单击灯泡,选择“将参数转换为变形的对象”
进一步优化,打开类型声明,然后将其转换为外部类型,可以再次选择类型定义
点击“提取到类型别名”将询问新的类型名称,它将创建该名称并将其放置在函数的签名上
进一步简化此代码
保存文件后自动操作
我们都经历过在将代码提交到存储库之前忘记格式化文件或运行linter了,而 VSCode允许我们定义在文件保存后立即执行的预设操作,这样就避免了开发的的疏漏。
设置过程是编辑settings.json器编辑文件,添加editor.codeActionsOnSave就可以在保存文件后设置要执行的操作列表,包括运行ESLint或添加缺少的导入等操作。
可以将其设置为如下数组:
“ editor.codeActionsOnSave”:[“ source.fixAll.eslint”,“ source.addMissingImports”]
同时,如果我们希望在保存文件时自动添加前面提到的格式化选项(而不是手动格式化文档),则可以将以下条目添加到我们的settings.json:
"editor.formatOnSave": true
例如,实现将分号设置为自动插入。
CodeLens计数器
VSL默认情况下不会激活CodeLens,对于大型代码库这将非常不便,这里将提供一些重构思路:
通过启用列出类,函数,类型和其他构造的实现和引用的计数器的功能,有小标记。
要启用此功能,只需在设置屏幕上查找单词“ CodeLens”。启用所有计数器。
将得到以下内容:
“3 references” 和“1 reference”是由VSCode直接添加的,一旦单击它们,将获得引用构造的代码的扩展视图(在此示例中为定义的类型):
总结:本文总结的这些TypeScript的编码技巧可以有效的提升您的编码效率,今后我们将会为您带来更多相关技巧,助力开发者。
四两拨千斤——你不知道的VScode编码TypeScript的技巧的更多相关文章
- 你好,C++(15)四两拨千斤——3.9 指向内存位置的指针
3.9 指向内存位置的指针 一天,两个变量在街上遇到了: “老兄,你家住哪儿啊?改天找你玩儿去.” “哦,我家在静态存储区的0x0049A024号,你家呢?” “我家在动态存储区的0x0022FF0 ...
- 四两拨千斤式的攻击!如何应对Memcache服务器漏洞所带来的DDoS攻击?
本文由 网易云发布. 近日,媒体曝光Memcache服务器一个漏洞,犯罪分子可利用Memcache服务器通过非常少的计算资源发动超大规模的DDoS攻击.该漏洞是Memcache开发人员对UDP协议支 ...
- 转载:四两拨千斤:借助Spark GraphX将QQ千亿关系链计算提速20倍
四两拨千斤:借助Spark GraphX将QQ千亿关系链计算提速20倍 时间 2016-07-22 16:57:00 炼数成金 相似文章 (5) 原文 http://www.dataguru.cn/ ...
- 四两拨千斤,ARM是如何运作、靠什么赚钱的
在智能手机.平板大行其道的今天,ARM这个名字我们几乎每天都要见到或者听到几次,作为编辑的我更是如此,每天涉及到的新闻总是或多或少跟ARM扯上关系,它还与Intel.AMD.NVIDA等公司有说不清道 ...
- Java压测之四两拨千斤
压测之四两拨千斤核心观念: 1.传统的http请求肯定不能用于压测,原因是请求一次,响应一次,而响应数据同时占用了客户端的带宽,故此,客户端请求后,不需要接受响应,让服务器单相思去. 2.寻找可以令服 ...
- [XSS防御]HttpOnly之四两拨千斤
今天看了<白帽子讲web安全>一书,顺便记录一下,HttpOnly的设置 httponly的设置值为 TRUE 时,使得Javascript无法获取到该值,有效地防御了XSS打管理员的 c ...
- 你不知道的 页面编码,浏览器选择编码,get,post各种乱码由来
原文:你不知道的 页面编码,浏览器选择编码,get,post各种乱码由来 asp.net页面编码和浏览器的选择编码 每个asp.net的朋友都知道,在新版本的visual studio,在没有任何设置 ...
- electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
- 【转】分享两个基于MDK IDE的调试输出技巧
我们在STM32开发调试过程中,常常需要做些直观的输出,如果手头没有相关的设备或仪器,我们可以使用 IDE自带的工具.这里分享两个基于MDK IDE的调试输出技巧. 一.使用其自带的逻辑分析仪查看波 ...
随机推荐
- IDEA如何快速查看类中的属性和方法?
在idea中,当需要快速的查看一个类的所有属性和方法时,直接去代码中查看,就显得非常的麻烦,idea是有快捷键的,可显示所有的属性和方法,方法如下. 打开一个类,使用快捷键ALT+7,就可以在左侧看到 ...
- Cannot resolve MVC View
在搭建springboot项目时报错:Cannot resolve MVC View "index" 那是因为在pom中缺少依赖 <dependency> <gr ...
- Django框架-模型层3/数据传输/Ajax
目录 一.orm查询优化 1.only与defer 2.select_related与prefatch_related 二.模型层choices参数 三.MTV与MVC模型 1.MVC 2.MTV 3 ...
- Omega System Trading and Development Club内部分享策略Easylanguage源码 (第二期)
更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 我们曾经在前文(链接),为大家分享我们精心整理的私货:"System Trading and ...
- Linux安全模型中的3A
3A Authentication : 认证 验证用户身份 Authorization : 授权 不同用户设置不同权限 Accouting | Audition : 审计 Linux 验证用户身份 U ...
- 为什么要用Spring Boot?
什么是Spring Boot? Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而 ...
- 【Azure 微服务】Service Fabric, 使用ARM Template方式来更新SF集群的证书(Renew SF Certificate)
问题描述 因证书过期导致Service Fabric集群挂掉(升级无法完成,节点不可用)一文中,描述了因为证书过期而导致了SF集群不可用,并且通过命令dd-AzServiceFabricCluster ...
- MySQL按天备份二进制日志
#!/usr/bin/env python # -*- coding:utf-8 -*- # Author:guozhen.zhang import MySQLdbimport timeimp ...
- Hadoop企业开发场景案例,虚拟机服务器调优
Hadoop企业开发场景案例 1 案例需求 (1)需求:从1G数据中,统计每个单词出现次数.服务器3台,每台配置4G内存,4核CPU,4线程. (2)需求分析: 1G/128m = 8个M ...
- 实验: survivor放不下的对象进入老年代
实验一: 存活对象包含 小于survivor大小的对象 + 大于survivor的对象 private static final Integer _1MB = 1024 * 1024; /** * - ...