VSCode插件开发急速入门

导读:目前网络上可以随意查到各种VSCode插件的相关文章,但往往有一些特殊的功能需求找不到合适的插件。那么不如自己开发一个插件吧,打造一把称手的兵器! VSCode (全称:Vistual Studio Code) 由 Microsoft 出品,其具备启动快速、稳定性好、占用内存较小、插件越来越丰富、社区活跃等特点,目前是个人和团队中很多小伙伴的主力代码编辑器。 下面直奔主题,本文你将了解简单的 VSCode 的插件开发入门,感兴趣的同学可以继续阅读。 以下文中提到的“插件”均为 Vistual Studio Code 的插件,Vistual Studio Code 也简称 VSCode 环境准备 nodejs [1] 建议使用 LTS 版本,截止发文 v8.11.3 npm [2] 建议最新版本,截止发文 v6.1.0 yeoman [3] npm install -g yo generator-code [4]npm install -g generator-code 做好上面的环境准备,正式进入开发,下面我会以自己刚做好的一个查询北京地区空气质量为例子,继续介绍(安心してください,代码很少,很好入门)。 数据准备 下面补充一下我们的例子的功能,首先明确我们要获取城市的 AQI(空气质量)信息,网络上可以搜索到直接调用 API 或者 SDK,笔者目前使用的京东云的一个产品京东万象中的一个天气免费 API[10], 注册实名认证后可以获得一个调用应用的 KEY,便可以获取天气数据了。更多其他方面的 API 读者可以自行探索。 笔者使用的 […]

Webpack4 实战 React 和 Vue 项目

最近一直在参与小组内“造轮子”(具体内容另寻机会再详说)在开发的过程中,了解并且学习到 Webpack v4 的一些内容,趁记忆还深,汇总成文。 导读:本文你将 Get 到使用 Webpack 4 从零开始分别搭建 React 16 和 Vue 2 项目,同时还有基于 Webpack 4 的一些开发和生产环境配置经验,感兴趣同学可以继续阅读。 使用 Webpack 作为关键词在 Google 可以搜索到很多相关的文章,网上文章也是针对各自项目和某些情况的具体方案或者介绍说明,本文也不例外,并没有覆盖到所有项目,只是介绍分享造轮子过程中积累的 4.0 版本的个人实战经验。 PS. 前半部分较为基础,有一定经验的同学可以直接跳过阅读后半部分实战内容。 以前也翻译过两篇关于 Webpack 的文章,感兴趣的同学可以点击下面链接查看:!!! 强烈推荐 !!! 【译】Google 出品 – 利用 webpack 做 web 性能优化 【译】Webpack 4 mode and optimization Webpack 4 从“零”开始 相信提到 Webpack 无论是作为前端工程师,还是 Web 开发者都不会太陌生,它从诞生伊始就收到社区的追捧和大量的生产实践,大量的项目代码构建工具开始选择它作为主力构建工具,究竟它是什么样工具, 官网是这样描述的: […]

深入分析Date构造函数问题及解决方法

问题描述 近期在封装时间选择组件的单元测试时,为了构造出Date对象,直接使用了默认Date构造函数, 自己本地开发,测试均无问题,push远程后,某个小伙伴在本地跑测试用例时,却无法通过,具体报错截图如下 通过截图信息,可以初步判断由于Date构造函数返回了不同日期导致,抱着好奇的态度查阅个各种资料后,竟然发一个小小的一个日期构造函数里面大有文章,平时自己写起来都是浅尝辄止,没有深入了解过,下面详细的介绍这个破案过程,以免各位看客后续重蹈覆辙。 问题排查 问题重现 按照一贯做法,出问题后先自己本地跑了一次测试用例,没有任何问题,初步就可以定位是开发环境问题,于是乎就看了下小伙伴nodejs版本号,版本号为6.10.0,而自己本地node版本号为10.3.0,于是直接在不同nodejs命令行下直接执行如下测试用例

执行结果 Node 6.10.0 执行结果 Node 6.10.0

Node 10.3.0

到此基本确认了改问题是有Nodejs环境问题,但是为什么会有这样的问题呢,跟着我继续深入探秘下Date构造函数 深入分析 结合问题,提炼出以下小示例,以供深入分析Date构造函数

nodejs 10.3.0执行结果

nodejs 6.10.0执行结果

为什么在不同环境下Nodejs的解析行为不一样的,这就提下JS中涉及到时间的相关规范了 相关规范 ISO8601标准[参考5] 该标准指定了如果为指定偏移时间就默认为当前时间, [ES5 规范][参考6] 指出了如果没有指定偏移量,默认偏移量为Z [ES6 规范][参考7] 为了和ISO8601标准一致,又对该规范做了更改,如果时区偏移量不存在,日期时间将被解释为本地时间。 源码分析 为了确认改问题由于不同规范导致,我们就需要看下V8源码里面看下的实现了。 获取不同node版本对应的v8版本号,如下图所示

查看 v8 的不同版本下git提交记录可看到在6.6版本上已经增加了对ES6规范的支持 ,实现了如果时区偏移量不存在,日期时间将被解释为本地时间。 问题总结 回头看文章开头的用的日期构造函数导致的bug,就可以解释为什么”1995-12-17T00:00:00″ 在低版本下输出1995-12-17T08:00:00,而高版本下输出1995-12-17T00:00:00? 通过上述规范和源码,低版本由于会加默认偏移量Z,默认就解析成0时区的时间,而我们在东八区,所以最终我们本地的时间是1995-12-17T08:00:00,高版本下由于没有Z,默认会解析成本地时间,输出结果最终就是1995-12-17T00:00:00。 问题解决方案就是只需要加上时间偏移量即可,如下new Date(‘1995-12-17T03:24:00+08:00’)。 经验教训 由于浏览器的差异和不一致,强烈建议不要 使用Date构造函数解析日期字符串(并且Date.parse它们是等价的)。 […]

Flutter 初体验

初识 Flutter 还是在上个月的 GMTC 大会上。来自 Google 的工程师现场演示了如何使用 Flutter 构建美观、高性能的移动应用。个人对其中一些特性,比如良好的开发者体验、优秀的跨平台能力很感兴趣。于是决定在会后亲自体验一下。 最近几天尝试使用 Flutter 把京东 APP 中的排行榜频道的首屏布局实现了一下,算是对基于 Flutter 的开发有了一个最简单的了解,特地记录一下,方便其他想了解、尝试 Flutter 框架的小伙伴。 首先看看我实现了一个什么样的界面: 接下来让我们从不同方面说说 Flutter 的开发。 Flutter 开发环境搭建 安装 Flutter 不同平台的安装流程基本一致,这里就以 macOS 为例。首先下载 flutter macOS 版,并解压。 把 Flutter 的 bin 目录添加到系统 PATH 中:

提示:记得把这行代码放到你的 shell 启动脚本中,避免每次都要手动执行。 路径添加完成后就可以执行 flutter 命令啦。 Flutter 提供了一个 flutter doctor 命令协助我们安装 Flutter 的依赖。它会检查本地是否有 iOS 和 […]

webpack 4.0.0-beta.0 新特性介绍

近年来前端技术如雨后春笋般蓬勃发展,我们也在这个潮流下不断地学习、成长。前端技术的不断发展,给我们提供了许多的便利。例如:JSX的出现为我们提供了一个清晰、直观的方式来描述组件树,LESS/SASS的出现提高了我们书写css的能力,AMD/CommonJS/ES6 的出现为我们模块化开发提供了便利。然而,我们需要使用其它工具将这些工具转化成原生语言以运行在浏览器上。为了能够更好的将这些不同的资源整合到一起,我们就需要一个打包工具,webpack就是这个需求下的产物。 webpack 可以看做是模块打包机。它做的事情是:分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。目前,webpack 总共发布了三个稳定版本。从17年八月底开始,经历了长达五个月的开发周期,webpack 团队通过增加大量新特性、bug修复、问题改善并于近期发布了 webpack 4.0.0 的 beta 版本。如果你对 webpack 感兴趣,下面我们就来学习一下 webpack 4.0.0-beta.0 的新特性。 P.S. 以下所有代码演示代码都是基于 webpack 4.0.0-beta.0。 1、安装webpack v4.0.0-beta.0 如果你使用yarn:

如果你使用npm:

2、webpack 4.0.0.beta.0 新特性介绍 下面是一些你肯定会感兴趣的新特性。如果阅读完本章后还觉得不过瘾,你可以再这查看完整的changelog。 本章将从以下几部分来介绍 webpack 4.0.0-beta.0。 2.1 环境 webpack 运行环境升级。已经不支持 Node.js 4 版本。源码升级到更高的 ECMAScript 版本。 根据 webpack package.json 配置中显示 Node.js 最低支持版本:”node”: “>=6.11.5” 2.2 模块 webpack 模块类型及 .mjs 的支持: […]

© 2018 JDC. All Rights Reserved.