Visual-Studio-Code

安装@babel/nodenpm i @babel/node目录结构.├── .babelrc├── .vscode│ └── launch.json├── package.json<!--more--> 配置launch.json关键点: 配置runtimeExecutable, 用babel-node来debug开启sourcemap "sourceMaps": true,配置env, 不影响babel其他功能{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "current file", "program": "${file}", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node", "sourceMaps": true, "env": { "BABEL_ENV": "debug" } } ]}配置.babelrc说明:debug对应launch.json中的 "BABEL_ENV": "debug" { "presets": ["@babel/preset-env"], "env": { "debug": { "sourceMaps": "inline", "retainLines": true } }}givencui博客首发, 转载请注明来自GivenCui ...

Mac环境下的vscode默认块注释的快捷键为shift + option + A, 而大多数块注释的快捷键都是cmd + shift + /, 本文教你更改其快捷键, 并附赠一个你可能遇到的问题的解决办法step1. 进入快捷键设置界面 step2. 修改快捷键 P.S. 解决Mac不能录入cmd + shift + /的问题如果输入cmd + shift + /弹出帮助页面 问题原因: 全局按键cmd + shift + /被占用, 需要到Mac的系统偏好设置 解决步骤: step1: 进入系统偏好设置 step2: 进入键盘设置 step3: 依次点击 快捷键 -> 应用快捷键 step4: 重启vscode, 并再次设置快捷键, 此时cmd + shift + /可以被录入并生效 givencui博客首发, 转载请注明来自GivenCui

常用的快捷键图来源https://www.jianshu.com/p/475... vscode好用的插件https://segmentfault.com/a/11... vscode 的配置https://blog.csdn.net/win7583...

VS code-前端配置 Chinese (Simplified) Language Pack for Visual Studio Code简体中文插件，一般会自动识别你的环境，自动提示是否需要简体中文的语言包。要是没有提示，就在扩展搜索一下即可。 Settings SyncSettings Sync 使用插件将目前配置保存到GitHub上，以后只需要从GitHub上获取，就可以一次性安装插件配置信息。 具体怎么配置还需要搜一下网上的配置教程，这样就不会换电脑，或者重装一下vscode 还需要重新配置。强力推荐。。。 https://juejin.im/post/5b9b5a...https://segmentfault.com/a/11...Auto Rename TagAuto Rename Tag 如题 自动重命名标签 对于前端来说还是很必要的 Auto Close TagAuto Close Tag 自动闭合标签 ES7 React/Redux/GraphQL/React-Native snippetsES7 React/Redux/GraphQL/React-Native snippets 对于用vscode 写react方便跟多 不过一些快捷键的使用需要记住熟能生巧 多用用就记住的了； 具体的快捷键 可以看插件的说明 很详细的表格： Vue 2 SnippetsVue 2 Snippets vue 提高coding 效率插件 VeturVetur vue 必备插件 ESLintESLint 语法检查。前端必备了，不过还需要根据项目配置eslintrc配置一下，否则有时候全是警告，具体为文档和配置可以看官方文档 https://eslint.org/docs/user-...JavaScript (ES6) code snippetsJavaScript (ES6) code snippets 和刚才的 ES7 React/Redux/GraphQL/React-Native snippets 比较类似，这个主要针对的是ES6; ...

1.vscode 调试vue项目引用文字launch.json{ "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8090", "webRoot": "${workspaceFolder}/src", "sourceMaps": true, "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*", "webpack:///src/*": "${webRoot}/*", "webpack:///*": "*", "webpack:///./~/*": "${webRoot}/node_modules/*", "meteor://????app/*": "${webRoot}/*" } }vue.config.js vscode 调试node项目launch.json直接F5 或者Fn + F5 运行即可进行调试{ "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/bin/www", // window 路径需要\\ "runtimeExecutable": "nodemon", // 需要安装nodemon 全局安装 "restart": true, "console": "integratedTerminal", "skipFiles": [ "${workspaceRoot}/node_modules/**/*.js", "<node_internals>/**/*.js" ] }

本场 Chat 是一个基于 Vue 的个人天气预报项目，就是兴趣所致，做来玩玩。顺便扩展一下知识面。 本项目会采用高德地图 API，Echarts 可视化库和 Vue 相关的技术来开发本项目。有兴趣的同学，可以一起来玩玩。 本场 Chat 你将学到如下内容： 学会制作自己的天气预报；学会使用部分高德地图的 API；学会使用 Echarts的部分 API；Vue+Webpack 相关的一些技术。有兴趣的请到gitchat查看： https://gitbook.cn/gitchat/ac... 效果图如下：

本场 Chat 是讲一个基于 Vue+Better-Scroll 实现多 Tab 切换上拉加载更多的实例，像这种多 Tab 切换加载更多的场景，不管在 PC 端还是移动端都还挺常见的，比如商城类，订单中心等。本人在项目中也经常用这种，已经轻车熟路了，所以就想做个总结出来，并做成一个实例 Demo，把经验分享出来，供同样有所需的前端同学学习。 本项目使用 Vue 和 Better-Scroll 相关的技术来开发本项目。通过学习本项目，你也可以做出多 Tab 切换上拉加载更多的效果，而不必到处找别人的例子。 本场 Chat 你将学到如下内容： 学到 Better-Scroll的相关知识；学到 Vue 开发的相关知识；学到用 Vue+Better-Scroll实现多 Tab 切换上拉加载更多。有兴趣学习的可以请到gitchat查看： https://gitbook.cn/gitchat/ac... 效果图如下：

本文是讲一个基于 Vue 的仿美团城市选择器的插件开发实例，目前关于城市选择器的插件比较少，在自己做项目的时候一直没有找到合适的城市选择器插件，所以自己开发了一个。同时也想把这个插件分享给出来，供同样有所需的前端同学学习使用。 本项目使用 Vue 和 Vue 插件相关的技术来开发本项目。通过学习本项目，不仅可以拥有自己的城市选择器插件，还可以学到 Vue 插件的开发过程以及 NPM 发布包的相关知识。 通过本吻你将学到如下内容： 学会制作自己的城市选择器；学习 Vue 插件的开发过程；学习如何将制作的插件发布到 NPM。请到gitchat查看 https://gitbook.cn/gitchat/ac... 效果图如下：

欢迎关注前端小讴的github，阅读更多原创技术文章办法超简单，如下图： 在编辑器打开HOSTS文件，在最后一行添加192.30.253.188 gist.github.com，如下图： HOSTS文件的作用？Hosts是将一些常用的网址域名与其对应的IP地址建立关联的”数据库”——用户在浏览器输入网址时，系统优先从Hosts文件中寻找对应的IP地址，找到后自动打开对应网页；若没有找到，则再将网址提交DNS域名解析服务器进行IP地址的解析。（更多关于HOSTS文件的详细说明可自行百科）

console快捷键对于前端开发者来说，在开发过程中需要监控某些表达式或变量的值的时候，用 debugger 会显得过于笨重，取而代之则是会将值输出到控制台上方便调试。最常用的莫过于console，但是反复的 console.** 输入起来太过繁琐。先安利几个vscode里面的console快捷键。 cas --> console.assert() (如果断言为 false，则在信息到控制台输出错误信息)ccl --> console.clear(object); (清除控制台console输出)cco --> console.count(label); (记录 count() 调用次数，并输出到控制台)cdi --> console.dir(object); (查看对象的信息)cer --> console.error(object); (输出错误到控制台)clg --> console.log(object); (向控制台输出一条信息)cti --> console.time(object); (计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间)cte --> console.timeEnd(object); (计时结束)ctr --> console.trace(object); (显示当前执行的代码在堆栈中的调用路径)cwa --> console.warn(object); (输出警告信息，信息最前面加一个黄色三角，表示警告)cin --> console.info(object); (控制台输出一条信息 与console.log()类似)cgr --> console.group(object); (在控制台创建一个信息分组。 一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束)cge --> console.groupEnd(object); (设置当前信息分组结束)

平时自己有一些本地的项目想把它们放到github上去，就需要关联一下。 步骤一：在本地想放到github上的项目的根文件夹执行git init。 步骤二：在github上新建一个仓库Repository，得到仓库地址。比如https://github.com/MR-yuhuash... 步骤三：本地项目根文件夹执行： git remote add origin https://github.com/MR-yuhuashi/jest-nuts.git步骤四：关联之后，就可以进行拉取远程代码和提交本地代码到远程等等操作啦比如 git pull origin mastergit add .git commit -m 'first commit'git push

一、准备工作Angular7（以下简称ng7）,已经跟之前版本大有不同。新建工程后，可方便创建library（简称lib）,lib是什么呢？就是一个npm包的源码包。npm作为强大的包管理器，已经成为很多FEer分享智慧成果的法器。本文主要介绍本人写的一个radio组件。 二、开发组件radio过程1、使用ng cli,新建工程，创建lib// 安装ng clinpm install -g @angular/cli// 新建工程ng new ng-project// 进入ng-project 创建一个libng generate library radio2、生成结构如图所示 接下来开始写组件 3、radio结构如下<!--说明：这其实是一个radio-group 因为radio一般都是分组使用，这里有几个注意点1、组内radio的name属性保持一致、组外保持唯一2、通过checked属性来设置radio的选中状态，一定不要写成[attr.checked]--><div class="input-wrap" [class.hor]="horizontal"> <div class="custom-radio" *ngFor="let item of data; let i=index"> <input #input class="custom-input" [name]="name" id="{{'radio_'+name+i}}" type="radio" [value]="item.value" (click)="clickHandler(item.value)" [checked]="item.value === value" [disabled]="disabled"> <label class="custom-label" for="{{'radio_'+name+i}}">{{item.name}}</label> </div></div>4、radio组件主体代码如下export class RadioGroupComponent implements ControlValueAccessor { /* radio 数组 */ @Input() data: Radio[] = []; /* radio 类型 原生或者按钮类型*/ @Input() type: string; /* name标识 */ @Input() name: string = this.idSer.generate().replace(/-/g, '_'); /* 水平排列 */ @Input() horizontal: boolean; /* 禁用 */ @Input() disabled: boolean; /* radio 值 */ @Input() value: any; constructor(private idSer: IdService) { } clickHandler(val: any) { this.value = val; // 更改control的值 this.controlChange(this.value); this.controlTouch(this.value); } writeValue(value: any): void { this.value = value; } registerOnChange(fn: Function): void { this.controlChange = fn } registerOnTouched(fn: Function): void { this.controlTouch = fn } private controlChange: Function = () => { } private controlTouch: Function = () => { }}说明：其实组件代码不是很多，但是应该注意到，我们继承了ng的一个interface ControlValueAccessor，这里我觉的是比较值得侃的地方。这是ng的一个forms API,可以方便原生DOM和ng forms传值。在组件元数据中这样定义 ...

目的是为了更白话的认识http，面对业内人，还有一些吃瓜的...故事背景描述: 男猪脚在情人节这天给他女票发送了一条信息，“I love U”，女主角收到后很开心，也回复了一条信息， “me too”。故事很简单，就酱。现在用这个简单的故事和http协议通信匹配上。 男主（客户端）发微信（get请求）给女票（URI）告诉她这是个纪念日专版（Http/1.1）的信息，对女票说 “I love U”（请求主体）。女主（服务器）很开心，她知道这个是纪念日专版（Http/1.1）的信息,她收到了（200 OK），并且回复说“me too”(响应主体)。 到这里男女主角的一次信息交流就结束了。上面的故事没有涉及到请求首部和响应首部，因为这些是可选的通信参数，如果把这些可选的参数也加入爱情故事，我是这样胡扯的。 请求首部字段： content-length： 8 ，这里表示“I love U”的内容字符长度是 8个User-Agent: Mozilla/5.0 (Win... , 可以表示 微信设置，发送特殊字段时候，界面就有相关的表情弹出（亲亲，抱抱，花等）...响应首部字段： Date： Wed, 12 Jun 2019 13:13:14 GMT， 这里表示女主发送信息的时间是 13:14Server: nginx ，这里是她的微信客户端Content-Length: 6 ，这里也可以表示她回复"me too" 信息字符串长度。...但是，这样一个节日互表心意的信息，有问题： 真的可以如期如愿传递到对方的手里吗？女主接受的信息确定是他男票发来的，而不是第三者发来的骚扰信息？她男票发送的信息，确定是“表白”而不是“分手”？下篇，谁为你的“http爱情” 保驾护航。

nodejs(这指express） 中间件铺垫：一个请求发送到服务器，要经历一个生命周期，服务端要： 监听请求-解析请求-响应请求，服务器在处理这一过程的时候，有时候就很复杂了，将这些复杂的业务拆开成一个个子部分，子部分就是一个个中间件。对于处理请求来说，在响应发出之前，可以对请求和该级响应做一些操作，并且可以将这个处理结果传递给下一个处理步骤 express 这样描述中间件的:执行任何代码。 修改请求和响应对象。 终结请求-响应循环。 调用堆栈中的下一个中间件分类：应用级中间件 路由级中间件 错误处理中间件 内置中间件 第三方中间件举个栗子： var express = require('express'); var app = express(); app.get('/', function(req, res, next) { // req 修改请求 // res 响应对象 next(); // 当前中间件函数没有结束请求/响应循环， 调用next(), // 将控制权传递给下一个中间件函数继续往下处理，否则页面到此会被挂起 });app.get('/end', function(req, res) { res.send('程序到我这里就结束了，没有next方法');})app.listen(3000);上面next()的说明: next()函数不是nodejs或者express的函数，而是传递中间件函数的第三变量，它是一个统称，可以为任意名称，为了名称统一，不造成混淆，约定为next()，调用它之后会将调用应用程序中的下一个中间件程序 中间件的使用说明： var express = require('express'); var app = express(); app.use(requestTime); // var requestTime = function(req,res, next) { req.requestTime = new Date().getTime(); next(); } app.get('/time', function(req, res, next) { var timeText = '当前时间为：'; timeText = timeText + req.requestTime; // 这里的req.requestTime 是上一个中间件函数传递过来的， // 一个业务处理流程，多个中间件函数对请求 req进行修改处理，并且通过next() 传递给下一个中间件函数， // 这样下面的中间件函数都能拿到上一个中间件函数处理的结果 res.send(timeText); });app.get('/end', function(req, res) { res.send('程序到我这里就结束了，没有next方法');})app.listen(3000);下面是多个中间件函数，在各自函数中处理请求和响应的例子： ...

vscode 预览插件 just-preview 最近在做h5，每次都要在浏览器和编辑器间切换。很麻烦，所以做了个小插件，方便在编辑器里快速预览 https://marketplace.visualstu... just-preview README[ FeaturesAdd preview in vscode to avoid switching back and forth between browsers. Fast page layout. 在vscode中加入预览界面，避免来回切换浏览器。快速排版页面。 Known IssuesIf the page is out of screen height, close the no scroll TAB 如果页面超出屏幕的高度，请关闭 no scroll选项卡，保证页面宽度精准！ 因为界面使用iframe不能控制scrollbar，所以需要用户手动选择。 Enjoy! 欢迎提出建议和问题https://github.com/yangchaoji...

以下是对WebRTC入门学习课程的源码目录结构的整理，方便后续学习时进行查询。 源码对应的目录结构目录对应的功能apiWebRTC接口层，浏览器都是通过该接口调用WebRTCcall数据流的管理层，call代表同一个端点的所有数据的流入流出vedio与视频相关的逻辑audio与音频相关的逻辑common_audio音频算法相关common_vedio视频算法相关media与多媒体相关的逻辑处理，如编解码的逻辑处理logging日志相关module最重要的目录，子模块pcPeer Connection，连接相关的逻辑层p2p端对端相关代码，stun，turnrtc_base基础代码，如线程、锁相关的统一接口接口代码rtc_tool音视频分析相关的工具代码tool_webrtcWebRTC测试相关的工具代码，如网络模拟器system_wrappers与具体操作系统相关的代码。如CPU特性，原子操作等stats存放各种数据统计相关的类sdk存放android和iOS层代码。如视频的采集，渲染重要模块module对应的目录结构目录对应的功能audio_coding音频编解码相关代码audio_device音频采集与音频播放相关的代码audio_mixer混音相关的代码audio_processing音频前后处理相关的代码bitrate_controller码率控制相关的代码congestion_controller流控制相关的代码desktop_controller桌面采集相关的代码pacing码率探测及平滑处理相关的代码remote_bitrate_estimator远端码率估算相关的代码rtp_rtcprtp/rtcp协议相关的代码vedio_capture视频采集相关的代码vedio_coding视频编解码相关的代码video_processing视频前后处理相关的代码

背景最近在研究图像识别相关代码——OpenCV，为了便于调试，就要在Mac上搭建一个调试c++程序的调试环境。我这跑通了，分享给大家。 环境Mac OS 10.14.5xcode-select v2354Visual Studio code 1.35.1OpenCV 3.4.5Clang 1001.0.46.4CMake 3.14.5步骤说明编译环境准备安装OpenCV安装VScode 插件VScode 项目配置OpenCV HelloWorld 环境准备Mac 自带有C/C++环境，就不再赘述。 Xcode Command Line Tools是必须的，可通过一下命令行触发安装程序，或者下载安装。 命令安装 xcode-select sudo xcode-select --install下载 xcode-select 安装Apple Developer Download 选择下载文件注意这里提示的版本号！命令行安装速度很慢，且失败率很高，建议通过下载dmg文件安装CMake 准备 编译OpenCV时要用到cmake。同样可以通过homebrew或者下载安装。下载方式安装的CMake，cmake可执行程序在/Applications/CMake.app/Contents/bin/cmake. 如果你用的homebrew方式安装opencv那么CMake就不是必须的.pkg-config 安装编译引用有opencv库的c/c++代码需要附带很多参数来告知include path，libs等，用pkg-config就能精简编译参数。 brew install pkg-config安装OpenCV有两种方式安装。 brew install## 一个命令安装好opencv3brew install opencv3用homebrew安装很方便，就是安装时间很长（我用了一个大白天）。额外还会安装python-opencv。编译安装点击下载源代码。这里我选择的是Sources 3.4.5 解压后，进入目录 cd <opencv 解压后目录>mkdir releasecd releasecmake -D CMAKE_BUILD_TYPE=RELEASE -D CMAKE_INSTALL_PREFIX=/usr/local makesudo make install这里创建的release目录会放cmake命令产生的成果。CMAKE_INSTALL_PREFIX配置的目录会存make命令产生的成果。 到这里如果都没报错就算安装成功了。 一般都不会出问题，在虚拟环境不一定能成功。参考自 编译安装opencv 写个C++ Hello World先写一个只引用了标准库的C++代码试试看。 /// ./main.cpp#include <stdio.h>#include <iostream>int main(int argc, const char * argv[]) { std::cout << "Hello, World!\n"; return 0;}结果如下。没问题就继续尝试在代码引入OpenCV库。 ...

一、 WebRTC是什么WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。简单说就是一个音视频处理+及时通讯的开源库。 二、WebRTC 有哪些优点Google开源的框架（背景强大）跨平台（适合当下软件开发的趋势）用于浏览器实时传输音视频引擎（迎合当下的发展趋势）三、WebRTC应用场景音视频会议在线教育照相机音乐播放器共享远程桌面录制即时通讯工具P2P网络加速文件传输工具游戏实时人脸识别由上方列出的条目可以看出，WebRTC的应用场景十分广泛，尤其是在网路越来越发达的当下，音视频会议、在线教育、即时通讯工具、游戏、人脸识别一定是当下和未来的发展方向，跟上时代的步伐才不至于死在沙滩上。 四、 WebRTC的愿景网络传输音视频引擎内网链接音频引擎P2P传输视频引擎TURN中转 五、 WebRTC运行机制 轨与流Track（一路音频/视频就是一路轨）MediaStream （媒体流包含很多轨）WebRTC的重要类MediaStreamRTCPeerConnection（该类很重要，提供了应用层的调用接口）RTCDataChannel （非音视频数据通过它传输）六、 WebRTC目前支持的浏览器Chrome（谷歌）Safari（苹果）FirefoxEdge （微软）七、学习WebRTC的难点WebRTC庞大、烦杂门槛高，全是英文文档，对学习者是一个挑战客户端与服务器分离，增加学习难度网络屏蔽/系统的学习资料少（这个是因为一些大家都懂的原因，对学习者是一个障碍，需要翻墙）网上虽然有demo，但是网上demo错误多，难以调试通八、特此说明以上是对慕课网上WebRTC入门课程的学习资料的整理归纳。

两分钟提高vscode的markdown书写体验对于程序员来说,时常温故知新,写博客是十分有益的,markdown成为众多程序员写作的新宠,不仅简洁,而且优雅,这里推荐一些提高markdown书写效率,并且美化排版的工具. 虽然说是两分钟,也可以30s解决啦,直接看下面. 文中插件插件名作用测试版本Markdown Theme Kit支持自定义markdown预览样式0.1.4Markdown Preview Github Styling以github风格预览markdown0.1.6markdown-formatter支持格式化和快捷输入0.4.0Markdown+Math支持LaTex数学公式2.3.9vscode Setting.json 推荐配置: "[markdown]": { // 保存自动格式化 "editor.formatOnSave": true, // 显示空白字符 "editor.renderWhitespace": "all", // 快速补全 "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, "editor.snippetSuggestions": "top", "editor.tabCompletion": "on", "editor.acceptSuggestionOnEnter": "on"}或者花点时间看这里. vscode插件推荐原生支持作为一个代码编辑器, 原生支持markdown显示. 只需要 command(ctrl)+shift+p, 输入 Markdown Priview to the side , 就可以预览. 可以定制化的预览样式可以自由地导入markdown展示样式, 也可以通过 Markdown Theme Kit 这样的插件来快速更改修改风格.这里推荐一款 Markdown Preview Github Styling 插件, 可以将预览模式变成github的样式 拥有快速格式化工具推荐一下 markdown-formatter 插件, 可以快速格式化代码. ...

ctrl + A 全选ctrl + u 转换成小写ctrl + shift + u 转化成大写shift + alt + 鼠标点击划过的地方 = 多选shift + alt + i 全选实现多选最后一个ctrl + f 查找ctrl + H 替换alt + 上下箭头 = 上移 | 下移ctrl + N 新标签窗口ctrl + shift + N = 新建窗口ctrl + shift + | = 匹配括号的匹配对shift + alt + A = 多行注释shift + alt + F = 格式化

简介Visual Studio Code Remote - SSH 可以打开远程计算机或容器中的文件(计算机或容器中需要运行 SSH Server),而且可已充分利用 VS Code 的一切特性.一旦连接上服务器,可以与任意位置的文件进行交 由于 Remote-SSH 扩展运行命令行和其他扩展是在远程主机上,因此本地不需要代码,就可以正常运行. 入门确保本机已经安装 VS CODE确保本机已安装 SSH client, 并且确保远程主机已安装 SSH server为本机 VS CODE 安装 Remote Development 扩展连接远程主机连接配置Ctrl + Shift + p 输入 Configure SSH Hosts... 回车,设置远程主机信息,配置信息如下 # Read more about SSH config files: https://linux.die.net/man/5/ssh_configHost oa-online HostName 远程主机Ip User root Host 远程主机名称HostName 远程主机IPUser 连接用户名用户名密码连接在配置文件 settings.json 加入 "remote.SSH.showLoginTerminal": true Ctrl + Shift + p 输入 Remote-SSH:Connect to Host... 回车, 选择配置的远程主机,在命令行处输入远程主机密码,即可连接远程主机 此方式会导致每次都需要输入密码,相对来说比较麻烦,推荐方式二(SSH 密钥连接) ...

flutter的入门记录前言：flutter 的入门demo 已经写好一个星期了，只不过一直都没有整理出博客来。收拾好心情，来整理一下。继上一篇关于react-native-wx的介绍，是仿照微信界面ui，因为作为前端开发，有一定的js 基础，所有写起RN来，也不是很吃力。但是这个flutter 用的是一个新的语言 dart作为开发语言，没有学习这个语言，但是不要怕，有开发文档，一切都没有那么难。这个flutter demo，虽然已经写了一个初步的demo，但是你要是问我，这个dart里面的具体的东西，我直言说，‘不会’（因为没有具体去学习这个语言，回过头来说，若深入flutter，必学dart），我一路就是对着开发文档和其他参考资料一路"CV"过来。不禁想起了这个图片~ 话不多说，也将继续参考微信界面ui开发，项目名称为 flutter-wx,为了不增加这个入门体验demo的复杂度，只做了几个基本功能页面。项目地址： flutter-wx,欢迎查看！下面截图如下：文章内，图片很多，占据了一定的篇幅。班门弄斧之作，若有大神见到，敬请指教，有不对不合理之处，敬请指出！我是迩伶贰！ 1. 环境准备以ios 系统为例。安装xcode,这里主要使用的是xcode里面的ios模拟器，笔者不太喜欢用xcode,如何安装，这里不做赘述；使用flutter镜像编辑 .bash_profile， 往后追加以下，export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn获取Flutter SDKhttps://flutter.dev/docs/deve...解压SDK 压缩包，将路径写入 .bash_profilesource ~/.bash_profile检查 flutter 环境flutter doctor上图看出，flutter 需要的环境有的具有，有的不具有，不同的操作系统需要配备不同的软件环境，我们这里是mac,用的是Xcode，因此，我们不需要安装Android Studio，忽略第一条，按照第二条提示的安装环境； 2. 软件安装安装编辑器vscode，这里使用vscode,安装vscode 插件flutter3. 初始化项目打开vscode, command+shift+p; 初始化之后，如下 debugger 模式下，跑起来： 4. 修改项目 新建文件夹 page, utils, page 下新建多个文件，一个文件表示一个页面，utils 为工具函数， main.dart 为项目的主入口。 5. 添砖加瓦-- 组件封装网络请求封装: 在utils 文件夹新建文件 HttpRequest.dart， 代码写入：import 'package:dio/dio.dart';import 'dart:async';/* * 封装 restful 请求 * * GET、POST、DELETE、PATCH * 主要作用为统一处理相关事务： * - 统一处理请求前缀； * - 统一打印请求信息； * - 统一打印响应信息； * - 统一打印报错信息； */class HttpUtils { /// global dio object static Dio dio; /// default options static const String API_PREFIX = 'http://18.10.1.115:4000'; // static const String API_PREFIX = 'http://api.wtodd.wang:4000'; static const int CONNECT_TIMEOUT = 10000; static const int RECEIVE_TIMEOUT = 3000; /// http request methods static const String GET = 'get'; static const String POST = 'post'; static const String PUT = 'put'; static const String PATCH = 'patch'; static const String DELETE = 'delete'; /// request method static Future<Map> request ( String url, { data, method }) async { data = data ?? {}; method = method ?? 'GET'; /// restful 请求处理 data.forEach((key, value) { if (url.indexOf(key) != -1) { url = url.replaceAll(':$key', value.toString()); } }); /// 打印请求相关信息：请求地址、请求方式、请求参数 print('请求地址：【' + method + ' ' + url + '】'); print('请求参数：' + data.toString()); Dio dio = createInstance(); var result; try { Response response = await dio.request(url, data: data, options: new Options(method: method)); result = response.data; /// 打印响应相关信息 print('响应数据：' + response.toString()); } on DioError catch (e) { /// 打印请求失败相关信息 print('请求出错：' + e.toString()); } return result; } /// 创建 dio 实例对象 static Dio createInstance () { if (dio == null) { /// 全局属性：请求前缀、连接超时时间、响应超时时间 BaseOptions options = new BaseOptions( baseUrl: API_PREFIX, connectTimeout: CONNECT_TIMEOUT, receiveTimeout: RECEIVE_TIMEOUT, ); dio = new Dio(options); } return dio; } /// 清空 dio 对象 static clear () { dio = null; }}调用：请求类型封装 ...

简介今天看着写的代码越来越多后，发现自己读起都有点吃力了，哈哈，自己看着眼睛痛，就准备整顿一下，毕竟这个项目还要维护很久的，找解决方案和测试解决方案就用了一个半小时，严重开始怀疑自己的智商了。下面的目标让代码看起来很公正 代码编辑器vscodeversion:版本 1.35.1 (1.35.1) 2019-06-12T14:19:05.197Z更新的 vscode代码格式化因为目前公司就我一个后端，项目也不大，所以就采用这种方案，简单快捷粗暴。 一.点击code->preferences->settings 点击右上角{}二.用户自定义设置(/User/settings.json)添加代码"editor.formatOnType": true,"editor.formatOnSave": trueESLint配置ESLint不仅有代码规范而且还有一部分语法检查的功能，ex:命令规范(驼峰) a==b警告提示a===b...ESLint可以有效的规范代码，以后还是会采用，培养自己的规范的编码习惯https://cn.eslint.org/ 1.vscode安装ESLint这里以配置eslint-config-aribnb的例子vscode在extensions中安装ESLint 2.npm安装npm install -g eslint3.创建.eslintrc文件softwaredeMacBook-Pro:koa-pro software$ "eslint --init"? How would you like to configure ESLint? "Use a popular style guide"? Which style guide do you want to follow? "Airbnb" (https://github.com/airbnb/javascript)? Do you use React? "No"? What format do you want your config file to be in? "JSON"Checking peerDependencies of eslint-config-airbnb-base@latestThe config that you have selected requires the following dependencies:eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0? Would you like to install them now with npm? "Yes"Installing eslint-config-airbnb-base@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0npm WARN koa-pro@1.0.0 No repository field.+ eslint@5.16.0+ eslint-plugin-import@2.17.3+ eslint-config-airbnb-base@13.1.0updated 3 packages and audited 7469 packages in 23.559sfound 370 vulnerabilities (1 low, 367 moderate, 2 high) run `npm audit fix` to fix them, or `npm audit` for detailsSuccessfully created .eslintrc.json file in /Users/software/workspace/Me/huafu/koa-pro项目目录下将会生成一个eslintrc.json的文件 ...

如何在Mac上配置Flutter与Android环境变量？在.bash_profile文件里配置

创建Vuejs文件模板代码片段1.Go to Code → Preferences → User Snippets 2.弹出提示框，选择一个vue代码高亮插件，比如vue.js 3.VSCode会创建一个vue.json，开始自定义 * vue.json *{ "New File": { "prefix": "template", "body": [ "<template>", "\t<div class='${name}'></div>", "</template>", "", "<script>", "\texport default {", "\t\tname: '${name}'", "\t}", "</script>", "", "<style lang='sass'>", "\t.${name} {", "", "\t}", "</style>" ] }}使用效果： 创建px2rem sass转换函数snippets1.Go to Code → Preferences → User Snippets 2.选择新建全局snippets file 3.VSCode会生成./vscode/px2rem.code-snippets，开始自定义 {  // Place your giftmall_app workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and   // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope   // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is   // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:   // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.   // Placeholders with the same ids are connected.  // Example:  // "Print to console": {  //  "scope": "javascript,typescript",  //  "prefix": "log",  //  "body": [  //    "console.log('$1');",  //    "$2"  //  ],  //  "description": "Log output to console"  // }  "px2rem": {    "scope": "javascript,typescript,scss",    "prefix": "prm",    "body": [      "pxToRem($1)"    ],    "description": "px to rem"  }}4.在<style lang=“scss scoped>中输入prm，就可以看到补全提示prm -> px2rem(参数值) ...

简介：最近用vue-cli框架写安卓版APP，本来打算用Hbuilder打包成.apk文件即可，但发现配置起来复杂，还不如自己搭建环境，用cordova工具提供的命令在终端实现，下面介绍遇到的问题及解决。一、打包过程首先要有node环境，然后用 npm install -g cordova， 终端或powershell里，执行 cordova create resume com.dls myresume其中resume是项目目录，com.dls是包名，myresume是应用程序的显示标题 1.执行 npm run build 之后，复制vue项目中 dist 下面的文件，到创建好的 resume 项目的 www 文件下复制 到 2.将终端切换到创建的resume项目目录：cd resume执行 cordova platforms add android --save 这里的平台名称可以是其他，我打包的是apk，所以使用安卓平台。 3.执行 cordova platform ls 来检查当前设置状况 4.执行 cordova requirements 来检查打包条件JDK、SDK、Gradlejdk必须安装1.8*版本的，另外注意环境变量配置正确，一定要新建系统变量，命名成特定名称，不能直接把安装路径写在系统变量Path后面，例如Java JDK，新建系统变量名为JAVA_HOME，变量值为JDK的安装路径，然后在系统变量Path中，将 %JAVA_HOME%bin; %JAVA_HOME%jrebin追加到变量值后面。详情见 https://segmentfault.com/a/11... 5.执行 cordova build android 开始打包，初次打包需要下载Gradle配置文件，有点慢。打包完毕会出现打包后生成的.apk文件路径把路径粘到窗口回车就可以看见打包好的.apk文件了 二、问题 在手机上打开后灰屏，cordova打包的是www文件夹下的内容，也就是说，内容应该都在www文件夹下面，而我们的源代码要放到src下面去，vue-cil的index.html是在根路径下面的，所以需要修改打包配置。首先，打开vue-cli项目的config下的index.js，将build里assetsPublicPath的值由'/'改为'./'然后，打开vue-cli项目的build下的util.js，将打包构建时提取css的公共路径往上加两层，详见图： 这样修改之后，在 npm run dev 浏览器环境下预览会有问题，但在手机上可以成功预览。

首先在vscode安装code命令 command+shift+p 选择第一个安装code命令 完成后就可以在终端输入命令来启动vscode了 code ./path/project 可以设置别名bash:vim ~/.bashrczsh:vim ~/.zshrc alias vscode='code' 运行bash:source ~/.bashrczsh:source ~/.zshrc

本人微信公众号：前端修炼之路，欢迎关注。 这两天有点时间，花时间学习了一下PHP基础语法和语句。因为个人比较喜欢Visual Studio Code这款编辑器，所以学习我主要记录一下使用VSCode学习PHP的遇到的一些问题。其中最主要的就是怎样使用VSCode调试PHP代码。 语法检查和格式化为了更加规范的学习PHP，我决定使用一个插件。如果在VSCode中搜索php format插件，会有三个排名最靠上的插件。我尝试了半天，其中PHP Intephense这个插件最好用。这个插件的评价是五星坪的，很容易跟另外的一个PHP IntelliSense弄混淆了。PHP IntelliSense这个插件的评价是三星，另外就是如果需要代码格式化的话，还得组合使用 PHP CS Fixer，我配置了半天比较麻烦。而且不知道为何，一直无法格式化。 所以强烈推荐直接安装PHP Intelephense。只要安装了这个插件，代码提示、语法检查、格式化就都有了。 phpStudy为了更愉快的学习PHP，需要一套后台集成环境，我这里选择的是PHP Study，光听名字，我就知道适合自己了。:) 软件的安装和使用，就不记录了。比较方便的是，PHP Study集成了Apache、Nginx、IIS服务器，并且集成了php5和php7，非常的适合开发和学习。 PHP Debug在VSCode中搜索插件PHP Debug，将这个插件安装到VSCode中。从这个插件的文档中，可以发现Installation，也就是说安装的说明。因为不会PHP，再加上英语水平不是特别好，所以这个文档看了好久，才弄明白。特此记录一下。 安装XDebug。先不要直接下载XDebug，文档中有一行特别加粗的说明，一定要操作一下的。I highly recommend you make a simple test.php file, put a phpinfo(); statement in there, then copy the output and paste it into the XDebug installation wizard. It will analyze it and give you tailored installation instructions for your environment.上文提示就是说，强烈建议我们创建一个test.php，创建一条语句phpinfo()，然后将得到的信息粘贴到XDebug installation wizard这个页面中。这个页面会分析好你的PHP环境，已经需要安装XDebug的步骤。 test.php <?phpphpinfo();?>在test.php中创建如上内容，然后在浏览器中打开，会看到类似如下信息： ...

首先确保 你的mac中有已解锁workflow 的 alfred 输入 字段名，字段类型，子弹说明。就可以自动生成相应代码段。 例子：在alfred搜索栏中输入 bean createTime,s,创建时间(bean:热键，createTime:字段名（s代表字段类型为字符串类型），创建时间:字段注释) 按回车就能出书如下代码： /** * 创建时间 */private _createTime: string;/*** 创建时间*/public get createTime(): string { return this._createTime;}/*** 创建时间*/public set createTime(value: string) { this._createTime = value;}https://github.com/tanzhihui1...给个小星星哦

刷题继续昨天和大家分享了61-70题，今天继续来刷71~80题 Question 71:Please write a program to output a random number, which is divisible by 5 and 7, between 10 and 150 inclusive using random module and list comprehension.解法一import randomprint (random.choice([i for i in range(10,151) if i%5==0 and i%7==0]))解法二import randomresp = [i for i in range(10,151) if i % 35 == 0 ]print(random.choice(resp))Question 72:Please write a program to generate a list with 5 random numbers between 100 and 200 inclusive.解法一import randomresp = random.sample(range(100,201),5)print(resp)Question 73:Please write a program to randomly generate a list with 5 even numbers between 100 and 200 inclusive.解法一import randomnumbers = random.sample(range(100,201,2),5)print(numbers)解法二import randomprint (random.sample([i for i in range(100,201) if i%2==0], 5))Question 74:Please write a program to randomly generate a list with 5 numbers, which are divisible by 5 and 7 , between 1 and 1000 inclusive.解法一import randomlst = [i for i in range(1,1001) if i%35 == 0]resp = random.sample(lst,5)print(resp)Question 75:Please write a program to randomly print a integer number between 7 and 15 inclusive.解法一import randomnumber= random.choice([x for x in range(7,16)])print(number)解法二import randomprint(random.randrange(7,16))Question 76:Please write a program to compress and decompress the string "hello world!hello world!hello world!hello world!".解法一import zlibs = 'hello world!hello world!hello world!hello world!'.encode()t = zlib.compress(s)print(t)print(zlib.decompress(t))Question 77:Please write a program to print the running time of execution of "1+1" for 100 times.解法一from timeit import Timert = Timer("for i in range(100):1+1")t.timeit()解法二import timebefore = time.time()for i in range(100): x = 1 + 1after = time.time()execution_time = after - beforeprint(execution_time)Question 78:Please write a program to shuffle and print the list [3,6,7,8].解法一import random lst = [3,6,7,8] random.shuffle(lst) print(lst) 解法二import randomlst = [3,6,7,8]seed = 7random.Random(seed).shuffle(lst)print(lst)Question 79:Please write a program to generate all sentences where subject is in ["I", "You"] and verb is in ["Play", "Love"] and the object is in ["Hockey","Football"].解法一subjects=["I", "You"]verbs=["Play", "Love"]objects=["Hockey","Football"]res = [[i, j, k] for i in subjects for j in verbs for k in objects] for x in res: print(" ".join(x))Out: I Play Hockey I Play Football I Love Hockey I Love Football You Play Hockey You Play Football You Love Hockey You Love Football解法二subjects=["I", "You"]verbs=["Play", "Love"]objects=["Hockey","Football"]for sub in subjects: for verb in verbs: for obj in objects: print("{} {} {}".format(sub,verb,obj))Out: I Play Hockey I Play Football I Love Hockey I Love Football You Play Hockey You Play Football You Love Hockey You Love Football解法三import itertools subjects=["I", "You"]verbs=["Play", "Love"]objects=["Hockey","Football"]all_list = [subjects,verbs,objects]res = list(itertools.product(*all_list)) for x in res: print(" ".join(x))Out: I Play Hockey I Play Football I Love Hockey I Love Football You Play Hockey You Play Football You Love Hockey You Love FootballQuestion 80:Please write a program to print the list after removing even numbers in [5,6,77,45,22,12,24].解法一def isEven(n): return n%2!=0li = [5,6,77,45,22,12,24]lst = list(filter(isEven,li))print(lst)解法二li = [5,6,77,45,22,12,24] lst = list(filter(lambda n:n%2!=0,li)) print(lst)源代码下载这十道题的代码在我的github上，如果大家想看一下每道题的输出结果，可以点击以下链接下载： ...

vscode是当前最好用的编辑器，没有之一。 vscode里面有放置了多个项目，有些项目使用了代码格式化，有些老项目历史悠久、代码混乱并没有使用代码格式化工具。所以我们需要为每个不同的项目设置不同的配置； 添加settings.json文件在项目根目录下面创建.vscode文件夹，下面新增settings.json文件，填入以下代码： { "editor.formatOnSave": true,}保存后立即生效，即为当前的项目添加了保存时自动格式化代码的配置； 原文地址：原文链接

热加载 -- r点击热加载，直接查看预览效果 热重启 -- R点击热重启 如果修改了状态相关的代码则需要hot restart，否则只需要hot reload即可显示布局网格 -- P在虚拟机中显示网格，工作中经常使用 切换Andriod和ios风格 -- O切换两者操作系统的预览模式 退出调试 -- Q退出调试预览模式

Chinese (Simplified) Language Pack for Visual Studio Code适用于 VS Code 的中文（简体）语言包 Git Historygit 版本管理插件，非常好用 vscode-author-generator添加文件作者，邮箱，创建时间，更新时间等信息 /** * @author xxx * @email [example@mail.com] * @create date 2019-05-23 14:07:26 * @modify date 2019-05-23 14:07:26 * @desc [description] */超越鼓励师在 VS Code 中连续写代码一小时（时间可配置），会有杨超越提醒你该休息啦~ 代码格式化ESLintPrettierCSS FormatterVetur

前言首先要明确的是，一般我们推荐的是采用空格进行缩进，因为tab不是一个标准的东西，如果使用tab缩进，可能在不同的系统中表现有差异。我个人还是喜欢4空格缩进，所以对于某些2空格缩进的代码，我还是有必要去做下转换的。下面以2空格缩进转4空格缩进为例进行说明。 2空格缩进转4空格缩进方法第一步，查看并确认下我们当前的缩进方式。 可以看到，是以2空格作为缩进。 接着，我们把缩进转换为tab。 然后，我们再设置以tab为缩进方式，并指定数值为4（代表1个tab表现为4个空格，但它毕竟还是tab，不是标准的空格）。 最后我们把缩进转为空格，这样2空格就变为4空格了。 同理，4空格变为2空格也是类似的。 原文链接

1.河北阳光理政投诉板块-写在前面之前几篇文章都是在写图片相关的爬虫，今天写个留言板爬出，为另一套数据分析案例的教程做做准备，作为一个河北人，遵纪守法，有事投诉是必备的技能，那么咱看看我们大河北人都因为什么投诉过呢？ 今天要爬取的网站地址 http://yglz.tousu.hebnews.cn/l-1001-5-，一遍爬取一遍嘀咕，别因为爬这个网站在去喝茶，再次声明，学习目的，切勿把人家网站爬瘫痪了。 2.河北阳光理政投诉板块-开始撸代码今天再次尝试使用一个新的模块 lxml ，它可以配合xpath快速解析HTML文档，官网网站 https://lxml.de/index.html利用pip安装lxml，如果安装失败，可以在搜索引擎多搜搜，内容很多，100%有解决方案。 pip install lxml废话不多说，直接通过requests模块获取百度首页，然后用lxml进行解析 import requestsfrom lxml import etree # 从lxml中导入etreeresponse = requests.get("http://www.baidu.com")html = response.content.decode("utf-8")tree=etree.HTML(html) # 解析htmlprint(tree)当你打印的内容为下图所示，你就接近成功了！ 下面就是 配合xpath 语法获取网页元素了，关于xpath 这个你也可以自行去学习，非常简单，搜索一下全都是资料，咱就不讲了。 通过xpath我们进行下一步的操作，代码注释可以多看一下。 tree=etree.HTML(html) # 解析htmlhrefs = tree.xpath('//a') #通过xpath获取所有的a元素# 注意网页中有很多的a标签，所以获取到的是一个数组，那么我们需要用循环进行操作for href in hrefs: print(href)打印结果如下 <Element a at 0x1cf64252408><Element a at 0x1cf642523c8><Element a at 0x1cf64252288><Element a at 0x1cf64252308><Element a at 0x1cf64285708><Element a at 0x1cf642aa108><Element a at 0x1cf642aa0c8><Element a at 0x1cf642aa148><Element a at 0x1cf642aa048><Element a at 0x1cf64285848><Element a at 0x1cf642aa188>在使用xpath配合lxml中，记住只要输出上述内容，就代表获取到东西了，当然这个不一定是你需要的，不过代码至少是没有错误的。 ...

1. 蜂鸟网图片-啰嗦两句前几天的教程内容量都比较大，今天写一个相对简单的，爬取的还是蜂鸟，依旧采用aiohttp 希望你喜欢爬取页面https://tu.fengniao.com/15/ 本篇教程还是基于学习的目的，为啥选择蜂鸟，没办法，我瞎选的。 一顿熟悉的操作之后，我找到了下面的链接https://tu.fengniao.com/ajax/ajaxTuPicList.php?page=2&tagsId=15&action=getPicLists 这个链接返回的是JSON格式的数据 page =2页码，那么从1开始进行循环就好了tags=15 标签名称，15是儿童，13是美女，6391是私房照，只能帮助你到这了，毕竟我这是专业博客 ヾ(◍°∇°◍)ﾉﾞaction=getPicLists接口地址，不变的地方2. 蜂鸟网图片-数据有了，开爬吧import aiohttpimport asyncioheaders = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36", "X-Requested-With": "XMLHttpRequest", "Accept": "*/*"}async def get_source(url): print("正在操作:{}".format(url)) conn = aiohttp.TCPConnector(verify_ssl=False) # 防止ssl报错,其中一种写法 async with aiohttp.ClientSession(connector=conn) as session: # 创建session async with session.get(url, headers=headers, timeout=10) as response: # 获得网络请求 if response.status == 200: # 判断返回的请求码 source = await response.text() # 使用await关键字获取返回结果 print(source) else: print("网页访问失败")if __name__=="__main__": url_format = "https://tu.fengniao.com/ajax/ajaxTuPicList.php?page={}&tagsId=15&action=getPicLists" full_urllist= [url_format.format(i) for i in range(1,21)] event_loop = asyncio.get_event_loop() #创建事件循环 tasks = [get_source(url) for url in full_urllist] results = event_loop.run_until_complete(asyncio.wait(tasks)) #等待任务结束 ...

vscode是一款开源且优秀的编辑器，接下来让我吐血推荐一下我工作使用过的令人惊叹的Visual Studio Code插件。 代码编辑插件vscode-color-highlight------颜色代码高亮插件。（sublime text也有）vscode-Open in Browser------右键在浏览器打开。（sublime text也有）vscode-Path Intellisense------文件路径提示。（sublime text也有）vscode-copy-relative-path------复制文件相对路径。（辅助书写路径的工具）vscode-Change Case-----变量名命名风格切换。（解决了命名风格不统一的工具）vscode-removeEmptyLines-----能够迅速删除多行空白。（自动删除所有代码空行）vscode-Trailing Spaces-----检测并一键去除代码中多余的空格。vscode-ECMAScript Quotes Transformer（终于找到这个插件了，一直苦于手动去转义js中的html）vscode-Bracket Pair Colorizer-----自动标识相匹配括号的颜色。（增强了vscode的括号提示）vscode-Prettier formatter------vscode代码格式增强工具。（标准格式化工具） PS：格式化工具请认准Prettier formatter。vscode-change-case------各种命名之间格式转化工具。（不再担心命名格式不统一的问题） PS：使用方法，比如：let ABC_a = 0。 （字符之间需要加一个任意符号才可以实现命名格式转化。） 选中变量，执行`Change Case Commands` web前端插件vscode-Debugger for Chrome ---- 在vscode与Chrome联调。vscode-Browser Preview ---- 在vscode进行浏览器预览。（类似与eclipse IDE里面浏览页面） PS：vscode-Debugger for Chrome与vscode-Browser Preview插件仍然处于实验阶段，不够稳定，建议直接使用Chrome调试较好。vscode-ESLint------js代码检查工具。（标准化ESLint的插件，规范js代码） PS： 1. `npm install eslint -g`。 2. 配置vscode设置文件。 { "eslint.autoFixOnSave": true, "eslint.options": { "root": true, "env": { "browser": true, "node": true }, "parserOptions": { "parser": "babel-eslint", "ecmaVersion": 2017, "sourceType": "module" }, "rules": { "indent": ["error", 2], "jsx-quotes": ["error", "prefer-single"], "quotes": ["error", "single"], "semi": ["error", "never"] } }, "eslint.validate": [ { "language": "javascript", "autoFix": true }, { "language": "html", "autoFix": true } ] }vscode-stylelint------css代码检查工具。（标准化stylelint的插件，规范style代码） ...

摘要： 统一各个框架的模板还是很有价值的。 原文：Web Template Studio 发布！在 VS Code 中轻松创建 Web 应用作者：韩骏Fundebug经授权转载，版权归原作者所有。 作为一个 Web 应用开发者，Scaffolding Tool（脚手架工具）一定是在创建项目时的重要工具。许多开发者会习惯于使用基于 CLI 的脚手架工具来创建 Web 应用，也有许多开发者喜欢使用类似于 VS IDE 的基于 UI 的 Wizard 向导。 近期（2019 年 5 月 15 日），微软发布了 Web Template Studio for VS Code，使得开发者在 VS Code 中可以通过基于 UI 的 Wizard 向导，快速地创建 Web 应用。 下面我们就来看看，如何使用 Web Template Studio 方便地创建 Web 应用。 打开 Web Template Studio安装好 Web Template Studio 后，在 VS Code 中，按下 Ctrl+Shift+P，然后输入 Web Template Studio: Launch，按下回车，就能打开 Web Template Studio 了。 ...

VS Code有多好用我就不说了，下面我来说说怎么让它更好用！ 作为一名用科技提高社会运作效率的编程er，在写代码的时候，请打开下面这张cheet sheet，感受字节跳动的愉悦吧！ 在Windows下90%快捷方式亲测可用，另外翻译不当之处，欢迎留言告知，我会及时更改的。

获取待爬取页面今天继续爬取一个网站，http://www.27270.com/ent/meinvtupian/ 这个网站具备反爬，so我们下载的代码有些地方处理的也不是很到位，大家重点学习思路，有啥建议可以在评论的地方跟我说说。 为了以后的网络请求操作方向，我们这次简单的进行一些代码的封装操作。 在这里你可以先去安装一个叫做 retrying 的模块 pip install retrying这个模块的具体使用，自己去百度吧。嘿嘿哒~ 在这里我使用了一个随机产生user_agent的方法 import requestsfrom retrying import retryimport randomimport datetimeclass R: def __init__(self,method="get",params=None,headers=None,cookies=None): # do something def get_headers(self): user_agent_list = [ \ "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1" \ "Mozilla/5.0 (X11; CrOS i686 2268.111.0) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.57 Safari/536.11", \ "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.6 (KHTML, like Gecko) Chrome/20.0.1092.0 Safari/536.6", \ "Mozilla/5.0 (Windows NT 6.2) AppleWebKit/536.6 (KHTML, like Gecko) Chrome/20.0.1090.0 Safari/536.6", \ "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/19.77.34.5 Safari/537.1", \ "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.9 Safari/536.5", \ "Mozilla/5.0 (Windows NT 6.0) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.36 Safari/536.5", \ "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1063.0 Safari/536.3", \ "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1063.0 Safari/536.3", \ "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_0) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1063.0 Safari/536.3", \ "Mozilla/5.0 (Windows NT 6.2) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1062.0 Safari/536.3", \ "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1062.0 Safari/536.3", \ "Mozilla/5.0 (Windows NT 6.2) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1061.1 Safari/536.3", \ "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1061.1 Safari/536.3", \ "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1061.1 Safari/536.3", \ "Mozilla/5.0 (Windows NT 6.2) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1061.0 Safari/536.3", \ "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.24 (KHTML, like Gecko) Chrome/19.0.1055.1 Safari/535.24", \ "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/535.24 (KHTML, like Gecko) Chrome/19.0.1055.1 Safari/535.24" ] UserAgent = random.choice(user_agent_list) headers = {'User-Agent': UserAgent} return headers #other coderetrying 最简单的使用就是给你想不断重试的方法加上 装饰器 @retry ...

1.美空网数据-简介从今天开始，我们尝试用2篇博客的内容量，搞定一个网站叫做“美空网”网址为：http://www.moko.cc/， 这个网站我分析了一下，我们要爬取的图片在 下面这个网址 http://www.moko.cc/post/13020...然后在去分析一下，我需要找到一个图片列表页面是最好的，作为一个勤劳的爬虫coder，我找到了这个页面 http://www.moko.cc/post/da39d...列表页面被我找到了，貌似没有分页，这就简单多了，但是刚想要爬，就翻车了，我发现一个严重的问题。 http://www.moko.cc/post/==da3... 我要做的是一个自动化的爬虫，但是我发现，出问题了，上面那个黄色背景的位置是啥？ ID，昵称，个性首页，这个必须要搞定。 我接下来随机的找了一些图片列表页，试图找到规律到底是啥？ http://www.moko.cc/post/978c7...http://www.moko.cc/post/junda...http://www.moko.cc/post/slavi.........没什么问题，发现规律了 http://www.moko.cc/post/==个... 这就有点意思了，我要是能找到尽量多的昵称，不就能拼接出来我想要得所有地址了吗 开干！！！ 手段，全站乱点，找入口，找切入点，找是否有API .... .... 结果没找着 下面的一些备选方案 趴这个页面，发现只有 20页 http://www.moko.cc/channels/p... 每页48个模特，20页。那么也才960人啊，完全覆盖不到尽可能多的用户。 接着又找到 http://www.moko.cc/catalog/in... 这个页面 确认了一下眼神，以为发现问题了，结果 哎呀，还么有权限，谁有权限，可以跟我交流一下，一时激动，差点去下载他们的APP，然后进行抓包去。 上面两条路，都不好弄，接下来继续找路子。 无意中，我看到了一丝曙光 关注名单，点进去 哈哈哈，OK了，这不就是，我要找到的东西吗？ 不多说了，爬虫走起，测试一下他是否有反扒机制。 我找到了一个关注的人比较多的页面，1500多个人 http://www.moko.cc/subscribe/... 然后又是一波分析操作 2.美空网数据- 爬虫数据存储确定了爬虫的目标，接下来，我做了两件事情，看一下，是否对你也有帮助 确定数据存储在哪里？最后我选择了MongoDB用正则表达式去分析网页数据对此，我们需要安装一下MongoDB，安装的办法肯定是官网教程啦！ https://docs.mongodb.com/mast...如果官方文档没有帮助你安装成功。 那么我推荐下面这篇博客 https://www.cnblogs.com/hacky...安装MongoDB出现如下结果 恭喜你安装成功了。 接下来，你要学习的是 关于mongodb用户权限的管理 http://www.cnblogs.com/shiyiw...mongodb索引的创建 https://blog.csdn.net/salmone...别问为啥我不重新写一遍，懒呗~~~ 况且这些资料太多了，互联网大把大把的。 一些我经常用的mongdb的命令 链接 mongo --port <端口号>选择数据库 use admin 展示当前数据库 db 当前数据库授权 db.auth("用户名","密码")查看数据库 show dbs查看数据库中的列名 show collections 创建列 db.createCollection("列名")创建索引 db.col.ensureIndex({"列名字":1},{"unique":true})展示所有索引 db.col.getIndexes()删除索引 db.col.dropIndex("索引名字") 查找数据 db.列名.find()查询数据总条数 db.列名.find().count() 上面基本是我最常用的了，我们下面实际操作一把。 ...

简介上一篇写的时间有点长了，接下来继续把美空网的爬虫写完，这套教程中编写的爬虫在实际的工作中可能并不能给你增加多少有价值的技术点，因为它只是一套入门的教程，老鸟你自动绕过就可以了，或者带带我也行。 爬虫分析首先，我们已经爬取到了N多的用户个人主页，我通过链接拼接获取到了 http://www.moko.cc/post/da39d... 在这个页面中，咱们要找几个核心的关键点，发现平面拍摄点击进入的是图片列表页面。接下来开始代码走起。 获取所有列表页面我通过上篇博客已经获取到了70000（实际测试50000+）用户数据，读取到python中。 这个地方，我使用了一个比较好用的python库pandas，大家如果不熟悉，先模仿我的代码就可以了，我把注释都写完整。 import pandas as pd# 用户图片列表页模板user_list_url = "http://www.moko.cc/post/{}/list.html"# 存放所有用户的列表页user_profiles = []def read_data(): # pandas从csv里面读取数据 df = pd.read_csv("./moko70000.csv") #文件在本文末尾可以下载 # 去掉昵称重复的数据 df = df.drop_duplicates(["nikename"]) # 按照粉丝数目进行降序 profiles = df.sort_values("follows", ascending=False)["profile"] for i in profiles: # 拼接链接 user_profiles.append(user_list_url.format(i))if __name__ == '__main__': read_data() print(user_profiles)数据已经拿到，接下来我们需要获取图片列表页面，找一下规律，看到重点的信息如下所示，找对位置，就是正则表达式的事情了。 快速的编写一个正则表达式<p class="title"><a hidefocus="ture".*?href="(.*?)" class="mwC u">.*?\((\d+?)\)</a></p> 引入re,requests模块 import requestsimport re# 获取图片列表页面def get_img_list_page(): # 固定一个地址，方便测试 test_url = "http://www.moko.cc/post/da39db43246047c79dcaef44c201492d/list.html" response = requests.get(test_url,headers=headers,timeout=3) page_text = response.text pattern = re.compile('<p class="title"><a hidefocus="ture".*?href="(.*?)" class="mwC u">.*?\((\d+?)\)</a></p>') # 获取page_list page_list = pattern.findall(page_text)运行得到结果 ...

CentOS环境安装-简介你好，当你打开这个文档的时候，我知道，你想要的是什么！ Python爬虫，如何快速的学会Python爬虫，是你最期待的事情，可是这个事情应该没有想象中的那么容易，况且你的编程底子还不一定好，这套课程，没有你想要的Python基础，没有变量，循环，数组等基础知识，因为我不想在那些你可以直接快速学会的地方，去浪费你的时间。 好了，这套课程是基于Python3.0 以上写的，操作系统我使用的是CentOS7+ 所以里面的好多内容可能和你的不一样，当然也会导致许多问题的解决和你的不同，所以有的问题，需要你自己百度或者翻墙解决啦，祝你碰到N多的BUG。O(∩_∩)O 接下来的第一步是什么？ 安装一个虚拟机，因为你的电脑99%是windows的，所以你需要一个软件叫做 VMware 然后，下载地址 在2018年5月10日这一天，我百度到的是 http://www.wuleba.com/309.html 在这个网址里面有这款软件的下载和你懂的。 然后，我接着百度到了一个CentOS7的操作系统 软件下载之后的名字 准备工作做好了，接下来就是需要你需要完成的操作了 首先，安装VM这款软件，并且把它"pojie"掉.（当有一天，你赚到了钱，记得在去买一下这款软件，支持一下） 安装软件，全部使用默认选项即可，这个地方因为简单到不需要我写了，有问题大家可以自行解决。 安装完毕之前的最后一步 CentOS环境安装- CentOS 7 安装接下来就进入CentOS的安装了 安装过程中几个关键点位，要确定好 选择中文，下一步 红框的几个地方请注意 修改成下图的样子 OK，我们已经做好配置了，接下来点击下一步，在下一步，你只需要配置一个root账户的密码就可以了 接下来就是几分钟的等待了，跟你电脑配置有关系，时间不等。 安装之后，打开CentOS操作系统，会出现一个嘿嘿的DOS命令窗口，输入账户root和你刚刚设置的密码，进入没有问题，完美~代表你的操作系统已经安装好了 接下来，为了方便我们后面的操作，我们要给我们的虚拟机安装一个GUI交互界面（也就是像windows一样的视窗操作软件） 安装的教程，我建议你观看 https://www.cnblogs.com/c-xiaohai/p/6509641.html 这个博主的，简单，清楚，一次成功。 如果失败了，怎么办，百度“如何安装gnome图形界面程序” 想办法啃下来。 当出现这样子的一些图标的时候，你成功了 可能碰到的问题好了，接下来说一下，你可能碰到的问题 你点击应用程序，里面找到一个叫做火狐浏览器的软件，然后打开，发现竟然无法上网？！你发现竟然无法使用中文输入法？！nice 这个问题，自行解决，随便找找一堆解决方案。好了，上面问题2解决了，那么解决一下问题1吧，这个问题首先确认一下你在一开始安装的时候，下面这个图配置的是否正确。 需要显示已连接 如果上图没有问题，那么99%的童鞋是可以上网的，那么还是有无法上网的，这时候，打开一个叫做终端的软件 输入代码 ping www.baidu.com网络通畅 如果联网失败，敲入下图中的命令，如果联网成功，那么下面的内容，你直接跳过，去查看安装Python部分吧。 CentOS环境安装- 网络连接失败，修改方案 使用命令 ，注意，你的文件不一定叫ifcfg-ens33，可能叫 ifcgf-xxx 操作都一样 vi ifcfg-ens33进入编辑页面 vi 的简单的操作 进入编辑状态请按键盘上的 i ...

妹子图网站----前言从今天开始就要撸起袖子，直接写Python爬虫了，学习语言最好的办法就是有目的的进行，所以，接下来我将用10+篇的博客，写爬图片这一件事情。希望可以做好。 为了写好爬虫，我们需要准备一个火狐浏览器，还需要准备抓包工具，抓包工具，我使用的是CentOS自带的tcpdump，加上wireshark ，这两款软件的安装和使用，建议你还是学习一下，后面我们应该会用到。 妹子图网站---- 网络请求模块requestsPython中的大量开源的模块使得编码变的特别简单，我们写爬虫第一个要了解的模块就是requests。 妹子图网站---- 安装requests打开终端：使用命令 pip3 install requests等待安装完毕即可使用 接下来在终端中键入如下命令 # mkdir demo # cd demo# touch down.py上面的linux命令是 创建一个名称为demo的文件夹，之后创建一个down.py文件,你也可以使用GUI工具，像操作windows一样，右键创建各种文件。 为了提高在linux上的开发效率，我们需要安装一个visual studio code 的开发工具 对于怎么安装vscode，参考官方的https://code.visualstudio.com... 有详细的说明。 对于centos则如下： sudo rpm --import https://packages.microsoft.com/keys/microsoft.ascsudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'然后用yum命令安装 yum check-updatesudo yum install code安装成功之后，在你的CentOS中会出现如下画面 接着说我们上面的操作 ，因为我们这边是用gnome图形界面，所以后面的有些操作，我直接用windows的操作风格讲解了 打开软件>文件>打开文件>找到我们刚刚创建的down.py文件 之后，在VSCODE里面输入 import requests #导入模块def run(): #声明一个run方法 print("跑码文件") #打印内容if __name__ == "__main__": #主程序入口 run() #调用上面的run方法 tips:本教程不是Python3的基础入门课，所以有些编码基础，默认你懂，比如Python没有分号结尾，需要对齐格式。我会尽量把注释写的完整 按键盘上的ctrl+s保存文件，如果提示权限不足，那么按照提示输入密码即可 通过终端进入demo目录，然后输入 ...

前言最新版 win10 已经加入了 linux 子系统功能，尝试后一周的开发后，个人感觉已经完全可以取代 macos 了，linux 环境下终端工具易用性、环境稳定性与 win10 的海量的软件相结合，再看看 PC 电脑的选择宽泛性，简直不要太赞，是时候放弃osx 选用 win10 作为 web 开发者生产力工具平台了。 参考Dev on Windows with WSL windows 10 linux子系统oh-my-zsh与Cmder配置-2018 打开 win10 linux 功能步骤1：打开程序与功能 步骤2：勾选 linux 功能并确定 安装 linux 发行版打开 win10 应用商店搜索 linux 关键字安装 ubuntu18打开 ubuntu18 应用图标根据终端提示访问网址后操作 powershell 以管理员模式启用功能再次打开 ubuntu 等待几分钟的安装ubuntu 切换为 Ali 源\cp -f /etc/apt/sources.list /etc/apt/sources.list_bak_`date +"%Y_%m_%d_%H_%M_%S"`;echo 'deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiversedeb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiversedeb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiversedeb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiversedeb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiversedeb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiversedeb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiversedeb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiversedeb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiversedeb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse' >/etc/apt/sources.list;apt-get updateapt-get upgrade安装 nodejssudo suapt updateapt install nodejsnode -vapt install npmnpm i -g nn lts安装 zshsudo apt-get install zsh安装 oh-my-zshsh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"修改 zsh 主题vim ~/.zshrcZSH_THEME="agnoster"启动 bash 默认进入 zshvim ~/.bashrcif test -t 1; then exec zshfi终端字体补全sudo apt-get install fonts-powerlineVSCode 配置{ "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe", "terminal.external.windowsExec": "C:\\Windows\\sysnative\\bash.exe" }PS: 后续再把相关的图补上，上面的教程已经满足入门尝试了。 ...

问题搭建开发环境遇到了上述问题, 本来以为很简单, 实际上倒腾了2-3小时, 在此做个记录. PYTHONPATH 是什么.https://code.visualstudio.com... In VS Code, PYTHONPATH affects debugging, linting, IntelliSense, unit testing, and any other operation that depends on Python resolving modules. For example, suppose you have source code in a src folder and tests in a tests folder. When running tests, however, they can't normally access modules in src unless you hard-code relative paths. To solve this problem, add the path to src to PYTHONPATH.可以看到PYTHONPATH会影响很多东西. 对开发影响最大的就是linting, IntelliSense, unit testing了. 我习惯了现代化IDE, 没有跳转总觉得少了点什么. ...

原文链接 https://jinkey.ai/post/tech/ru-he-pei-zhi-tou-ming-fa-guang-de-sao-qi-vscode转载请注明出处1 安装自定义 JS 和 CSS 插件 2 安装发光主题 3 添加样式配置文件在 VSCode 安装目录（自己随便选择一个文件夹也可以），放入以下文件。为了方便下载，文件整理到了 Github-Jinkeycode/vscode-transparent-glow，欢迎 star。 enable-electron-vibrancy.js开启 electron 透明支持 vscode-vibrancy-style.css这里使用 @孤狼 大佬提供的样式 synthwave84.css文字发光样式，样式请在 Github 获取。如果要不发光的，可以使用 synthwave84-noglow.css。可以 watch https://github.com/robb0wen/synthwave-vscode 保持更新通知。 toolbar.css引入以上大神的样式配置之后，左边导航栏有部分标题还是未透明状态，我自己修改了配置，引入即可。 4 修改 VSCode 配置文件点击上图 在 setting.json 中编辑，打开后加入配置(不需要大括号，直接把 key-value 加入原有 json 即可)： 5 重加载按下 Ctrl + Shift + P，运行 "Reload Custom CSS and JS", 重启 vscode 即可。如果提示VSCode 已经损坏，选择右上角齿轮“不再提示”即可。 6 总结成品效果如图，不懂的可以加小助手微信 udujjb 拉你进群询问 以上教程是基于 MacOS 的，Linux 用户如何开启透明请参考，Windows 的electron暂不支持vibrancy模式。Custom CSS and JS Loader 配置Linux 透明窗口 ...

都9102年了, 你的nodejs应用还在用console调试吗?从一开始使用 webstorm 内置的 debug 功能, 到使用node-inspector库进行调试顺便脱离 webstorm 的笨重, 再后来 nodejs 内置了debugger 模块也可以帮助调试我们的应用. 目前个人使用 vscode 进行日常开发, 本文主要介绍 vscode 平台的 debugger 调试功能. vscode 本身就内置了 nodejs 的 debug 支持, 除此之外还有有非常多 debug 的扩展插件可供安装使用. 可以点击调试菜单 -> 安装调试附加器, 会自动去到下载插件的页面, 并筛选出debugger类型的插件, 按下载量进行排序. 不仅支持 nodejs/js 的调试, 如 C/C++, python, go 等都有相应 debugger 插件, 一般而言下载量更多都会比较靠谱. 而我们主要是为了调试 nodejs 应用, 就不需要额外去下载插件了. 快速对当前文件进行 debug要对当前打开的文件进行 debug 在 vscode 是非常简单的事, 只需要按快捷F5或在编辑器左侧 debug 面板按下启动的按钮, 然后选择 debug 类型即可. ...

1. 网易云api网易云api是网上一位大神工具网易云获取的，数据都是真实的网易云数据 2. api大全这是csdn一个兄弟收集的，种类挺多，就是有一些需要money，不过大部分还是免费的 3. 免费api这是网上一个免费api网站，可以使用众多免费api 4.下面是我根据网易云api做的vue+electron高仿网易云桌面端应用，源码在github上，觉得可以的麻烦点个star，谢谢各位大佬高仿网易云

概述扩展可以让用户在VS Code中向开发工作流程添加新的语言、调试器和工具。VS Code提供了丰富的可扩展模块，允许扩展访问用户界面、提供扩展功能。通常情况下VS Code会安装多个扩展，所以作为一名扩展开发者，我们应该时刻关注扩展的性能，避免拖慢其它扩展，甚至是VS Code的主进程。 下面是我们在开发一款扩展时应该遵循的原则： 避免使用同步方法。同步方法会阻塞整个Node的进程，直到其返回结果。所以，你应该尽可能地使用异步方法。如果发现很难用异步方法替换同步方法，那么你应该考虑一下重构代码。只引用你需要的模块。有一些依赖模块非常巨大，比如说lodash。通常我们不需要lodash的全部方法，所以引用整个lodash模块并不合理。lodash的每个方法都有独立的模块，你应该只引用你需要的部分。谨慎对待启动条件。大多数情况下，你的扩展并不需要启动。不用使用“*”作为启动条件。如果你的扩展确实需要一直监听一些事件，考虑将主要的代码放在setTimeout里以低优先级运行。按需加载模块。import ... from ...是比较常用的引用模块的方法，但是有时这并不一定是个好的方法。比如一个叫做request-promise的模块，加载起来会耗费非常多的时间（在我自己这边测试需要1至2秒），但可只能有在特定的情况下我们才会需要请求远程的资源，比如本地的缓存过期了。上面提到的前三个原则很多开发者已经遵守了，在这篇文章中，我们会讨论按一种需加载的方法。这种方法要符合我们平时写TypeScript和JavaScript的习惯，同时也要尽可能减少更改现有代码的工作量。 按需加载模块符合习惯一般来说，我们在脚本的最顶端使用import来加载模块，比如下面的代码： import * as os from 'os';Node会同步加载指定的模块，同时阻塞后面的代码。 我们需要一个新的方法，比如叫做impor吧，用它可以引入模块，但并不马上加载这个模块： const osModule = impor('os'); // osModule不可访问，因为os模块还没有被加载为了达到这一目的，我们需要使用Proxy对象。Proxy对象被用来自定义一些基本操作的行为。 我们可以自定义get方法，只有当这个模块被调用时我们才开始加载它。 get: (_, key, reciver) => { if (!mod) { mod = require(id); } return Reflect.get(mod, key, reciver);}使用Proxy对象后，osModule是一个Proxy实例，并且只有当我们调用它的一个方法后，os模块才会被加载。 const osModule = impor('os'); // os模块还没有被加载...const platform = osModule.platform() // os模块从这里开始加载当我们只想使用模块的一部分时，广泛使用import {...} for ...的写法。可是这让Node不得不访问这个模块来检查其属性值。这样getter就会被调用，模块也会在那个时候被加载。 使用后台任务加载模块按需加载还不够，我们可以进一步来优化用户体验。在扩展启动和用户运行命令来加载模块之间，我们有充足的时间来提前加载模块。 很容易想到的一个办法，是创建一个后台任务来加载队列里的模块。 时间线我们开发了一个名叫Azure IoT Device Workbench的扩展，它可以结合多个Azure服务和流行的物联网开发板，简单地进行物联网项目的开发、编译、部署和调试。 由于Azure IoT Device Workbench涉及到的范围非常广泛，所以这个扩展启动起来非常繁重。同时它又需要监听USB事件，当物联网设备插入计算机后做出响应。 ...

翻译：疯狂的技术宅https://medium.freecodecamp.o...本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 你是不是一直都想学正则表达式，但是因为它的复杂性而被推迟了？在本文中，我将向你展示五个易于学习的正则技巧，你可以立即在自己喜欢的文本编辑器中使用它们。 文本编辑器设置虽然现在几乎所有的文本编辑器都支持正则表达式，但我在本教程中用的是 Visual Studio Code，不过你可以使用任何你喜欢的编辑器。另请注意，你通常需要在搜索输入框附近的某处打开 RegEx 开关。以下是在 VS Code 中执行此操作的方法： 你需要通过选中此选项启用RegEx 1) . — 匹配任何字符让我们开始吧。点符号 . 用来匹配任何字符： b.t 上面的正则匹配 "bot"，`"bat"和任何以b开头、t结尾的三个字符的单词。但是如果你想搜索点符号，则需要用 \ 来对它进行转义，所以下面这个正则只匹配确切的文本 "b.t"： b\.t 2) .* — 匹配任何东西这里 . 表示“任何字符”， * 表示“此符号重复前面那个内容任何次数。” 把它们放在一起（.*）表示“任何符号重复任意次数。” 例如，你可以用它来查找以某些文本开头或结尾的匹配项。假设我们有一个这样的 javascript 方法： loadScript(scriptName: string, pathToFile: string)我们想找到这个方法的所有调用，其中 pathToFile 指向文件夹“lua” 中的任何文件。可以使用以下正则表达式： loadScript.*lua这意味着，“匹配所有以 "loadScript" 开始同时以"lua"结束的字符串。” 3) ? — 非贪婪的匹配.* 之后的 ? 符号和其他一些匹配规则意味着“尽可能少的匹配”。 在上一张图中，每次匹配都会得到两次 "lua"字符串，直到第二个 "lua" 所有东西才能全部匹配完毕。如果你想匹配第一次出现的"lua"，可以使用以下正则： loadScript.*?lua这意味着，“匹配所有以 "loadScript"开头，后面为任意字符，直到第一次出现"lua" loadScript.*?lua：匹配以 loadScript 开头的所有内容，直到第一次出现"lua" ...

如果你在 vscode 中编写Angular，那么安装 ng-zorro-vscode 代码片断，对开发效率很有帮助。

命令常用快捷键快捷键解释ctrl+ shit+`调出终端ctrl+j打开面板Ctrl+/注释/反注释改行Alt+Z换行ctrl+K,m选择语言模式ctrl+shift+\定位到对应括号来个大图 python 相关如何添加package用快捷键ctrl+ shit+` 打开终端，输入python -m pip install packageNamepython3.x版本如何添加cryptopython2.7安装命令 pip install pycrypto，由于pycrypto 已经不再更新，现在出现一个分支pycryptodome,所以3.x版本需要安装此版本的crypto 命令：pip install pycryptodome

更新[2019-5-9]AddedInitial release0、前言由于最近在重写个人的原生ts插件项目, 遇到了集成jest单测的需求, 单纯地使用ts-jest + ts-loader会出现难以估计的错误, 所以决定使用babel, 完美摒弃了传统的ts-loader方案, 对于主要流程记录下. 项目地址: ts-utility-plugins同时也欢迎ts新手和想提升的你, 参与到项目中来, 详情可阅读Wiki 一、基本配置PS: 先通过简单的配置, 让webpack正常解析ts, 并且于测试环境中正常执行.1.1 第一步: 卸载依赖题目已经说的很清楚了, babel7的出现, 使得webpack对于ts文件的处理, 不再依赖于ts-loader等插件, 所以, 第一步就是和ts-loader港拜拜. npm uninstall --save-dev ts-loader1.2 第二步: 安装依赖PS: 对于依赖项的取舍, 暂时还未摸清, 凡事先用明白, 再去探究其原理or优化.暂时只用到了以下几种插件: npm install --save-dev babel-loader @babel/preset-env @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread1.3 第三步: babel配置.babelrc的基本配置: { "presets": [ "@babel/preset-env", "@babel/preset-typescript", ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread" ],}1.4 第四步: webpack配置webpack.config.ts基本配置: module: { rules: [ { test: /\.(ts|js)?$/, use: 'babel-loader', exclude: /node_modules/, }, ],}1.5 第五步: 基本测试启动测试服务器, 已可正常解析. ...

假设我有一个nodejs应用，运行在AWS - 亚马逊云平台上(Amazone Web Service)。我想用本地的Visual Studio Code来远程调试服务器端的nodejs应用。 Visual Studio Code的调试配置里定义了两种类型，attach和launch。Visual Studio Code的官方文档对这两种调试启动行为的解释： The best way to explain the difference between launch and attach is think of a launch configuration as a recipe for how to start your app in debug mode before VS Code attaches to it,Launch的意思简而言之就是以debug模式启动app。 while an attachconfiguration is a recipe for how to connect VS Code's debugger to an app or process that's alreadyrunning.而Attach的含义是将Visual Studio Code的调试器绑定到一个已经处于运行状态的应用。 ...

npm run build 文件过大打包生成文件： 浏览器访问效果： 第一步：Nginx开启gzip （配置完切记重启nginx） 后台配置nginx.config。关于gzip压缩代码： http {　gzip on; #开启或关闭gzip on off gzip_disable "msie6"; #不使用gzip IE6 gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节） gzip_buffers 4 16k; #buffer 不用修改 gzip_comp_level 3; #压缩级别:1-10，数字越大压缩的越好，时间也越长 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型 gzip_vary off; #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding" } 第二部：vue项目中config/index.js productionGzip: true, //是否开启gizp压缩 productionGzipExtensions: ['js', 'css'], 开启后cnpm run build 会生成*.gz文件。像这样： ...

网上方法如果用了tsconfig.paths功能就报错 { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Debug Nest Framework", "args": ["${workspaceFolder}/src/main.ts"], "runtimeArgs": ["--nolazy", "-r", "ts-node/register"], "sourceMaps": true, "cwd": "${workspaceRoot}", "protocol": "inspector", "console": "integratedTerminal" } ]}根据nodemon-debug.json改良后{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Debug Nest Framework", "args": ["${workspaceFolder}/src/main.ts"], "runtimeArgs": ["--nolazy", "-r", "ts-node/register", "-r", "tsconfig-paths/register"], "sourceMaps": true, "cwd": "${workspaceRoot}", "protocol": "inspector", "console": "integratedTerminal" } ]}

现在用VSCode开发Vue.js应用几乎已经是前端的标配了，但很多时候我们看到的代码混乱不堪，作为一个前端工程师，单引号双引号乱用，一段有分号一段没有分号，有的地方有逗号有的地方没有逗号，空格回车都对不齐，还说自己做事认真，这不是开玩笑的事情。 我们今天从头开始，完整地讲述一下一个重度代码洁癖患者该如何用vscode开发vue，以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标准美女。 从安装开始为了准确起见，我们把vscode里所有插件全部禁用，把用户设置清空，以让它尽可能恢复成原始的样子： 作为代码洁癖患者，对于系统的版本要求一定也是最苛刻的，不管什么时候，都让我们把所有的系统能升级的都升级到最高版本： npm install -g @vue/cli然后，我们开始创建项目： vue create hello-world在这里，一定要选择第一项：babel + eslint，这两个是必不可少的。我见到有些人嫌eslint麻烦，居然在项目建立好之后手工把eslint关掉的，简直无语。 安装完毕： 我们先不急着执行，执行代码是最容易的事情，我们先打开代码看一下： 好吧，至少我们需要先安装vetur插件。这几乎已经确定是开发vue项目的标配了，即使我不说，vscode也会强烈建议你安装它。 装上vetur以后多少有点人样了。接下来我们来试一试能不能自动格式化，这部分才是洁癖患者的最爱。胡乱加几个空格，然后保存试试看： 不能格式化，连个提示都没有！ 用lint格式化就算vscode里的vetur不能帮我们自动格式化，好在package.json命令里还有一个lint命令，我们看看lint命令能不能帮我们自动格式化： lint居然说没有错误！明明就是多了很多空格的错误好吧，为什么？ 这是因为缺省的vue-cli没有为我们安装@vue/prettier插件，我们先来手工安装一下： yarn add -D @vue/eslint-config-prettier然后在package.json或者.eslintrc.js或者其它什么你设置eslint的地方，给它加上： "extends": [ "plugin:vue/essential", "eslint:recommended", "@vue/prettier" ],特别是最后这一个@vue/prettier，非常重要。然后再执行yarn lint。多余的空格被自动干掉了，但是我们发现有一些地方同时也被篡改了： 所有的单引号被变成双引号了，原本行尾没有的分号被加上了分号。这是为什么呢？因为我们虽然引入了prettier，但是还没有对prettier做设置，我们在项目的根目录下创建一个.prettierrc.js文件，然后在其中加入： module.exports = { semi: false, singleQuote: true}再次执行yarn lint，现在我们看到lint已经能够起作用了。它不但能把我们多余插入的空格删掉，并且能按照规则把双引号变成单引号，把行尾多余的分号删掉。当然，关于行尾加不加分号这是一个哲学命题，你可以根据你个人的喜好自行决定。在这里，我们权且按照vue-cli的标配执行。 到这一步很关键，假设你拿到一个烂的不再烂的vue项目，里面有几千个.vue文件，几万个各种格式错误，也都能通过yarn lint这一行命令把它们全部修正过来！ 在vscode里格式化事情还没有完，我们注意到虽然yarn lint命令能在编写完代码之后帮我们格式化，但是既然我们是用vscode进行开发，我们当然希望能在vscode里直接看到对于错误的标注。 这时候我们需要在vscode里再安装一个插件eslint。 你以为安装上eslint插件就行了吗？不行的。因为eslint并不知道我们的.vue文件里面包含了js语法，所以还需要打开我们的vscode设置文件。 注意：这里一定要设置到项目的设置里，而不要只是设置到你自己个人的设置里，否则你团队的小伙伴随便一改又乱掉了。正确的方法是在你项目的文件夹下有一个.vscode文件夹，而vue最讨厌的地方是它居然会把这个文件夹放到.gitignore里，这个错误你必须要纠正过来，也就是说从.gitignore文件里把.vscode删掉。切切。在你项目的settings.json里文件里添加以下代码： { "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ],}这时候所有错误都被标注出来了，注意看左侧，一定要让这个settings.json文件是绿色的，而不能是灰色的，如果是灰色的，请检查你的.gitignore文件： ...

如何在vscode中用JavaScript Standard Style风格去验证 vue文件实际上JavaScript Standard Style有一个FAQ, 说明了如何使用。 但是有一点非常重要的作者没有提到，就是eslint-plugin-html这个插件必须要安装3.x.x版本的, 现在eslint-plugin-html, 已经升级到4.x版本，默认不写版本号安装的就是4.x版本的，所以会出现问题。 参考：详情请参考 https://www.npmjs.com/package... 此ESLint插件允许linting和修复HTML文件中包含的内联脚本。 迁移到v4 eslint-plugin-htmlv4至少需要ESLint v4.7。这是因为ESLint v4.7中发生了许多内部更改，包括支持预处理器中自动固定的新API。如果您仍在使用旧版本的ESLint，请考虑升级或继续使用 eslint-plugin-htmlv3。 eslint-plugin-htmlv4中的重要特性（和重大变化）是能够选择在同一HTML文件中的脚本标记之间共享范围的方式。 迁移到v3 如果您正在考虑升级到v3，请阅读本指南。ESLint v4 is only supported by eslint-plugin-html v3, so you can't use eslint-plugin-html v1.5.2 with it (I should add a warning about this when trying to use the plugin with an incompatible version on ESLint).If you do not use ESLint v4, please provide more information (package.json, a gist to reproduce, ...)// FAQHow to lint script tag in vue or html files? ...

作为一名前端开发工程师，我们每天都想着代码怎么抽成组件，公共方法。目的是为了减少工作量。但是你有没有想过我们一直在写重复的代码，比如每天都会写 import {xxx} from 'antd';或者 function name() { return ( <div> xxxx </div> )}等等。这些代码其实总是一样的，你每天都会去敲，那我们能不能有个快捷键，能帮我们一键生成，而且可以根据我们的定义生成呢？答案是有的，vscode里面的用户代码片段（User Snippets）就帮我们实现这个功能。入口在file -> preferences -> User Snippets 选择图示的文件，那么这里就是可以自定义的代码片断的地方。我举一个例子你们就明白了，看代码： "console": { "prefix": "log 打印", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console"},在这段代码中，prefix是指你要提示的代码前缀，效果如图： 第二个就是我们自定义的代码片段选择之后的效果： 这个就是我们在代码中定义的body。怎么样，方便吧。在body中还有一些常用的符号： ${1} ${2}：代表着光标跳转的地方，按tab键会直接跳转到你定义的地方，特殊的$0表示光标最后停留的地方/t /n：分别代码tab缩进，换行 还有一个小问题是自定义的代码提示有时候会在其他代码提示后面，类似： 这就很不爽了，那怎么把它提前呢？只要在setting.json里面配置 "editor.snippetSuggestions": "top","editor.tabCompletion": "on", // 按tab快速补全自定义代码片段就可以了，效果： 大概就这些啦，还有更详细的你们可以参考文章：地址 下面贴上本作配置的几个实用的javascript配置： { "console": { "prefix": "log 打印", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" }, "function": { "prefix": "function 新建方法", "body": "function ${1:name}() {${2}}", "description": "方法" }, "import": { "prefix": "import 导入资源", "body": "import {$0} from '';", "description": "导入" }, "react": { "prefix": "react 新建类", "body": [ "import React from 'react';", "", "export default class ${1:Name} extends React.Component {${2}}", ] }, "return": { "prefix": "return 返回组件", "body": "return (\n\t$0\n);" }}后续还会更新。记得收藏哦。 ...

hapi框架，用官网的简介来说就是：Hapi是构建应用程序和服务的丰富框架，它使开发人员能够专注于编写可重用的应用程序逻辑，而不是花时间构建基础设施。用自己的话简单来说，就是个类似express，koa之类的node服务基础框架。此篇博客是在阅读过掘金小册的《基于 hapi 的 Node.js 小程序后端开发实践指南》并实践操作后，以此记录实践过程和踩过的坑。感兴趣读者可支持阅读掘金小册原版的内容。Joi数据校验1.安装joi更多校验规则参考文档：https://www.npmjs.com/package...npm i @hapi/joi2.配合swagger只需要在路由的config配置校验信息，如./routes/test.js 新增多一条测试接口{ method: "GET", path: `/${GROUP_NAME}/get`, handler: (request, h) => { return { data: request.query }; }, config: { tags: ["api", GROUP_NAME], description: "测试get提交", notes: "配置Implementation说明文", validate: { query: { num: Joi.number() .integer() .required() .description("数字") .error(new Error("num参数错误")) } } } },3.swagger接口文档 Sequence的使用1.安装此案例链接mysql数据库，所以安装mysq2npm i sequelize-cli -Dnpm i sequelizenpm i mysql22.使用到的目录和文件├── config # 项目配置目录| ├── config.js # 数据库连接的配置(区分开发/生产环境)| ├── index.js # 暴露部分配置信息给app.js使用├── models # 数据库 model| ├── index.js # 数据库连接的样板代码├── migrations # 数据迁移的目录├── seeders # 数据填充的目录├── .env # 配置3.env配置数据库信息注意需要在本地mysql中创建对应的数据库, 如:hapi_db# 域名配置信息HOST = 127.0.0.1PORT = 3303# MySQL 数据库连接配置信息MYSQL_HOST = 127.0.0.1MYSQL_PORT = 3306MYSQL_DB_NAME = hapi_dbMYSQL_USERNAME = rootMYSQL_PASSWORD = 1234564. 暴露给入口文件使用的数据信息新建./config/index.jsconst { env } = process;module.exports = { host: env.HOST, port: env.PORT};5. 模式model使用新建./config/config.js给后台将要创建的数据库模型model使用的数据信息// 根据环境动态加载数据库配置信息// 本页面内容主要给数据库连接使用（../models/index.js）if (process.env.NODE_ENV == "production") { require("env2")("./.env.prod");} else { require("env2")("./.env");}const { env } = process;module.exports = { development: { username: env.MYSQL_USERNAME, password: env.MYSQL_PASSWORD, database: env.MYSQL_DB_NAME, host: env.MYSQL_HOST, port: env.MYSQL_PORT, dialect: "mysql", operatorsAliases: false }, production: { username: env.MYSQL_USERNAME, password: env.MYSQL_PASSWORD, database: env.MYSQL_DB_NAME, host: env.MYSQL_HOST, port: env.MYSQL_PORT, dialect: "mysql", operatorsAliases: false }};使用sequelize创建表1.数据库的创建sequelize提供创建数据库的命令，但最后还需要自己动手修改数据库格式为utf-8，所以还是手动直接创建方便2.migration创建表创建一个商品表 shops根据以下命令，将会自动创建./migration/2019XXXXXXXXX-create-shops-table.js其实是可以直接在mysql创建表并填写数据，但这里使用migration来创建主要为了留下对表的创建修改等记录，未来有查询依据。就类比记录创建日志。./node_modules/.bin/sequelize migration:create --name create-shops-tablexxxx-crate.shops.table.js"use strict";module.exports = { up: (queryInterface, Sequelize) => { return queryInterface.createTable("shops", { id: { type: Sequelize.INTEGER, autoIncrement: true, primaryKey: true }, name: { type: Sequelize.STRING, allowNull: false }, thumb_url: Sequelize.STRING, created_at: Sequelize.DATE, updated_at: Sequelize.DATE }); }, down: (queryInterface, Sequelize) => {face.dropTable("shops"); }};3. 向mysql数据库中创建表在项目根目录下执行命令./node_modules/.bin/sequelize db:migrate成功创建示例 ...

hapi框架，用官网的简介来说就是：Hapi是构建应用程序和服务的丰富框架，它使开发人员能够专注于编写可重用的应用程序逻辑，而不是花时间构建基础设施。用自己的话简单来说，就是个类似express，koa之类的node服务基础框架。此篇博客是在阅读过掘金小册的《基于 hapi 的 Node.js 小程序后端开发实践指南》并实践操作后，以此记录实践过程和踩过的坑。感兴趣读者可支持阅读掘金小册原版的内容。路由汇总1. 在./routes目录下新建index.js作为路由的汇总，这样以后只管在./routes下新建文件即可"use strict";const fs = require("fs");const path = require("path");const basename = path.basename(__filename); // 当前文件名let routeArr = [];// 同步读取当前目录，并过滤除了当前文件的文件名数组fs.readdirSync(__dirname) .filter(file => { // 过滤掉隐藏文件、当前文件、非js文件, 返回当前目录下文件名称数组 return ( file.indexOf(".") !== 0 && file !== basename && file.slice(-3) === ".js" ); }) .forEach(file => { // 引入路由模块 let arr = require(path.join(__dirname, file)); // 汇总 routeArr.push(...arr); });module.exports = routeArr;测试路由1.新建test.js文件作为测试const GROUP_NAME = "test";module.exports = [ // 纯测试返回 接口 { method: "GET", path: `/${GROUP_NAME}`, handler: (request, h) => { const data = { message: "test" }; // 响应数据方式： // return h.response(data).code(200); return data; } },]2.修改app.js ...

hapi框架，用官网的简介来说就是：Hapi是构建应用程序和服务的丰富框架，它使开发人员能够专注于编写可重用的应用程序逻辑，而不是花时间构建基础设施。用自己的话简单来说，就是个类似express，koa之类的node服务基础框架。此篇博客是在阅读过掘金小册的《基于 hapi 的 Node.js 小程序后端开发实践指南》并实践操作后，以此记录实践过程和踩过的坑。感兴趣读者可支持阅读掘金小册原版的内容。第一个helloworld1.在新建项目目录中初始化配置文件npm init2.安装hapinpm i hapi3.全局安装热部署工具supervisor(类似nodemon)npm install supervisor -g4.新建app.js，可从官网案例中抄示例代码'use strict';const Hapi = require('hapi');const init = async () => { const server = Hapi.server({ port: 3000, host: 'localhost' }); server.route({ method: 'GET', path:'/', handler: (request, h) => { return 'Hello World!'; } }); await server.start(); console.log('Server running on %ss', server.info.uri);};process.on('unhandledRejection', (err) => { console.log(err); process.exit(1);});init();5.终端运行项目 6.浏览器测试效果 目录结构划分 (PS: 根据需要可以将业务逻辑代码再划分到controllers层)├── config # 项目配置目录├── logs # 输出日志├── migrations # 创建数据库文件├── models # 数据库 model├── node_modules # node.js 的依赖目录├── plugins # 插件目录├── routes # 路由目录├── seeders # 初始化表数据文件├── test # 测试类├── utils # 工具类相关目录├── .env # 配置文件├── app.js # 项目入口文件├── package.json # JS 项目工程依赖库├── readme.md # 项目工程如何被使用的说明手册配置全局环境信息1. env配置示例配置env的意义在于，不同的环境下域名数据库等信息不一定一致，通过配置手段加载读取更灵活。同时全局环境直接获取。# 域名配置信息HOST = 127.0.0.1PORT = 3303# MySQL 数据库连接配置信息MYSQL_HOST = 127.0.0.1MYSQL_PORT = 3306MYSQL_DB_NAME = database_nameMYSQL_USERNAME = database_usernameMYSQL_PASSWORD = database_password# JWT 自定义secretJWT_SECRET = your_secret# 微信小程序配置WX_APPID = your-app-id # 微信小程序appidWX_SECRET = your-secret # 微信小程序密码WX_MCHID = your-mchid # 支付商户号WX_PAY_API_KEY = your-pay-api-key # 微信支付的 api key2.安装env2通过此依赖可在js代码中直接读取.env配置的参数信息（如：读取端口号 process.env.PORT）npm i env23.示例获取 ...

2019.04.23 已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改<img src="1.jpg" style="width:480px!important;”>解决方案: css3的缩放： transform(scale(0.625, 0.625));js: document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")css: max-width: 300px; (这个我当时没想到...)css: box-sizing: border-box; padding-left: 90px; padding-right: 90px; (这个我当时也没想到...)2019.03.22 Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？这个很明显，promise构造函数是同步执行的，then方法是异步执行的。我从回答中选了个稍微复杂点的例子： const promise = new Promise((resolve, reject) => { console.log(1); resolve(5); console.log(2);}).then(val => { console.log(val);});promise.then(() => { console.log(3);});console.log(4);setTimeout(function() { console.log(6);});//执行结果: 124536这里会牵涉一个宏任务(macrotask)和微任务(microtask)的执行顺序问题，进而牵出javascript的事件循环(EventLoop)。 上干货：这一次，彻底弄懂 JavaScript 执行机制，阮一峰 JavaScript 运行机制详解：再谈Event Loop不想看的也可以直接看这里：先执行一个宏任务(其实运行js的时候这个宏任务已经在运行)，然后执行微任务，清空微任务队列，再执行宏任务，再执行微任务，清空微任务队列... 常见的任务类型: 微任务 microtask(jobs): promise / ajax / Object.observe(该方法已废弃)宏任务 macrotask(task): setTimout / script / IO / UI Rendering

如果你检索到了，忽略此文章，只是一个草稿。 既然做前端这个职业，那么对于它的来龙去脉，得了解，算称职点吧。查阅了四个人的技术博客，维基百科查找资料，前端技术发展，以前不叫前端，只是页面工程师。 起源当浏览器还没有时候，一个叫伯纳斯李的人，发明了一个HTML，叫超文本标记语言，主要是为了跟同事们，不需要什么都面对面交流，只要分享自己的文档就好了，就写了这个HTML。那它的承载环境是什么呢？谁去识别这个HTML呢？如果不是浏览器，那是谁？所以浏览器和HTML谁先出来，当然是浏览器了。 发展一开始，HTML只是承载数据的标签，没有样式，没有排版，就是从上到下，从左到右。后来有了CSS样式，布局变得好看了，字体变得好看了，有动画了。这还是算静态网页，到了后来有了javaScript语言嵌入浏览器中，网页可以做交互了，脚本语言控制浏览器上的HTML,去做一些样式变化、布局的变化，数据的变化了。全靠DOM提供了API接口。 后来Ajax出现了，web2.0来了，再也不用，请求数据，要很慢且要一整张HTML页面返回了，可以局部刷新，返回我们要的数据了。 2009年node，出现了，如果没有node也许没有现在的三大主流框架，现在很多包都发布在了npm上，每个包都有自己的功能，node基于谷歌V8引擎可运行javaScript的环境。node能做什么？不能做什么？要清楚。 现在现在主流框架React、Vue、Angular出现了，它们不同于Jquery这些库，Jquery这些库只是对DOM的封装，以及解决了浏览器的兼容问题。但是现在三大主流框架可不是对DOM的封装，他们是对DOM的抽象，我们再不需要亲自去操作DOM了，现在是声明式开发，我们要写什么标签，如何去更改HTML、CSS无须我们去操作DOM,框架会去做，这样开发思想就不一样了，数据驱动开发了。

上图可以看到，我使用Angluar文件夹装了几个项目在里面，但是我的.vscode调试是在Angluar目录下的（这个 是问题所在，需要在指定的项目下，创建.vscode调试）这个是vscode的调试配置目录和需要调试的项目文件选择（Angluar）这时，打断点时，发现出现“未验证的断点”，调试不了。网上也有人遇到，但是没看到解决文案，今天突然想了一下，弄好了。但不是很好用。可以使用debugger;调试也行，只是需要自己写这等代码。解决“未验证的断点”处理在对应有项目里，选择项目，配置调试文件即可再点需要调试的点，再F5启动调试即可调试。F10是下一步；最后，个人感觉这个调试vue/angluar调试不是很好用，因为会跳转到vue/angluar源码里进行调试，调试得不是很好看

摘要： 面试刷题指南。原文：如何在 VS Code 中调试 LeetCode 代码作者：neo-csFundebug经授权转载，版权归原作者所有。近期收到不少小伙伴的求助，希望知道如何在 VS Code 中调试 LeetCode 代码。通常来说，为了调试本地代码，我们需要安装相关的语言支持插件。本文中，我们就以调试 LeetCode Java 代码为例，给大家介绍本地调试 LeetCode 代码的常用套路。想要了解如何在 VS Code 中刷题的小伙伴，可以移步：LeetCode for VS Code: 春招 Offer 收割利器。准备工作首先确保系统内安装了JDK，相关教程有很多，此处就不赘述了。之后我们需要确保在 VS Code 中安装了下列插件：1. LeetCode用来生成题目，提交答案。2. Language Support for Java(TM) by Red Hat提供智能提示等语言相关的功能。3. Debugger for Java，Java 调试器。安装完成之后，VS Code 的插件管理栏中，就可以看到这三个插件了：如果在打开 Java 文件后，VS Code 提示找不到 JDK，请检查一下相关配置是否正确。编写调试代码：我们就拿第 20 题：有效的括号作为例子。在作答过程中，可能会看到编辑器里出现一些红线。不要担心，这表明 Language Support for Java 插件正在起作用。通常这意味着你的代码存在语法错误，下面的例子展示的错误原因是用到了依赖包但没有 import 到当前文件当中。我们可以利用 Quick Fix 功能进行修复：将依赖包导入时为了确保文件能够被正确编译。LeetCode 在检查答案的时候，并不会要求文件中存在相应的 import 语句，因此存不存在 import 语句不会影响最后的检查结果。写完答案之后，我们还需要在同一个文件中，增加一个 Main 函数作为调试程序的执行入口，整个文件的代码结构如下：class Main { public static void main(String[] args) { // Create a new Solution instance Solution solution = new Solution(); // Create a test case String testCase = “()[]{}”; // Get the answer boolean answer = solution.isValid(testCase); // Print the answer System.out.println(answer); }}class Solution { … public boolean isValid(String s) { … return answer; }}此时我们会看到在 Main 函数的上方出现了两个 CodeLens 按钮：点击 Run 按钮会运行 Main 函数，我们可以在下方弹出的 Debug Console 中看到程序的输出结果（因为我们在最后一行代码用了 println 输出答案）。如果想要调试的话，可以在相应的行号位置设置好断点，点击 Debug 按钮，就可以进入调试模式查看代码运行情况了。这里有一点需要注意的是，由于 LeetCode 生成的答题模板的类名均为 Solution，因此会造成同一个目录下存在多个同名类的情况出现，可能导致代码无法正确执行，因此如果希望调试 LeetCode Java 代码，但当前目录又存在有多个 LeetCode Java 文件时，需要保证类名的唯一性，我们可以把被调试的 Solution 类改一个名字（但要记住提交时把名字改回来），或者干脆拷贝到另一个干净的目录下调试即可。以上就是如何在 VS Code 中调试 LeetCode Java 代码的步骤，对于其他语言来说，基本也是大同小异的步骤，如果你有更好的建议或者有自己喜欢的调试技巧，欢迎在评论区留言！ ...

装了台PC在家，记录一下安装开发环境的过程。shadowsocket 在 GitHub 直接下载安装包，先解决上网问题。配置vscode ， 通过 Settings Sync 插件，同步一下 vscode 的依赖包。 在此处有个坑。选择下载配置后没让我输入 token 直接报错了， 查了一下issue 发现 是个新版本的 bug。 重启下vscode 即可。安装 node。在 Mac上用的是 nvm 来管理 node的版本，window 上也有同样的工具。 nvm-windows, 下载 可执行 程序 nvm-setup.zip。 一键到底即可。 此处的坑是 nvm 的环境变量已经加入，在window 的环境变量里面看到了，但是还要重启电脑才能让环境变量生效，FFFFFF。安装 nrm 管理 npm 的注册地址。安装 yarn。 发现yarn 在window下可以通过 choco 来安装, choco 是一款 window 上 类似 brew 的包管理 工具。安装choco 的过程中需要使用 管理员身份运行 命令行，不然会有 权限报错。附加： 在Mac 上深受 Alfred 的毒， window 下也有一款类似的软件，叫 Wox，可以快速搜索，唤醒应用等。 有点不爽的是Wox貌似不能默认 使用搜索引擎， 每次都要先打个 g 触发谷歌搜索，蛋疼呀~另外，windows(10)上自带粘贴板历史的功能啦，win + v 触发。 虽然只能记录文字，还是 真香！在设置内搜索 剪切板即可。 ...

最近考虑把公司的常用代码用扩展处理成复用的, 照着文档处理了一遍.Snippets 扩展关于扩展的结构, 可以直接参考官方给出的示例,一个 package.json 文件, 加上一个 Snippets 的 JSON 文件, 就算写完了:https://github.com/Microsoft/…其中 Snippets 的定义大概是这样,key 跟 description 只是介绍性文字prefix 是 snippet 在自动补全当中的触发字段body 当中的代码片段, 更开是换行$1 ${1:placeholder} 这样的写法, 表示 Tab 控制的光标位置, 其中 $0 表示结束位置{ “For_Loop”: { “prefix”: “for”, “body”: [ “for (const ${2:element} of ${1:array}) {”, “\t$0”, “}” ], “description”: “For Loop” }}复杂的例子就看别人写的扩展了:https://github.com/xabikos/vs…VS 还支持一些复杂的功能, 直接看文档上:https://code.visualstudio.com…安装扩展安装扩展需要一个命令行工具, 在 package.json 所在目录运行:npm install -g vscevsce package这时会生成一个扩展名为 .vsix 的文件, 就可以通过 VS Code 的命令安装了:code –install-extension my-extension-0.0.1.vsix这一步也可以通过 VS Code 图形界面来完成:发布扩展到市场说的话大致步骤不麻烦, 大致上:先到 https://dev.azure.com/ 上注册账号, 创建组织,在 dev.azure 访问自己的 security 页面创建一个 token, 选中所有 Marketplace 权限,在组织当中创建一个 creator, 命令行或者界面都能操作, 把 creator id 写进 package.json,然后通过 publish 子命令发布…https://code.visualstudio.com…不过…实际操作挺多坑的, 网络有时候不好, 提示也不明确, 我浪费了不少的时间查原因.结尾VS Code 用支持 .vscodeignore, 也支持 icon, 结构跟 npm 模块也类似.最后是我厂的 Snippet 代码, 目前功能很少, 后续慢慢扩展:https://github.com/jimengio/j… ...

一、环境Node.js v10.15.3npm 6.9.0Visual Studio Code 1.33.0 (user setup)2019/4/6Koa2-Node.js QQ群：481973071二、开发 TypeScript1、建立项目目录使用以下命令创建项目的目录：mkdir ts3cd ts3mkdir srcmkdir dist建立好的目录如下：ts3├─dist└─src2、初始化 NPM在项目的根目录下，执行下面的命令：npm init -y现在项目结构如下：ts3├─dist└─src└─package.json3、安装 TypeScript在项目的根目录下，执行下面的命令：npm i -g typescript4、创建并配置 tsconfig.json在项目的根目录下，执行下面的命令：tsc –init现在项目结构如下：ts3├─dist└─src└─package.json└─tsconfig.json在 tsconfig.json 中取消下面属性项的注释，并修改其属性的值：这样设置之后，我们在 ./src 中编码 .ts 文件，.ts 文件编译成 .js 后，输出到 ./dist 中。“outDir”: “./dist”,“rootDir”: “./src”,5、Hello Typescript将下面代码复制到./src/index.ts中：const hello: string = ‘hello, Alan.Tang’;console.log(hello);在项目的根目录下，执行下面的命令：tsc 是编译命令，详情查看：https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.htmltsc 的编译选项，详情查看：https://www.tslang.cn/docs/handbook/compiler-options.htmltscnode ./dist/index.js执行结果如下：PS C:\Users\Alan\TestCode\ts3> tscPS C:\Users\Alan\TestCode\ts3> node ./dist/index.jshello, Alan.Tang6、使用自动实时编译手动编译还是比较麻烦，如果能够保存代码后，自动编译就好了。详情查看：https://go.microsoft.com/fwlink/?LinkId=733558Ctrl + Shift + B 运行构建任务，将显示以下选项：选择 tsc: 监视 - tsconfig.json ，回车运行之后，编辑的代码保存之后，就会自动编译。7、简化运行命令每次输入 node ./dist/index.js 执行代码，有点麻烦，因为命令太长了。在命令行界面，按键盘 ↑ 切换历史输入命令，可以快速使用历史输入过的命令。三、代码检查代码检查主要是用来发现代码错误、统一代码风格。详情查看：https://ts.xcatliu.com/engineering/lint.html1、安装 ESLintESLint 可以安装在当前项目中或全局环境下，因为代码检查是项目的重要组成部分，所以我们一般会将它安装在当前项目中。可以运行下面的脚本来安装：npm install eslint –save-dev由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装 typescript-eslint-parser，替代掉默认的解析器，别忘了同时安装 typescript：npm install typescript typescript-eslint-parser –save-dev由于 typescript-eslint-parser 对一部分 ESLint 规则支持性不好，故我们需要安装 eslint-plugin-typescript，弥补一些支持性不好的规则。npm install eslint-plugin-typescript –save-dev现在项目结构如下：ts3├─dist└─node_modules└─src└─package-lock.json└─package.json└─tsconfig.json2、创建配置文件 .eslintrc.jsESLint 需要一个配置文件来决定对哪些规则进行检查，配置文件的名称一般是 .eslintrc.js 或 .eslintrc.json。当运行 ESLint 的时候检查一个文件的时候，它会首先尝试读取该文件的目录下的配置文件，然后再一级一级往上查找，将所找到的配置合并起来，作为当前被检查文件的配置。在项目的根目录下，执行下面的命令：创建配置文件./node_modules/.bin/eslint –init按需求，选择相应的选项：您想如何使用ESLint?? How would you like to use ESLint?To check syntax, find problems, and enforce code style您的项目使用什么类型的模块?? What type of modules does your project use?JavaScript modules (import/export)您的项目使用哪个框架?? Which framework does your project use?None of these你的代码在哪里运行?(按<space>选择，<a>切换所有，<i>反转选择)? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Node您想如何为您的项目定义一个样式?? How would you like to define a style for your project?Use a popular style guide您想遵循哪种风格指南?? Which style guide do you want to follow?Airbnb (https://github.com/airbnb/javascript)您希望配置文件的格式是什么?? What format do you want your config file to be in?JavaScriptChecking peerDependencies of eslint-config-airbnb-base@latest您所选择的配置需要以下依赖项:The config that you’ve selected requires the following dependencies:eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0您想现在用npm安装它们吗?? Would you like to install them now with npm?YesInstalling eslint-config-airbnb-base@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0npm WARN ts3@1.0.0 No descriptionnpm WARN ts3@1.0.0 No repository field.+ eslint-config-airbnb-base@13.1.0+ eslint-plugin-import@2.16.0+ eslint@5.16.0added 53 packages from 37 contributors, updated 1 package and audited 286 packages in 10.303sfound 0 vulnerabilitiesSuccessfully created .eslintrc.js file in C:\Users\Alan\TestCode\ts3现在项目结构如下：ts3├─dist└─node_modules└─src└─.eslintrc.js└─package-lock.json└─package.json└─tsconfig.json编辑 .eslintrc.js，增加 parser: ’typescript-eslint-parser’, 替换掉默认的解析器，使之识别 TypeScript 的一些语法，如下面所示：module.exports = { parser: ’typescript-eslint-parser’, env: { es6: true, node: true, }, extends: ‘airbnb-base’, globals: { Atomics: ‘readonly’, SharedArrayBuffer: ‘readonly’, }, parserOptions: { ecmaVersion: 2018, sourceType: ‘module’, }, rules: { },};3、在 VSCode 中集成 ESLint 检查在编辑器中集成 ESLint 检查，可以在开发过程中就发现错误，极大的增加了开发效率。要在 VSCode 中集成 ESLint 检查，我们需要先安装 ESLint 插件，点击「扩展」按钮，搜索 ESLint，然后安装即可。VSCode 中的 ESLint 插件默认是不会检查 .ts 后缀的，需要在「文件 => 首选项 => 设置」中，添加以下配置：{ “eslint.validate”: [ “typescript” ]}将下面代码复制到./src/index.ts中：let num: number = 1;if (num == 2) { console.log(num);}现在项目结构如下：ts3├─dist└─node_modules└─src └─index.ts└─.eslintrc.js└─package-lock.json└─package.json└─tsconfig.json现在编辑器，应该会提示 4 个错误：我们按照错误提示，修改成正确的代码风格：console.log 一般是在调试阶段使用，发布正式版本时，应该移除。所以这里没有提示红色的致命错误，而是使用了警告。4、无法解析到模块的路径将下面代码复制到./src/index.ts中：import Cat from ‘./Cat’;const kitty: Cat = new Cat(‘kitty’);kitty.say();将下面代码复制到./src/Cat.ts中：export default class Cat { private name: string; constructor(name: string) { this.name = name; } say() { console.log(this.name); }}现在项目结构如下：ts3├─dist└─node_modules└─src └─Cat.ts └─index.ts└─.eslintrc.js└─package-lock.json└─package.json└─tsconfig.json上述代码复制粘贴，保存之后，会提示这样的错误：Unable to resolve path to module ‘./Cat’.eslint(import/no-unresolved)解决办法是使用 eslint-import-resolver-alias ，先安装依赖，执行下面的命令：npm install eslint-plugin-import eslint-import-resolver-alias –save-dev然后，在 .eslintrc.js 配置中，编辑成如下代码：module.exports = { parser: ’typescript-eslint-parser’, env: { browser: true, es6: true, }, extends: ‘airbnb-base’, globals: { Atomics: ‘readonly’, SharedArrayBuffer: ‘readonly’, }, parserOptions: { ecmaVersion: 2018, sourceType: ‘module’, }, rules: { }, settings: { ‘import/resolver’: { alias: { map: [ [’@’, ‘./src’] ], extensions: [’.ts’], }, }, },};四、调试 TypeScript如何 F5 开始调试 TypeScript ，并且还具备断点调试功能，答案是，使用 TS-node。详情查看：https://github.com/TypeStrong/ts-node在项目的根目录下，执行下面的命令：npm install -D ts-node在 VScode 调试中，添加配置：{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 “version”: “0.2.0”, “configurations”: [ { “type”: “node”, “request”: “launch”, “name”: “Launch Program”, “runtimeArgs”: [ “-r”, “ts-node/register” ], “args”: [ “${workspaceFolder}/src/index.ts” ] } ]}按 F5 开始愉快的调试吧，F9 是添加断点：五、参考文章配置 Webpack resolve alias 简化相对路径 importeslint-import-resolver-aliasESLint入门ts-node编译选项使用ts-node和vsc来调试TypeScript代码通过任务与外部工具集成vscode 调试 TypeScriptESLint代码检查 · TypeScript 入门教程 ...

了解使用IBM Blockchain Platform的VSCode扩展来简化开发，测试和部署智能合约的过程。完成本教程后，你将了解如何使用VSCode在本地Hyperledger Fabric网络上快速开发，演示和部署区块链应用程序。本教程假设你对Hyperledger Fabric有一些基本的了解。学习目标安装IBM Blockchain Platform VSCode扩展。创建一个新的JavaScript智能合约。打包智能合约。创建，探索和了解Hyperledger Fabric网络。在本地Hyperledger Fabric实例上部署智能合约。使用Node.js SDK与已部署的智能合约包进行交互。先决条件你需要安装以下内容才能使用扩展程序：node v8.x或更高版本以及npm v5.x或更高版本。Yeoman(yo) v2.x。Docker版本v17.06.2-ce或更高版本。Docker Compose v1.14.0或更高版本。VSCode 1.28.2或更高版本。如果你使用的是Windows，则还必须确保以下内容：你的Windows版本支持Hyper-V和Docker：Windows 10 Enterprise，Pro或具有1607 Anniversary更新或更高版本的教育版。Docker for Windows配置为使用Linux容器（这是默认设置）。你已经从windows-build-tools安装了适用于Windows的C ++ Build Tools。你已从Win32 OpenSSL安装了OpenSSL v1.0.2安装正常版本，而不是标记为light的版本。在32位系统上将Win32版本安装到C:OpenSSL-Win32中。在64位系统上将Win64版本安装到C:OpenSSL-Win64中。你可以通过从终端运行以下命令来检查已安装的版本：node –versionnpm –versionyo –versiondocker –versiondocker-compose –version预计的时间安装必备组件后，大约需要30-45分钟才能完成。步骤：1.开始2.创建一个新的智能合约项目3.修改智能合约4.打包智能合约5.安装智能合约6.实例化智能合约7.导出连接详细信息8.提交交易9.更新智能合约10.提交更多交易11.查询分类帐12.测试合约1.开始你需要做的第一件事是安装IBM Blockchain Platform VSCode扩展。为此，你需要安装最新版本的VSCode；要查看你是否拥有最新的VSCode扩展，请转到代码>检查更新（Code > Check for Updates）。如果此时VSCode崩溃（我遇到了），则可能意味着你没有最新版本。如果你的VSCode崩溃，请查看下面的故障排除部分。否则，请更新你的VSCode，完成后，单击屏幕左侧边栏中的扩展名。在顶部，在扩展市场中搜索IBM Blockchain Platform。单击Install，然后单击reload。现在你应该全部使用扩展！2.创建一个新的智能合约项目要创建智能合约项目：1.单击新下载的IBM Blockchain Platform扩展。它应该是左侧边栏底部的一直延伸。2.接下来，使用键盘快捷键Shift+CMD+P调出命令pallete。从下拉列表中选择IBM Blockchain Platform：Create Smart Contract Project。3.点击下拉列表中的JavaScript。4.单击新建文件夹New Folder，然后将项目命名为所需名称。我将我的名字命名为demoContract。5.单击创建Creat，然后Open刚刚创建的新文件夹。接下来，从下拉列表中单击添加到工作区Add to WrokSpace。6.完成扩展打包合约后，你可以打开lib/my-contract.js文件以查看智能合约代码框架。不错的工作！3.修改智能合约在lib/my-contract.js文件中，继续复制并粘贴以下代码：‘use strict’;const { Contract } = require(‘fabric-contract-api’);class MyContract extends Contract { //update ledger with a greeting to show that the function was called async instantiate(ctx) { let greeting = { text: ‘Instantiate was called!’ }; await ctx.stub.putState(‘GREETING’, Buffer.from(JSON.stringify(greeting))); } //take argument and create a greeting object to be updated to the ledger async transaction1(ctx, arg1) { console.info(’transaction1’, arg1); let greeting = { text: arg1 }; await ctx.stub.putState(‘GREETING’, Buffer.from(JSON.stringify(greeting))); return JSON.stringify(greeting); }}module.exports = MyContract;注意：.gifs可能与上面的智能合约不完全匹配，但这是你现在应该在lib/my-contract.js文件中应该拥有的那个！让我们来看看你刚刚定义的函数。实例化函数创建一个greeting对象，然后使用密钥GREETING将其存储在分类帐中。transaction1函数采用Hyperledger Fabric上下文和一个参数arg1，该参数用于存储用户定义的问候语。ctx.stub.putState方法用于记录分类帐上的greeting，然后返回该对象。保存文件然后继续！4.打包智能合约现在你已经创建了智能合约并了解了你已定义的功能，现在可以将其打包，以便你可以将其安装在节点设备上。使用Shift+CMD+P打开命令pallete并选择包智能合约。在左侧边栏中，单击IBM Blockchain Platform图标（它看起来像一个正方形）。在左上角，你将看到所有智能合约包。如果一切顺利，你应该看到demoContract@0.0.1。5.安装智能合约好的，你已经完成超过一半了。现在是有趣的部分！让我们在节点上安装这份合约！为此，你必须首先连接到Hyperledger Fabric网络。VSCode扩展附带的网络非常适合开发，它为开发和测试合约提供了最少的资源占用。以下Docker容器在本地计算机上启动，每个容器在网络中具有不同的角色：Orderer，Certificate Authority，CouchDB和Peer。要启动网络，请单击编辑器左侧的IBM Blockchain Platform扩展。这是一个看起来像正方形的图标。1.单击扩展后，你应该在编辑器的左侧看到LOCAL FABRIC OPS。在LOCAL FABRIC OPS右侧，你应该看到一个三点符号。单击该按钮，然后单击启动Fabric运行时Start Fabric Runtime。你的扩展程序现在将提供将充当网络中节点的Docker容器。配置完成后，你应该会看到LOCAL FABRIC OPS下的智能合约Smart Contracts部分。2.在智能合约Smart Contracts下，单击+install。3.接下来，扩展程序将询问你在哪个节点上安装智能合约。选择peer0.org1.examplee.com。4.扩展程序将询问你要安装哪个软件包：选择demoContract@0.0.1。如果一切顺利，你应该会在右下角看到通知：已成功安装在节点peer0.org1.example.com上就是这样！不错的工作！6.实例化智能合约这是真正的考验，你的智能合约是否会正确实例化？我们来看看……1.在智能合约Smart Contracts下，你将看到一个显示实例化的部分。单击实例化+ Instantiate。2.然后，扩展将询问你在哪个频道实例化智能合约，选择mychannel。3.然后，扩展将询问你实例化哪个合约和版本，选择demoContract@0.0.1。4.然后，扩展将询问你要调用哪个函数，输入instantiate。5.接下来，它会询问你的参数。没有，所以只需按回车即可。扩展将执行一些工作，然后在右下角，你应该看到合约已成功实例化。万岁！7.导出连接详细信息此时，你需要开始与Fabric实例进行更密切的交互。你需要向证书颁发机构证明你可以在网络上创建数字身份。这是通过向证书颁发机构显示你的证书和私钥来完成的。1.在本教程的后面，我们将查询网络。为此，我们需要一些脚本。在你的智能合约目录之外克隆此Github Repo，以获取查询网络所需的必要脚本。$ git clone https://github.com/horeaporutiu/VSCodeTutorialBlockchain.git2.右键单击VSCode中智能合约目录下的空白区域，然后选择将文件夹添加到工作区Add folder to workspace，将此文件夹导入VSCode工作区。找到最近克隆的文件夹VSCodeTutorialBlockchain并双击它。3.在VSCode中，单击左侧栏中的IBM Blockchain Platform扩展。4.在LOCAL FABRIC OPS下点击Nodes。右键单击peer0.org1.example.com节点。选择导出连接细节Export Connection Details。5.扩展程序将询问将连接配置文件保存到哪个文件夹。选择VSCodeTutorialBlockchain目录。如果一切顺利，你应该看到类似的东西：Successfully exported connection details to /Users/Horea.Porutiu@ibm.com/Workdir/VSCodeTutorialBlockchain/local_fabric8.提交交易好的，所以你已经实例化你的合约，把我们的密钥输出到我们的钱包里，那么现在呢？ 那么，现在是时候实际调用智能合约中的功能了！为此，你可以使用VSCode扩展。1.在LOCAL FABRIC OPS下你应该看到FABRIC GATEWAYS。2.单击local_fabric，然后单击Admin@org1.example.com。3.如果一切顺利，你应该会看到一条通知，其中显示正在连接到fabricConnecting to local_fabric。4.接下来，在FABRIC GATEWAYS和Channels下你应该看到我的mychannel。单击以展开它。然后展开demoContract@0.0.1。你应该看到两个函数，instantiate和transaction1。5.右键单击transaction1，然后选择提交交易submit transaction。对于参数，请输入’hello’。不错的工作！你刚刚成功向Fabric网络提交了一笔交易，并更新了分类帐！9.更新智能合约在上一步中，你使用putState API更新了分类帐，并传入了密钥和值。key恰好是greeting，值也赋予了对象。{ text: ‘hello’}你应该学习的最后一件事是如何查询，如何从分类帐中检索数据。你将通过使用getState API执行此操作，该API接收密钥并返回与该密钥关联的值（如果找到它）。让我们为demoContract添加一个查询功能。1.将以下代码复制并粘贴到lib/my-contract.js文件中：‘use strict’;const { Contract } = require(‘fabric-contract-api’);class MyContract extends Contract { //update ledger with a greeting async instantiate(ctx) { let greeting = { text: ‘Instantiate was called!’ }; await ctx.stub.putState(‘GREETING’, Buffer.from(JSON.stringify(greeting))); } //add a member along with their email, name, address, and number该代码添加了一个addMember函数，该函数接收来自用户的参数，如电子邮件，姓名，地址和电话号码，并将该数据作为键值对保存在分类帐中。此代码还添加了查询功能; 这个函数接受一个参数，这是查找的关键。该函数返回与给定键关联的值（如果有）。2.更新package.json文件，使包含版本号的第3行现在读取： “version”: “0.0.2”,保存文件。3.要在LOCAL FABRIC OPS下将你现有的智能合约升级到新版本。展开实例化，直到你看到demoContract@0.0.1。接下来，右键单击demoContract并选择Upgrade Smart Contract。4.扩展程序将询问使用哪个版本执行升级。选择demoContract。5.扩展程序将询问哪个节点安装智能合约，请选择peer0.org1.example.com。6.扩展程序将询问要调用的函数。输入实例化instantiate。7.扩展名将询问要传递的参数。将其留空，然后按Enter键。经过一些繁重的计算（以及一点点时间），如果一切顺利，你应该在右下角收到一条通知说成功升级智能合约Successfully upgraded smart contract。10.提交更多交易现在你已经更新了智能合约，请在FABRIC GATEWAYS下查看并展开频道Channels。接下来，展开mychannel，你应该看到demoContract@0.0.2。1.接下来，展开demoContract@0.0.2以查看已更新智能合约my-contract.js的函数，即instantiate，addMember和query。2.右键单击addMember，然后单击Submit Transaction。对于参数，请复制并粘贴以下内容：ginny@ibm.com, Ginny Rometty, Wall Street NY, 1234567890在输出中，你应该看到以下内容：Submitting transaction addMember with args Ginny Rometty, Wall Street NY, 1234567890, ginny@ibm.com让我们再添加一个成员，重复此步骤，但是对于参数，请复制并粘贴以下内容：arvind@ibm.com, Arvind Krishna, Broadway Street NY, 1231231111不错的工作。 我们差不多完成了！11.查询分类帐而现在，你们一直都在等待…让我们真正看到写在分类账上的内容！为此，我们将使用VSCodeTutorialBlockchain文件夹中的query.js文件。1.查看VSCodeTutorialBlockchain目录中的query.js文件。它与invoke.js文件非常相似，只是它有一个主要区别：let response = await contract.evaluateTransaction(‘query’, ‘GREETING’);主要区别在于，在此文件中，你将使用evaluateTransaction API，它不会将交易发送到ordering服务。因此，它不会更新分类帐。这是非常重要的。在invoke.js文件中，你将交易提交到ordering服务，这些交易都将写入分类帐，但在query.js文件中，你不会更新分类帐。2.使用VSCode中的终端导航到VSCodeTutorialBlockchain文件夹。从那里，使用以下命令安装所需的依赖项：VSCodeTutorialBlockchain $ npm install3.接下来，使用以下命令运行query.js：VSCodeTutorialBlockchain$ node query.js你应该看到下面的输出：Connected to Fabric gateway.{ text: ‘Instantiate was called!’ }Disconnect from Fabric gateway.done4.接下来，查询Ginny Rometty。更改以下行：let response = await contract.evaluateTransaction(‘query’, ‘GREETING’);对此：let response = await contract.evaluateTransaction(‘query’, ‘ginny@ibm.com’);你应该看到下面的输出：VSCodeTutorialBlockchain$ node query.jsConnected to Fabric gateway.{“address”:" Wall Street NY",“email”:“ginny@ibm.com”,“name”:" Ginny Rometty",“number”:" 1234567890"}Disconnect from Fabric gateway.done5.最后，查询Arvind。修改请求如下：let response = await contract.evaluateTransaction(‘query’, ‘arvind@ibm.com’);除了Arvind的数据外，输出应该类似于上面的输出。12.测试合约测试功能是IBM Blockchain扩展的一项功能，可以通过UI完成。单击左侧的IBM Blockchain Platform扩展图标。在FABRIC GATEWAYS下，在频道Channels下展开mychannel，右键单击最新的智能合约demoContract@0.0.2，然后选择Generate Smart Contract Tests。扩展程序将询问你生成测试文件的语言。选择JavaScript。生成测试完成扩展后，你可以从demoContract目录运行npm test，也可以从MyContract-demoContract@0.0.2.test.js文件中单击VSCode UI中的运行测试按钮，如gif所示。总结干得好！你学习了如何使用Hyperledger的最新API创建，打包，安装，实例化和调用智能合约。此时，你可以专注于开发智能合约并更新my-contract.js文件，因为你知道已经处理了区块链的网络方面。你还可以使用VSCode，Node.js和Docker成功调用和更新分类帐。如果有错误，请拜托我，请对这篇文章发表评论，我会修复它们。非常感谢你阅读本教程。我希望你喜欢它！Horea Blockchain出来了！======================================================================分享一些比特币、以太坊、EOS、Fabric等区块链相关的交互式在线编程实战教程：java比特币开发教程，本课程面向初学者，内容即涵盖比特币的核心概念，例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等，同时也详细讲解如何在Java代码中集成比特币支持功能，例如创建地址、管理钱包、构造裸交易等，是Java工程师不可多得的比特币开发学习课程。php比特币开发教程，本课程面向初学者，内容即涵盖比特币的核心概念，例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等，同时也详细讲解如何在Php代码中集成比特币支持功能，例如创建地址、管理钱包、构造裸交易等，是Php工程师不可多得的比特币开发学习课程。c#比特币开发教程，本课程面向初学者，内容即涵盖比特币的核心概念，例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等，同时也详细讲解如何在C#代码中集成比特币支持功能，例如创建地址、管理钱包、构造裸交易等，是C#工程师不可多得的比特币开发学习课程。java以太坊开发教程，主要是针对java和android程序员进行区块链以太坊开发的web3j详解。python以太坊，主要是针对python工程师使用web3.py进行区块链以太坊开发的详解。php以太坊，主要是介绍使用php进行智能合约开发交互，进行账号创建、交易、转账、代币开发以及过滤器和交易等内容。以太坊入门教程，主要介绍智能合约与dapp应用开发，适合入门。以太坊开发进阶教程，主要是介绍使用node.js、mongodb、区块链、ipfs实现去中心化电商DApp实战，适合进阶。ERC721以太坊通证实战，课程以一个数字艺术品创作与分享DApp的实战开发为主线，深入讲解以太坊非同质化通证的概念、标准与开发方案。内容包含ERC-721标准的自主实现，讲解OpenZeppelin合约代码库二次开发，实战项目采用Truffle，IPFS，实现了通证以及去中心化的通证交易所。C#以太坊，主要讲解如何使用C#开发基于.Net的以太坊应用，包括账户管理、状态与交易、智能合约开发与交互、过滤器和交易等。EOS入门教程，本课程帮助你快速入门EOS区块链去中心化应用的开发，内容涵盖EOS工具链、账户与钱包、发行代币、智能合约开发与部署、使用代码与智能合约交互等核心知识点，最后综合运用各知识点完成一个便签DApp的开发。深入浅出玩转EOS钱包开发，本课程以手机EOS钱包的完整开发过程为主线，深入学习EOS区块链应用开发，课程内容即涵盖账户、计算资源、智能合约、动作与交易等EOS区块链的核心概念，同时也讲解如何使用eosjs和eosjs-ecc开发包访问EOS区块链，以及如何在React前端应用中集成对EOS区块链的支持。课程内容深入浅出，非常适合前端工程师深入学习EOS区块链应用开发。Hyperledger Fabric 区块链开发详解，本课程面向初学者，内容即包含Hyperledger Fabric的身份证书与MSP服务、权限策略、信道配置与启动、链码通信接口等核心概念，也包含Fabric网络设计、nodejs链码与应用开发的操作实践，是Nodejs工程师学习Fabric区块链开发的最佳选择。Hyperledger Fabric java 区块链开发详解，课程面向初学者，内容即包含Hyperledger Fabric的身份证书与MSP服务、权限策略、信道配置与启动、链码通信接口等核心概念，也包含Fabric网络设计、java链码与应用开发的操作实践，是java工程师学习Fabric区块链开发的最佳选择。tendermint区块链开发详解，本课程适合希望使用tendermint进行区块链开发的工程师，课程内容即包括tendermint应用开发模型中的核心概念，例如ABCI接口、默克尔树、多版本状态库等，也包括代币发行等丰富的实操代码，是go语言工程师快速入门区块链开发的最佳选择。汇智网原创翻译，转载请标明出处。这里是Hyperledger Fabric和VSCode的IBM区块链扩展开发智能合约 ...

设置了工作区的setting.json 或 项目的 tsconfig.json 的 experimentalDecorators 属性都为 true 无效， 警告依然存在的情况。查看你当前使用VS Code 打开项目的位置，是否在根项目打开的。 正确打开方式：错误打开方式：

说明正在开发or想要开发VS Code插件的同学请注意继VS Code插件开发中文文档-v1.0发布之后, 收获了一致好评! 当然, 最近由于巨硬对原文档的不断改进, 导致v1.0版本的内部链接全部失效.但是, 经过@Liiked大佬(我打个下手)的辛勤完善下, v2.0版本横空出世啦! 主要做了以下几个方面的补充和完善:翻译插件创作内的所有章节翻译拓展性参阅内的所有章节审阅文档中的链接和内容对应官方文档改版升级审阅和链接补充…中文文档地址: 戳这里原文档地址: HereGayhub地址: 戳这里提问、纠错和参与提问：欢迎大家在issue区对插件开发进行提问，虽然这里不是官方答疑平台，不过你可以在这里和国内的插件开发者进行交流。纠错和润饰：在翻译过程中难免会出现笔误、翻译不到位、存在优化空间等情况，当然最严重的应属于翻译的章节或者片段难以理解，请在issue中不吝赐教，我们会优先处理这类问题。参与：由于国内已经有过一版VS Code文档的社区翻译版本，但是质量，emmmmm……，所以本项目会采取较为严格的翻译审查，若你有热情一同学习和贡献自己的力量，请参考我们的翻译指南。翻译计划翻译计划已移动到Progress如果你有兴趣、能力和时间, 欢迎贡献代码感谢@Liiked@ddzy

前言平时部署前端项目流程是：先部署到测试环境ok后再发布到生产环境上，部署到测试环境用 xshell 连上服务器，然后用 xftp 连接服务器，然后本地 build 项目，接着把 build 好的文件通过 xftp 上传到服务器上，整个流程感觉稍有繁琐，重复。本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx一 安装scp2scp2是一个基于ssh2增强实现，纯粹使用JavaScript编写。而ssh2就是一个使用nodejs对于SSH2的模拟实现。scp，是secure copy的缩写, scp是Linux系统下基于SSH登陆进行安全的远程文件拷贝命令。这里我们就用这个功能，在Vue编译构建成功之后，将项目推送至测试/生产环境，以方便测试，提高效率。安装scp2：npm install scp2 –save-dev二、配置测试/生产环境 服务器SSH远程登陆账号信息1. 在项目根目录下, 创建 .env.dev 文件 (测试环境变量)VUE_APP_SERVER_ID变量表示 当前需部署的测试服务器ID为0// .env.dev文件中VUE_APP_SERVER_ID=02. 在项目根目录下, 创建 .env.prod 文件 (生产环境变量)VUE_APP_SERVER_ID变量表示 当前需部署的生产服务器ID为1// .env.prod文件中VUE_APP_SERVER_ID=13. 在项目根目录下, 创建 deploy/products.js 文件/* 读取env环境变量 /const fs = require(‘fs’);const path = require(‘path’);// env 文件 判断打包环境指定对应的服务器idconst envfile = process.env.NODE_ENV === ‘prod’ ? ‘../.env.prod’ : ‘../.env.dev’;// env环境变量的路径const envPath = path.resolve(__dirname, envfile);// env对象const envObj = parse(fs.readFileSync(envPath, ‘utf8’));const SERVER_ID = parseInt(envObj[‘VUE_APP_SERVER_ID’]);function parse(src) { // 解析KEY=VAL的文件 const res = {}; src.split(’\n’).forEach(line => { // matching “KEY’ and ‘VAL’ in ‘KEY=VAL’ // eslint-disable-next-line no-useless-escape const keyValueArr = line.match(/^\s([\w.-]+)\s=\s*(.)?\s$/); // matched? if (keyValueArr != null) { const key = keyValueArr[1]; let value = keyValueArr[2] || ‘’; // expand newlines in quoted values const len = value ? value.length : 0; if (len > 0 && value.charAt(0) === ‘”’ && value.charAt(len - 1) === ‘"’) { value = value.replace(/\n/gm, ‘\n’); } // remove any surrounding quotes and extra spaces value = value.replace(/(^[’"]|[’"]$)/g, ‘’).trim(); res[key] = value; } }); return res;}/* *定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号 */const SERVER_LIST = [ { id: 0, name: ‘A-生产环境’, domain: ‘www.prod.com’,// 域名 host: ‘46.106.38.24’,// ip port: 22,// 端口 username: ‘root’, // 登录服务器的账号 password: ‘Rock@sz18!’,// 登录服务器的账号 path: ‘/mdm/nginx/dist’// 发布至静态服务器的项目路径 }, { id: 1, name: ‘B-测试环境’, domain: ’test.xxx.com’, host: ‘XX.XX.XX.XX’, port: 22, username: ‘root’, password: ‘xxxxxxx’, path: ‘/usr/local/www/xxx_program_test/’ }];module.exports = SERVER_LIST[SERVER_ID];三、使用scp2库,创建自动化部署脚本在项目根目录下, 创建 deploy/index.js 文件const scpClient = require(‘scp2’);const ora = require(‘ora’);const chalk = require(‘chalk’);const server = require(’./products’);const spinner = ora(‘正在发布到’ + (process.env.NODE_ENV === ‘prod’ ? ‘生产’ : ‘测试’) + ‘服务器…’);spinner.start();scpClient.scp( ‘dist/’, { host: server.host, port: server.port, username: server.username, password: server.password, path: server.path }, function (err) { spinner.stop(); if (err) { console.log(chalk.red(‘发布失败.\n’)); throw err; } else { console.log(chalk.green(‘Success! 成功发布到’ + (process.env.NODE_ENV === ‘prod’ ? ‘生产’ : ‘测试’) + ‘服务器! \n’)); } });四、添加 package.json 中的 scripts 命令, 自定义名称为 “deploy”,发布到测试环境命令为 npm run deploy:dev,生产环境为 npm run deploy:prod “scripts”: { “serve”: “vue-cli-service serve –mode dev”, “build”: “vue-cli-service build –mode prod”, “deploy:dev”: “npm run build && cross-env NODE_ENV=dev node ./deploy”, “deploy:prod”: “npm run build && cross-env NODE_ENV=prod node ./deploy”, },ps 这里用到了cross_env 得安装 npm i –save-dev cross-env cross-env能跨平台地设置及使用环境变量，这里用来设置是生产环境还是测试环境。图解结束语欢迎指正，Vue学习群493671066 欢迎大家加入我的前端学习交流群一起学习进步。参考文章 https://www.cnblogs.com/sufai… ...

背景：在 Build 2015 大会上，微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外，最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了！随着2019年的到来，Stack Overflow对2018年的IT生态调查显示：Visual Studio Code超过Visual Studio一跃成为榜首，成为“最受欢迎的开发环境”，没有之一！Visual Studio 与 Visual Studio Code 区别: Visual Studio 是集成开发环境， 只能运行在windows + mac OS；Visual Studio Code 是一款编辑器， 支持跨平台，在所有操作系统运行；本文档主要分享 VSCode 在Mac操作系统， React 技术栈开发的实用快捷键 及 插件；实用快捷键1.command + K, command + S 打开快捷键编辑页；说到VSCode 不得不提的快捷键指令，可以查看、设置快捷键；自定义快捷键：如我们写代码时定义常量需要用全大写， 快速切换选中变量的大小写的快捷键很实用，个人设置如下：command + K, command + U 变大写command + K, command + L 变小写2.command + P 快速打开文件；不用点击左侧树形菜单，键盘操作快速找到待编辑文件；3.command + = 和 command + -组合来进行缩放;快捷键调整字体大小， 快速切换到自己最舒服的字体尺寸；4.command + ,打开用户设置；VSCode 设置包括用户设置（全局）， 和工作区（当前项目）设置， 因为我们开发项目对应的技术栈可能不同， 所以推荐使用工作区设置。React 开发推荐工作区设置：{ // 设置 react render 中 react 标签智能提示,快速补全html “emmet.includeLanguages”: { “javascript”: “javascriptreact” }, // 设置 react render 中 html 代码可折叠 “editor.foldingStrategy”: “indentation”}5.control + ~ 打开、关闭终端；React 前端开发， 编译脚本、样式等是必不可少的操作， 可在当前开发区中快速打开当前项目路径下的终端，输入指令完成前端文件编译。编辑器内打开终端编译， 不用切换窗口可大大提高开发体验：支持多终端窗口，前后端运行指令同屏显示：6.其他；其他日常编码常用快捷键：command + shift + N 打开新窗口；command + N 新建文件；command + 切出新编辑器（最多三个）command + W 关闭当前文件command + S 保存当前文件command + option + S 保存所有文件command + F 当前文件查找command + option + F 当前文件替换command + D 当前文件查找选中单词下一目标command + C 复制command + V 粘贴command + X 剪切command + Z 回退command + shift + Z 前进command + shift + K 删除当前行代码option + ↓ 当前行代码下移option + ↑ 当前行代码上移shift + option + ↓ 当前行代码整行拷贝到下一行shift + option + F 格式化代码强烈推荐的快捷键， 特别适用于统一前端小组成员代码风格。不同的人，写JS缩进、空格等不一样， 如果小组统一使用VSCode后每个人都习惯用该快捷键格式化代码，将更利于代码维护。前端代码不需插件就能支持 go to defination， 鼠标移动至变量名 或 文件名 ， command + 单击 即可跳转至对应文件：实用插件VSCode的插件非常多， 但个人觉得真正实用的插件有：Auto Close Tag自动添加HTML / XML关闭标签（必备）Path Intellisense自动提示文件路径，在HTML 使用a标签的href 或者 require, import 新文件时能智能提示；参考链接：vscode: Visual Studio Code 常用快捷键在用VSCode? 看完这篇文章, 开发效率翻倍!vscode 前端插件推荐 ...

摘要： 为什么 VS Code 这么火…公众号：玩转 VS Code原文：代码编辑器横评：为什么 VS Code 能拔得头筹Fundebug经授权转载，版权归原作者所有。2015 年 4 月 29 日的 Build 大会上，微软发布了 Visual Studio Code 第一个预览版本。短短四年时间里，VS Code 高速成长。根据 2019 年 2 月的 PYPL Top IDE index 的排名，VS Code 的涨势迅猛，在所有编辑器与 IDE 中排名第六，领先于其他主流的代码编辑器：Sublime、Atom 和 Vim。可以说是已经在代码编辑器中拔得头筹。在 Stack Overflow 的 2018 年开发者调查中，VS Code 成为了最受欢迎的开发工具。那么，VS Code 为什么能这么成功？有哪些地方是开发者所喜爱的呢？让我们从各个方面与 Sublime、Atom 和 Vim 比较下，逐一分析。学习曲线对于任何人来说，特别是新手，一个工具的学习曲线也会影响到它的受欢迎程度。还记得 Stack Overflow 上著名的问题之一：“How to exit the Vim editor?” 吗？它已经有接近两百万的访问量。 VS Code、Sublime 和 Atom 在学习曲线上，一定是遥遥领先于 Vim。同时，VS Code 的使用文档相比于其他编辑器也是做的最好的，无论是“快速入门”还是每一个功能的使用，在官网上都写的一清二楚有条有理。官网还提供了 PDF 版的键盘快捷键参考表，让开发者轻松上手。此外，考虑到一些开发者是从 Vim、Sublime、IntelliJ 或是其他开发工具转来的，依旧习惯于原来开发工具的键盘快捷键。VS Code 也提供了各种键盘映射的插件，让你可以在 VS Code 中继续使用不同开发工具的快捷键，而不用重新学习 VS Code 的快捷键。用户体验VS Code 提供了许多良好的开箱即用的用户体验。与 Vim、Sublime 和 Atom 一样，VS Code 都提供了代码编辑的体验。此外，VS Code 在保持其轻量级代码编辑器的前提下，还内置了一些 IDE 中会有的重要功能：Terminal：内置的 Terminal 使得开发者可以直接在 VS Code 中快速地运行脚本，而不需要在 VS Code 和系统的 Terminal 之间来回切换。调试器：直接在 VS Code 中调试代码，断点、call stacks、交互式的 debug console，使得调试变得异常轻松。版本控制：开箱即用的 Git 支持，让你方便地进行文件更改比较，管理你的源代码。特别是对于前端开发者来说，VS Code 有着非常好的支持。除了对 JavaScript 的智能提示、重构、调试等功能的支持，像 HTML, CSS, SCSS, Less 和 JSON 这些前端技术栈，都有着很棒的支持。曾经在一些用户体验上，VS Code 的用户体验也有不足之处。比如，曾经 VS Code 的设置页面的体验就没有 Atom 好，Atom 有着图形化的配置界面，而 VS Code 是基于 JSON 文件的。VS Code 对此也是听取用户的反馈，增加了图形化的配置界面，也保留了基于 JSON 文件的配置方式，满足了不同人群的使用习惯。开源开源对于一个产品的长期发展极为重要。在四款编辑器中，Sublime 是闭源的，VS Code、Vim 和 Atom 都是开源的，而 VS Code 可以说是开源做的最好的。VS Code 不仅仅是把代码开源出来。而是把整个产品的开发过程建立于开源之上，与整个社区深入合作，倾听用户在 GitHub 上的反馈，使 VS Code 越做越好：每一年，VS Code 团队都会在 GitHub Wiki 发布 Roadmap ，列出一整年的规划图。每个月初，在产品设计阶段，VS Code 团队会在 GitHub Issue 上会发布 Iteration Plan ，列出这个月会做的每一个功能，每一个功能基本会对应一个 GitHub Issue，你可以看到详细的设计以及 mockup，并且可以提出你自己的见解。每个月末，临近产品发布，你可以在 GitHub 看到 Endgame 了解到 VS Code 是如何进行产品测试与发布的。不仅代码开源，VS Code 整个产品的计划，设计以及发布管理都是“开源”的：每一个阶段对每一个用户是公开透明的，你不仅可以开 Issue，发 PR，你甚至也可以参与到每个功能的设计与讨论中去！性能天下武功唯快不破。相信从 IDE 转投 VS Code 的童鞋，一定是对 VS Code 的性能非常满意。同为基于 Electron 开发的产品，VS Code 在性能的优化上要比 Atom 领先许多。当然，我们必须承认的是，在速度上 VS Code 与 Vim 和 Sublime 相比，还是有略微的差距。但是，我们依旧能看到 VS Code 不断的在性能上的优化。从插件进程与主进程的隔离、插件的延迟加载，再到 Text Buffer 的优化，提升大文件的加载与编辑速度，减少内存使用率。我们看到了 VS Code 的不断进步。插件VS Code 有着丰富且快速增长的插件生态，如今，已经有超过一万个插件。不仅有中心化的插件市场，而且在 VS Code 编辑器里也可以轻松搜索插件，直接进行安装与管理。相比之下，Sublime 只有 5000 不到的插件，而且在编辑器里不能很方便地搜索管理插件；Vim 插件虽多，但因为没有一个中心化的插件市场，查找插件很麻烦；Atom 有 8000 多的插件，比 VS Code 少一些，虽然在编辑器内也是可以查找插件，但 VS Code 的搜索和浏览功能做的要比 Atom 要好。此外，VS Code 还推出了 Extension Packs，方便开发者一键安装多个插件。比较出色的 Extension Pack 有 Java Extension Pack、PHP Extension Pack、Vue.js Extension Pack 等，使得 VS Code 秒变 IDE。生态VS Code 不仅仅是一个代码编辑器，它有着强大的生态。VS Code 把它的许多重要组件抽离出来，成为大家都可以复用的开源产品，与社区合作，把产品越做越好：Language Server Protocol ：它是 Editor/IDE 与语言服务器之间的一种协议，可以让不同的 Editor/IDE 方便嵌入各种程序语言，允许开发人员在最喜爱的工具中使用各种语言来撰写程序。Eclipse, Atom, Sublime Text, Emacs 等主流 Editor/IDE 都已经支持了 LSP。Debug Adapter Protocol ： DAP 与 LSP 的目的类似，DAP 把 Editor/IDE 与 不同语言的 debugger 解耦，极大地方便了 Editor/IDE 与其他 Debugger 的集成。Eclipse, Emacs, Vim 等已经支持了 DAP 。Monaco Editor ：作为 VS Code 的核心组件，Monaco Editor 在 GitHub 已经拥有了超过一万三千个 star 。国内比较有名的比如 Cloud Studio 和 Gitee Web IDE 都使用了 Monaco Editor。VS Code 作为 Visual Studio Family 的重要产品，与 Visual Studio IDE 一样，也有两大重要的功能：Visual Studio Live Share：极大地方便了协作编程：实时共享代码编辑、跟随光标、团队调试、分享本地服务器、共享终端等等。Visual Studio IntelliCode：通过 AI 赋能，根据上下文给出编程建议和智能提示，提高开发者的效率。未来VS Code 快四岁了，他还是个很年轻的编辑器。未来的路很长，相信他会越来越好，成为更多开发者所喜爱的开发工具。关于FundebugFundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用！ ...

实现效果安装 delvewindowsgo get -u github.com/go-delve/delve/cmd/dlvlinux方式一： go get -u github.com/go-delve/delve/cmd/dlv 方式二$ git clone https://github.com/go-delve/delve.git $GOPATH/src/github.com/go-delve/delve$ cd $GOPATH/src/github.com/go-delve/delve$ make install注意: 若果你go版本为1.5需要设置GO15VENDOREXPERIMENT=1OSX$ go get -u github.com/go-delve/delve/cmd/dlv执行上述代码前，确保你电脑上有编译工具设置 launch.json 配置文件ctrl+shift+p 输入 Debug: Open launch.json 打开 launch.json 文件，如果第一次打开,会新建一个配置文件，默认配置内容如下{ “version”: “0.2.0”, “configurations”: [ { “name”: “Launch”, “type”: “go”, “request”: “launch”, “mode”: “auto”, “program”: “${fileDirname}”, “env”: {}, “args”: [] } ]}常见属性如下属性介绍name调试界面下拉选择项的名称type设置为go无需改动，是 vs code 用于计算调试代码需要用哪个扩展mode可以设置为 auto, debug, remote, test, exec 中的一个program调试程序的路径（绝对路径）env调试时使用的环境变量。例如:{ “ENVNAME”: “ENVVALUE” }envFile包含环境变量文件的绝对路径，在 env 中设置的属性会覆盖 envFile 中的配置args传给正在调试程序命令行参数数组showLog布尔值，是否将调试信息输出logOutput配置调试输出的组件（debugger, gdbwire, lldbout, debuglineerr, rpc）,使用,分隔， showLog 设置为 true 时，此项配置生效buildFlags构建 go 程序时传给 go 编译器的标志remotePath远程调试程序的绝对路径，当 mode 设置为 remote 时有效在 debug 配置中使用 VS Code 变量${workspaceFolder} 调试 VS Code 打开工作空间的根目录下的所有文件${file} 调试当前文件${fileDirname} 调试当前文件所在目录下的所有文件使用构建标记(build tags)如果需要使用构建标记（e.g. go build -tags=whatever_tag）在参数 buildFlags 里写入 -tags=whatever_tag" 即可，支持多标签，使用单引号将标签包围,例如： “-tags=‘first_tag second_tag third_tag’“debug 配置代码片段可以在 launch.json 文件中，使用 Go 关键词调出 debug 配置项的代码片段。调试当前文件配置片段{ “name”: “Launch file”, “type”: “go”, “request”: “launch”, “mode”: “auto”, “program”: “${file}"}调试单个测试用例配置片段{ “name”: “Launch test function”, “type”: “go”, “request”: “launch”, “mode”: “test”, “program”: “${workspaceFolder}”, “args”: [ “-test.run”, “MyTestFunction” ]}调试包中所有的测试用例配置片段{ “name”: “Launch test package”, “type”: “go”, “request”: “launch”, “mode”: “test”, “program”: “${workspaceFolder}"}调试构建二进制文件配置片段{ “name”: “Launch executable”, “type”: “go”, “request”: “launch”, “mode”: “exec”, “program”: “absolute-path-to-the-executable”}远程调试远程调试需要在服务器上期一个无头的 Delve 服务 例如：$ dlv debug –headless –listen=:2345 –log –api-version=2如果需要传给参数到程序中则需要将参数传入到 Delve 服务中例如：dlv debug –headless –listen=:2345 –log – -myArg=123launch.json 配置如下：{ “name”: “Launch remote”, “type”: “go”, “request”: “launch”, “mode”: “remote”, “remotePath”: “服务器调试文件的目录（绝对路径）”, “port”: 2345, “host”: “127.0.0.1”, “program”: “本地调试文件所在的目录（绝对路径）”, “env”: {}}将上述配置中的 host 和 port 修改 Delve 服务所在的服务器ip和其监听的端口号。remotePath 应该配置为调试文件的绝对路径program 需要配置本地机器文件所在的绝对路径，是 remotePath 的一个副本配置完成后，点击调试按钮，VS Code 将会项远程的 dlv 服务发出调试指令，而不是使用本机的 dlv 实例。参考链接Debugging Go code using VS Code Delve Installation ...

译者按： 充分利用其特性，你会觉得 VSCode 非常强大！原文: Pro tips for Visual Studio Code to be productive in 2018 ????????????译者: Fundebug为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。在开源 IDE 市场，最近几年 Visual Studio Code(简称 VSCode)越来越流行。自从 2015 年对外发布后，根据 2018 年 Stack Overflow 的调查报告，有 35%的开发者转而使用 VSCode。我接下来会介绍一些建议和技巧来让你更加高效的使用 VSCode。Git 和 GitlensGit 可以说是在开发者中最流行的软件，从 IDE 直接操作 Git 会比通过命令行简单很多。Git 模块可以帮助你做 stage、commit、stash、undo 等操作。Gitlens 插件提供了更多的可能性。Gitlens 最有用的特性就是你可以看到每一行代码的 commit 历史。实时共享VSCode Live Share 是一个实验性的特性。官网上这样说到：无论构建什么类型的应用，使用何种语言编程或使用何种操作系统，当需要协作时，实时共享都能够立即将你的项目与队友共享。 队友可实时编辑和调试，无需克隆存储库或设置其环境。通过 Live Share，可以共同进行编辑和调试，同时还可共享音频、服务器、终端、差异、注释等。 无论是进行代码评审、与队友结对编程、参与 Hackathon 活动还是进行互动式讲座，Live Share 都可以通过多种写作方式为你提供支持。JSON to Code是否经历过，当个面对一个 API，你希望它返回的数据结构能够有一个类型定义，但是又不用自己去手动定义？ Paste JSON as Code 可以一键将 JSON 文件转换为一个目标语言的类型定义。批量重命名写代码和维护代码的时候少不了做重构，特别是当你重构一个很大的模块或则很大一段代码的时候，一个一个去查找和修改变量/函数名会很头痛。好在 VSCode 可以帮助我们。如果你选中一个变量/方法名，然后按 F2，你可以编辑选中的名字，整个项目中所有相关的实例都会被修改。如果你只想修改当前文件，使用 Command+F2(Mac) 或则 Ctrl+F2(Windows) 命令。跳转到定义当在写代码的时候，面对一个变量/方法，往往会忘记其指代的含义。在这个时候怎么做呢？你要花上数分钟的时间来搜索整个项目，定位到正确的位置。在 VSCode，你可以使用 Command(Mac)/Ctrl(Windows) 并鼠标单击对应的变量/方法名，VSCode 会自动跳转到正确的位置。或则，你可以将光标停留在变量/方法名，然后按下 Command(Mac)/Ctrl(Windows)，会在当前光标旁边弹出变量/函数的定义。这样省去跳转到其它位置的麻烦。多行编辑如果你想要插入/删除多个相同文本的实例，你可以创建一个多光标(Multiple cursor)。你可以按住 Option(Mac)/Alt(Windows) 按键，然后每点击一次，光标就在当前位置停住。每一次点击创建一个新的光标，然后就可以同时编辑这些位置。在 HTML 中非常有用，特别是当你想修改类名/超链接，而它在多处出现的时候。DebuggerDebugger 本身内容很多，VSCode 有一个专门介绍的视频。Youtube 视频地址：VSCode debugging Node.js绑定快捷键如果你想高效的工作，将你常用的命令制成快捷键。你可以通过cheat sheet/“查看快捷键绑定”来快速查看核心命令。命令控制台是你最好的朋友，你可以使用 Command+p(Mac)/Ctrl+p(Windows) 来打开。输入文件名，你可以快速跳转到指定的文件。这比你在左侧项目目录慢慢找要快得多。你可以输入 > 来查看所有可用任务用@符号来获取当前文件所有的 Symbols(变量/函数/类名/方法等等)自定义绑定快捷键在 VSCode 有一个命令缺失了，那就是“保存所有”。我们可以自定义一个：Command+Shift+S(Mac)/Ctrl+Shift+S(Windows)。关于FundebugFundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用！版权声明转载时请注明作者Fundebug以及本文地址：https://blog.fundebug.com/2019/03/26/tips-for-vscode-to-be-productive/ ...

前言最近在写Vue的时候，遇见了js es6格式化问题，因为我平时用vscode在写php，所以会安装一些格式化插件，也包括html-css-js的插件 导致的问题：由于vue语法规范问题，导致保存自动格式化成不被使用的代码格式，出现代码错误等异常 写这篇的时候，我也查阅了很多资料有很多的资料不能被使用，也换过很多的编辑器如：Atom,sublime,webstorm否掉的编辑器Atom这一款编辑器真心颜值高，但是插件是真心不好弄，各种被墙，各种的不适应，所以我决定还是弃掉sublime同上，以前sublime没发现墙，但是现在好像有墙了，所以懒得折腾，弃掉webstormwebstorm 的强大不做解释，但是就是太大，太慢，界面不喜欢是最终理由，弃掉MAC配置下vscode自动格式化vue相关插件：ESLint,JavaScript(ES6),vetur先安装相关插件。打开settings.json，在代码块里面添加 “eslint.validate”: [ “javascript”, “javascriptreact”, { “language”: “html”, “autoFix”: true }, { “language”: “vue”, “autoFix”: true } ], “eslint.autoFixOnSave”: true, “explorer.confirmDragAndDrop”: false, “editor.detectIndentation”: false, “editor.tabSize”: 2, “vetur.format.defaultFormatter.js”: “none"保存然后重启，解决

最近公司要开发一套线上付费的会员App，是和原生一起混合式的开发，有一个会员权益模块是全部使用H5开发，想给大家看下需要做成的案例：其实没什么难点，主要就是功能有：1、顶部导航栏可以左右滑动，点击某一个栏目按钮内容跟着切换；2、并且加载一次之后，第二次就重新加载；3、被点击的栏目按钮居中显示，左右会跟随点击的位置滚动4、手机物理返回按键对路由的影响感觉自己表达不是特别的清楚，来一张动图把：好了 废话不多说 开始说代码相关的东西了：顶部导航的实现方案：使用 swiper3 实现导航回弹和左右滑动效果html内容：：<div class=“rightsProfile”> <div class=“rightsProfile_head”> <div id=“nav” class=“swiper-container”> <ul class=“swiper-wrapper”> <li :key=“i” v-for=“i in myNavBar” :class="{‘active-nav’:i.active}" class=“swiper-slide”> {{i.title}} </li> </ul> </div> </div> </div>我使用了vuejs的循环渲染liswiper.js的调用： var myNav = new Swiper(’#nav’, { freeMode: true, freeModeMomentumRatio: 0.5, slidesPerView: ‘3’, }); let swiperWidth = myNav.container[0].clientWidth let maxTranslate = myNav.maxTranslate(); let maxWidth = -maxTranslate + swiperWidth / 2 myNav.on(“tap”,function(swiper,e){ let slide = swiper.slides[swiper.clickedIndex] let slideLeft = slide.offsetLeft let slideWidth = slide.clientWidth let slideCenter = slideLeft + slideWidth / 2; // 被点击slide的中心点 myNav.setWrapperTransition(300) if (slideCenter < swiperWidth / 2) { myNav.setWrapperTranslate(0) } else if (slideCenter > maxWidth) { myNav.setWrapperTranslate(maxTranslate) } else { let nowTlanslate = slideCenter - swiperWidth / 2 myNav.setWrapperTranslate(-nowTlanslate) } })上面的代码就可以实现1、3的要求了 我上传的代码不是很全，细节代码我会附上github地址。我们接下来看第2个要求，就是点击加载一次之后，再次点击不会重新加载，这里我使用了vue-router结构如下：<template> <div id=“page”> <Loading :isLoading=“isLoading”></Loading> <div class=“rightsProfile”> <div class=“rightsProfile_head”> <div id=“nav” class=“swiper-container”> <ul class=“swiper-wrapper”> <li :key=“i” v-for=“i in myNavBar” :class="{‘active-nav’:i.active}" class=“swiper-slide”> {{i.title}} </li> </ul> </div> </div> </div> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!– 这里是会被缓存的视图组件，比如 page1,page2 –> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!– 这里是不被缓存的视图组件，比如 page3 –> </router-view> </div></template><style lang=“less”> #nav{ height: 100%; .swiper-wrapper{ height: 100%; li{ text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; &.active-nav{ color:#fff; background:#ddd !important; } &.active-nav a{ color:#fff; background:#ddd !important; } } } } </style><script> import Loading from “@/components/loading”; export default{ data(){ return{ myNavBar:[{ title:“移动机具”, active:true, mark:“mpos” },{ title:“8折话费”, active:false, mark:“payPhoneBill” },{ title:“5折看电影”, active:false, mark:“movieTicket” },{ title:“家用”, active:false },{ title:“家用电器”, active:false },{ title:“家用”, active:false }], routerName:"" } }, components:{ Loading }, watch: { $route(to, from) { // console.log(this.$route.name); let routerName = this.$route.name; this.myNavBar.map((el)=>{ el.active = false; if(el.mark==routerName){ el.active = true; } }); } }, mounted(){ this.$nextTick(()=>{ let that = this; var myNav = new Swiper(’#nav’, { freeMode: true, freeModeMomentumRatio: 0.5, slidesPerView: ‘3’, }); let swiperWidth = myNav.container[0].clientWidth let maxTranslate = myNav.maxTranslate(); let maxWidth = -maxTranslate + swiperWidth / 2 myNav.on(“tap”,function(swiper,e){ let slide = swiper.slides[swiper.clickedIndex] let slideLeft = slide.offsetLeft let slideWidth = slide.clientWidth let slideCenter = slideLeft + slideWidth / 2; // 被点击slide的中心点 myNav.setWrapperTransition(300) if (slideCenter < swiperWidth / 2) { myNav.setWrapperTranslate(0) } else if (slideCenter > maxWidth) { myNav.setWrapperTranslate(maxTranslate) } else { let nowTlanslate = slideCenter - swiperWidth / 2 myNav.setWrapperTranslate(-nowTlanslate) } that.myNavBar.map((el)=>{ el.active = false; }); that.myNavBar[swiper.clickedIndex].active = true; that.$router.push({ path:that.myNavBar[swiper.clickedIndex].mark }) }) }) } }</script>头部导航在主路由里面，router-view显示每个栏目对应的内容，可以给每个路由设置keep-alive，实现条件3。从事移动端web开发的小伙伴们应该对手机的物理返回键“深恶痛绝”把，同样我们做完了上面那个demo，当你点击安卓的物理返回键的时候，demo会一步一步的返回，显然，这不是我们要的结果，我们要的效果应该是“指哪打哪，自我掌控”1、首先，我们新建一个 global变量 这个用于记录路由的访问来源2、在对应的路由文件里面添加路由卫士：3、在mounted里面配置popstate和配置goBack方法：4、销毁组件的时候 移除popstate我的三个路由的名称分别为：mpos、payPhoneBill、movieTicket，接下来看动图：可以看到 我们只需要判断 global.beforeRouteName 和 路由的名称作为判断条件，就可以做任何操作和交互了，可以自己很好的控制物理键啦！demo在线预览：demo的代码地址：https://github.com/yulongwuko… ...

实现效果起因最近在写一个全新的项目，在项目中频繁创建各种类，这就导致很多重复的东西需要频繁的写，例如类名，命名空间，继承关系…那么有没有一种 办法能解决这个问题呢？提出设想我想起了，最初用 sublime text 的时候，可以利用代码片段功能大段的生成html代码，当时就觉得十分的方便，那么 vscode 有没有这个功能呢?经过 google 之后我知道 vscode 是有代码片段功能的。既然有了想法，也具备了基础实施条件，那么接下来开始尝试实现之前的想法。资料查询经过一番 google 后发现对于 vscode snippet 介绍都在相对基础的简单应用（只是一些插入固定代码和光标介绍），者显然无法实现我们生成类名和明明空间的想法，google 无果，那么只能看看 vscode 官方文档果然有意想不到的收获，看完官网介绍后，基本就确定此路是可行的。snippet 示例在 File > Preferences (Code > Preferences on macOS) 中选择 User Snippets 在弹出框里选择对应的代码片段语言，我这里使用的是php “Print to console”: { “prefix”: “log”, “body”: [ “console.log(’$1’);”, “$2” ], “description”: “Log output to console” }在打开的 php.json 中有示例代码：Print to console 代码片段名称prefix 插件前缀body 插件内容可以是字符串，也可以为数组，若为数组每个元素都做为单独的一行插入。description 插件描述Snippet 语法制表位(Tabstops)使用制表位(Tabstops)可是在代码片段中移动光标位置，使用$1,$2来指定光标的位置,数字代表光标的移动的顺序，值得注意的时$0代表光标的最后位置。如果有多个相同的制表位(Tabstops)会在编译器里同时出现多个光标（类似编译器的块编辑模式）。占位符(Placeholders)占位符(Placeholders) 是带默认值的制表位(Tabstops),占位符(Placeholders)的文本会被插入到制表位(Tabstops)所在位置并且全选以方便修改,占位符(Placeholders)可以嵌套使用，比如${1:another ${2:placeholder}}。选择项(Choice)占位符(Placeholders)可以有多选值，每个选项的值用 , 分隔，选项的开始和结束用管道符号(|)将选项包含，例如: ${1|one,two,three|}，当插入代码片段，选择制制表位(Tabstops)的时候，会列出选项供用户选择。变量(Variables)使用 $name 或者 ${name|default} 可以插入变量的值，如果变量未被赋值则插入 default 的值或者空值 。当变量未被定义，则将变量名插入，变量(Variables)将被转换为占位符(Placeholders)系统变量如下TM_SELECTED_TEXT 当前选定的文本或空字符串TM_CURRENT_LINE 当前行的内容TM_CURRENT_WORD 光标下的单词的内容或空字符串TM_LINE_INDEX 基于零索引的行号TM_LINE_NUMBER 基于一索引的行号TM_FILENAME 当前文档的文件名TM_FILENAME_BASE 当前文档的文件名（不含后缀名)TM_DIRECTORY 当前文档的目录TM_FILEPATH 当前文档的完整文件路径CLIPBOARD 剪切板里的内容插入当前日期或时间：CURRENT_YEAR 当前年(四位数)CURRENT_YEAR_SHORT 当前年(两位数)CURRENT_MONTH 当前月CURRENT_MONTH_NAME 本月的全名（’七月’）CURRENT_MONTH_NAME_SHORT 月份的简称（’Jul’）CURRENT_DATE 当前日CURRENT_DAY_NAME 当天的名称（’星期一’）CURRENT_DAY_NAME_SHORT 当天的短名称（’Mon’）CURRENT_HOUR 当前小时CURRENT_MINUTE 当前分钟CURRENT_SECOND 当前秒当前语言的行注释或块注释:BLOCK_COMMENT_START 块注释开始标识,如 PHP /* 或 HTML <!–BLOCK_COMMENT_END 块注释结束标识,如 PHP / 或 HTML –>LINE_COMMENT 行注释，如： PHP // 或 HTML <!– –>下面片则会生成 PHP / Hello World /{ “hello”: { “scope”: “php”, “prefix”: “hello”, “body”: “$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END” }}变量转换(Variable transforms)变量转换(Variable transforms) 允许变量在插入前改变变量的值，变量转换(Variable transforms)由三部分组成正则匹配：使用正则表达式匹配变量值，若变量无法解析则值为空。格式串：允许引用正则表达式匹配组。格式串允许条件插入和做简单的修改。正则表达式匹配选项下面例子是使用变量转换(Variable transforms)将带后缀的文件名转换为不带后缀的文件名${TM_FILENAME/(.)\..+$/$1/} | | | | | | | |-> 无选项设置 | | | | | |-> 引用捕获组的第一个分组内容 | | | | | |-> 匹配后缀前的所有字符串 | | |-> 文件名（带后缀）需求实现要解决的问题生成Class 的命名空间、类名、选择继承关系问题分析项目目录结构如下所示peoject||—-application|——–admin|————services|—————-TestServices.php类名可以直接使用 TM_FILENAME_BASE 变量的值即可，命名空间则需要使用 TM_DIRECTORY 变量，以 TestServices.php 为例，TM_DIRECTORY 得到的目录为 peoject\application\admin\services我们只需要将peoject\application\ 替换为 app 得到 app\admin\services 就是我们的明明空间了，至于继承就是一个选择项就可以了。既然已经全部知道该如何实现，接下来就是代码实现的过程了。代码实现"service-construct" :{ “prefix”: “gen”, “body”: [ “namespace ${TM_DIRECTORY/.*application/app/};\n”, “class $TM_FILENAME_BASE extends ${1|BaseService,BaseController,BaseModel|}”, “{”, “\tpublic function __construct() \r\n {\n\t\t\$this->model = new \r\n\t}”, “}” ], “description”: “generate service class” },一些思考上述代码基本上完成了我要实现的功能，但是也存在了一些问题，例如：我现在是用 windows 操作系统，因而TM_DIRECTORY 得到的目录为 peoject\application\admin\services 若是 linux 系统，此代码片段是无法正常的生成命名空间的，我做了一些资料的搜索，代码片段并没有自定义变量的功能（也许可以，只是我么有找到方法，如果有知道的大牛，请留言赐教。 随着对 vscode snippet 的深入了解，我之前所设想的方案要用代码片段的方式实现是有些困难的，vscode 将其作为一个快速生成代码的解决方案，我们所写的代码片段相当于一个带有填空模板，而对代码片段的应用就是生成带有制表符的代码模板，然后根据制表符顺序补全代码。 至于这个不完美的方案，我打算再研究一下代码片段是否能完全实现，如果依旧解决不了，就选用其它方案进行尝试。参考链接Creating your own snippets ...

翻译：疯狂的技术宅原文：https://1stwebdesigner.com/to…本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章微软的 VS (Visual Studio) Code 是一个免费的开源代码编辑器，最近越来越受欢迎。它非常轻巧、灵活，同时也提供了很多强大的功能。它支持绝大多数流行的编程语言，包括PHP、JavaScript、C++ 等。VS Code 是跨平台的。它不仅能用于 Windows 平台，同时也提供 Linux 和 Mac 版本。下载地址：https://code.visualstudio.com/。但也许最酷的是 VS Code 提供了规模超大的扩展插件，在扩展 商店 有大量的免费扩展可用于支持新语言、调试代码或添加各种其他自定义功能。你可以灵活的配置自己的编辑器，更好地满足日常开发的需要。下面将给你介绍一些适合前端的顶级 VS Code 扩展插件。Git增强：GitLens虽然Git功能已内置于 VS Code 中，但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能，可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说，这个扩展插件会让你拥有全新的视觉感受。更多详情：https://marketplace.visualstu…语法高亮：Beautify你是否非常依赖语法高亮显示？如果是的话，Beautify 正是你需要的。它利用了 VS Code 中已有的 Online JavaScript Beautifier，允许你轻松更改其样式。这意味着你可以根据内容设置缩进、换行和其他细节。更多详情：https://marketplace.visualstu…代码检查：ESLintJavaScript 可能很难调试。但 ESLint 扩展可以使这个过程更容易。它能够在执行代码之前帮你指出其中潜在的问题。更强大的是它允许你创建自己的 linting 规则。更多详情：https://marketplace.visualstu…调试器：Debugger for Chrome对于在运行时期间对代码进行调试的开发人员，Debugger for Chrome 将帮你更好的完成工作。它有许多方便的功能，包括在代码、watches 和控制台中设置断点的功能。另外你可以在 VS Code 中运行Chrome实例，或把调试器附加到单独运行的浏览器实例。更多信息：https://marketplace.visualstu…环境增强：React Native ToolsReact 是最引人注目的JS库之一 —— 以至于新的 WordPress 块编辑器（又名 Gutenberg）是基于它建立的。如果你是众多的 React 程序员之一，那么React Native Tools是必不可少的扩展。它增加了运行 react-native 命令的功能，还能帮助你调试自己的代码。更多信息：https://marketplace.visualstu…界面主题：One Dark Pro在敲代码时，有一个醒目且养眼的界面主题会很有帮助。毕竟编码过程可以持续好几个小时。 One Dark Pro 把Atom 编辑器中流行的 “One Dark” 主题带到了 VS Code。更多信息：https://marketplace.visualstu…代码增强：Bracket Pair Colorizer 2Bracket Pair Colorizer 2 是一个简单的扩展，可以使代码更容易阅读。它可以对匹配括号的对代码着色，使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。更多信息：https://marketplace.visualstu…视觉增强：vscode-icons也许 vscode-icons 是 VS Code 最有效的视觉调整扩展之一。它能够处理你项目中平淡的文件列表，并添加丰富多彩、表示特定语言的图标。这样可以很容易地让你知道代码文件的类型。能够给工作区添加个性化设置是非常受欢迎的功能。更多信息：https://marketplace.visualstu…按自己的方式编写代码VS Code 提供的扩展插件数量惊人，这使其成极具吸引力的编辑器。你可以自由的进行设置，来匹配自己使用的语言和设置喜欢的工作区视觉效果。此外，它还提供了企业和开源文化的有趣组合。 VS Code 得到了微软的支持，能够确保未来会得到更好的维护。开源社区围绕软件创建了一个欣欣向荣的生态系统，可以称作是企业与开源文化相结合的典范。欢迎继续阅读本专栏其它高赞文章：12个令人惊叹的CSS实验项目世界顶级公司的前端面试都问些什么CSS Flexbox 可视化手册过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！从设计者的角度看 ReactCSS粘性定位是怎样工作的一步步教你用HTML5 SVG实现动画效果程序员30岁前月薪达不到30K，该何去何从7个开放式的前端面试题React 教程：快速上手指南本文首发微信公众号：jingchengyideng欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章 ...

一、问题描述最近在使用 VueCli3+TypeScript 构建的项目在VSCode中打开,总是会出现如下的红色下划线错误提示问题，看着着实难受，于是就在网上百度方法，试了多次仍然不成功，无意中发现一个解决方法居然成功了，真是无心插柳柳成荫，特此记录！错误提示内容Experimental support for decorators is a feature that is subject to change in a future release. Set the ’experimentalDecorators’ option to remove this warning.二、解决办法1.网上方法(1).新建一个jsconfig.json或者tsconfig.json，配置experimentalDecorators参数的值为true，但是vue-cli3构建项目的时候已经在tsconfig.json中配置了这个参数,so,没有用啦！(2).有的说修改vsCode的配置，文件->首选项->设置 中搜索experimentalDecorators，设置为true，这个也不生效。2.成功方法(1).确保在项目根目录下有jsconfig.json或者tsconfig.json文件，并配置experimentalDecorators参数的值为true；(2).将项目所在的根目录文件夹单独在VSCode中打开，然后，没有然后了，就oj8k了！

如果想配置 sublime 开发工具 => 面向web前端及node开发人员的vim配置如果想配置 vim 开发工具 => sublime配置及使用技巧所谓网红编辑器，我觉得比vim来的更爽，因为vim的所有操作和插件，对于vs code 来说也就是一个插件就能无缝兼容。比如我之前是一直在使用 sublime 的，使用vs code 之后明显感觉 vscode 无论是配置还是使用都更顺手一点，学习成本很小。当然本文不是谈哪个编辑器更好的问题，每个软件都在发展，相互学习和补充才是重点。作为一个前端开发，vs code 开箱即用的代码编辑、高亮、提示都十分友好。但作为一个追求完美的程序员，还是装了不少插件，比如前端开发用的一些插件：Auto Rename Tag: 当你编辑HTML标签是会自动修改配对标签HTML Class Suggestions: HTML class 名称提示ESLint: ES 语法检查Hap Extension: 快应用开发基础支持JavaScript(ES6) code snippets: js 代码片段，提高编码速度open in browser: 在浏览器打开页面，这个已经不常用了，但对于前端初学者还是很友好的QuickApp For Highlighter: 快应用开发高亮Color Info: css 中颜色预览工程化也需要一些插件：npm: npm 管理npm Intellisense: npm 自动配置GitLens: git 记录查看minify: 代码压缩写作办公也需要一些工具呀：Excel Viewer: 实际感觉只能预览 csv 文件，不过这也够用了Markdown PDF: markdown 转 pdfMarkdown TOC: markdown 目录生成Markdown+Math: markdown 中数学公式支持vscode-pdf: pdf 阅读插件编辑器本身的插件seti-icons: 文件iconTheme - Seti-Monokai: 高亮及编辑器外观Sublime Text Keymap and Settings Importer: sublime 功能键及配置映射Sublime Babel: sublimevscode-faker: 随机数据生成其他的一些工具SVG Viewer: SVG 图片预览xtemplate: xtpl 文件高亮支持我安装了sublime 的插件，其实还有vim 的插件，安装后无缝兼容 .vimrc 配置和 vim plugin。正常的快捷键可以看参考下图，其实和 sublime 差不了太多。对于一些不如意的地方，可以在配置文件中进行配置，个人感觉 vs code 配置开放比 sublime 更丰富。{ “beautify.language”: { “js”: { “type”: [ “javascript”, “json” ], “filename”: [ “.jshintrc”, “.jsbeautify” ] }, “css”: [ “css”, “scss”, “less” ], “html”: [ “htm”, “html” ] }, “debug.showInStatusBar”: “always”, “debug.node.autoAttach”: “off”, “beautify.tabSize”: 2, “css.lint.duplicateProperties”: “warning”, “css.lint.idSelector”: “warning”, “css.lint.universalSelector”: “warning”, “css.lint.zeroUnits”: “error”, “less.lint.duplicateProperties”: “warning”, “less.lint.idSelector”: “warning”, “less.lint.universalSelector”: “warning”, “less.lint.zeroUnits”: “error”, “scss.lint.duplicateProperties”: “warning”, “scss.lint.idSelector”: “warning”, “scss.lint.universalSelector”: “warning”, “scss.lint.zeroUnits”: “error”, “csv-preview.skipComments”: true, “csv-preview.lineNumbers”: true, “editor.formatOnPaste”: true, “editor.find.autoFindInSelection”: true, “editor.formatOnSave”: true, “editor.fontSize”: 14, “editor.formatOnType”: true, “editor.multiCursorModifier”: “ctrlCmd”, “editor.minimap.enabled”: false, “editor.snippetSuggestions”: “top”, “editor.tabSize”: 2, “editor.wordSeparators”: “`~!@#$%^&()=+[{]}\|;:’",.<>/?”, “emmet.includeLanguages”: { “vue-html”: “html”, “javascript”: “javascriptreact” }, “emmet.triggerExpansionOnTab”: true, “emmet.showAbbreviationSuggestions”: false, “eslint.autoFixOnSave”: true, “eslint.options”: { “configFile”: “/Users/faremax/eslintrc.json” }, “eslint.run”: “onSave”, “eslint.workingDirectories”: [ “./public”, “./src” ], “explorer.confirmDelete”: false, “explorer.confirmDragAndDrop”: false, “explorer.openEditors.visible”: 4, “files.associations”: { “.ux”: “ux” }, “files.autoSave”: “onFocusChange”, “files.exclude”: { “/.git”: true, “/.svn”: true, “/.hg”: true, “/CVS”: true, “/.DS_Store”: true, “/node_modules”: true }, “files.insertFinalNewline”: true, “files.trimFinalNewlines”: true, “files.trimTrailingWhitespace”: true, “git.detectSubmodules”: false, “gulp.autoDetect”: “off”, “grunt.autoDetect”: “off”, “html.format.wrapLineLength”: 0, “jake.autoDetect”: “off”, “javascript.implicitProjectConfig.experimentalDecorators”: true, “markdown-pdf.displayHeaderFooter”: false, “markdown-pdf.margin.left”: “1.8cm”, “markdown-pdf.margin.right”: “1.8cm”, “markdown-pdf.margin.top”: “1cm”, “markdown.preview.lineHeight”: 1.5, “markdown.styles”: [ “/Users/faremax/github-markdown.css” ], “markdown-pdf.styles”: [ “/Users/faremax/github-markdown.css” ], “markdown-toc.insertAnchor”: true, “open-in-browser.default”: “Google Chrome.app”, “search.exclude”: { “/node_modules”: true, “/bower_components”: true, “/build”: true, “/dist”: true, }, “search.location”: “sidebar”, “svgviewer.enableautopreview”: true, “terminal.explorerKind”: “integrated”, “window.restoreWindows”: “all”, “workbench.statusBar.feedback.visible”: false, “window.zoomLevel”: 0, “workbench.colorTheme”: “Monokai”, “workbench.startupEditor”: “newUntitledFile”}vs code 还有很多实用技巧，可以看官方github: https://github.com/Microsoft/vscode ...

vs code,微软出品,提示功能强大,轻量,插件丰富.推荐一些vs code插件,亲测过的.One Dark Pro,一款主题,长这个样子 Auto Close Tag 自动添加闭合标签Auto Import 提示import的路径Auto Rename Tag 自动修改标签名,就是修改开始标签,闭合标签也会修改Babel ES6/ES7 编译es6 es7Beautify css/sass/scss/less 美化css/sass/scss/lessBracket Pair Colorizer 这个很好用,可以看出哪一对是相匹配的花括号,彩色的HTML Snippetsindent-rainbow 空格用彩虹表示open in browser 在浏览器中打开,vscode自身没有这个功能Reactjs code snippets react插件Vetur vue插件Vue 2 Snippets vue插件

步骤安装 Settings Sync 插件在键盘按 ctrl + shift + p ，弹出输入框输入sync选择sync高级选项 –> 从公共配置里下载gist再次在键盘按 ctrl + shift + p ， 输入sync 选择下载配置弹出输入框粘贴下面代码进去，按回车键fe7de5610f233447c476ce8c48148e02坐等，直到控制台显示done。全部搞定操作流程图GIF安装以下插件加入eslint代码规范配置atom-keybindings v3.0.4auto-close-tag v0.5.6auto-rename-tag v0.0.15beautify v1.4.4bracket-pair-colorizer v1.0.60brackets-light-pro v0.3.3code-settings-sync v3.1.2gitlens v8.5.6html-css-class-completion v1.17.1html-snippets v0.2.1JavaScriptSnippets v1.7.0LiveServer v5.1.1path-intellisense v1.4.2prettier-vscode v1.6.1vetur v0.12.7vscode-css-peek v2.1.0vscode-eslint v1.6.0vscode-html-css v0.2.0vscode-icons v7.27.0vscode-language-pack-zh-hans v1.27.2vue-snippets v0.1.9个人博客 求星星

经历Sublime和webstorm 盗版序列号经过一番血洗后，频频失效，期间浪费了很多时间破解，虽然经过一番尝试后。虽然成功破解但心也无心在折腾了。转向VScode开发有需要用户可以查看：懒人安装一键安装插件神器教程VScode常用插件推荐HTML Snippets 超级实用且初级的 H5代码片段以及提示Color-Highlight在编辑器中高亮显示颜色。Guides代码的标签对齐线。HTML CSS supportcss 自动补齐Npm Intellisense在import语句中自动完成npm模块引入的代码插件Debugger for Chrome让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试background设置背景beautify在Visual Studio代码中美化JavaScript，JSON，CSS，Sass和HTML。Auto Close Tag 自动闭合HTML标签Auto Rename Tag 修改HTML标签时，自动修改匹配的标签Bracket Pair Colorizer 让括号拥有独立的颜色，易于区分Open-In-Browser 由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件可以打开命令面板选项。Live Server 类似代码运行服务器上的功能Indenticator缩进高亮IntelliSense for CSS class namesCSS类名智能命名提示JavaScript (ES6) code snippetsES6语法提示Path Intellisense编辑器中输入路径时,自动补全Git History 查看和搜索git日志以及图表和细节。查看文件的前一个副本。查看和搜索历史CSS Peek 能在源代码中的字符串中找到对应的css，显示在那个css文件里，还有在第几行。Easy WXLESS微信小程序WXSS文件专用，保存可自动生成并同步编译成同名css文件px2rem px、rem单位互相转换常用Vue插件推荐vetur语法高亮、智能感知、Emmet提示：vue文件代码格式化，需要在首选项-设置-用户设置添加这行代码"vetur.format.defaultFormatter.html": “js-beautify-html”, //vue中HTML部分格式化Vue 2 Snippets 最新的 Vue 官方语法高亮文件添加了语法高亮vscode-element-helper Element-UI库代码片段主题推荐：浅色调Brackets Light ProQuiet Light个人博客 求星星

理解对象1、创建自定义对象的两种方法：（1）创建一个Object实例，然后再为它添加属性和方法。var person = new Object(); person.name = “Nicholas”; person.age = 29; person.job = “Software Engineer”; person.sayName = function() { alert(this.name); };（2）用对象字面量语法创建属性名或方法名 ： 值var person = { name : “Nicholas”, age : 29, job : “Software Engineer”, sayName : function() { alert (this.name); }};2、属性类型ECMAScript中有两种属性：数据属性和访问器属性。（1）数据属性：数据属性包含一个数据值的位置，在这个位置可以读取和写入值，数据属性有4个描述其行为的特性：要修改属性默认的特性，必须使用ECMAScript5的Object.defineProperty()方法。这个方法接收三个参数：属性所在的对象、属性的名字和一个描述符对象。其中，描述符对象的属性必须是configurable、enumerable、writable和value。设置其中的一个或多个值，可以修改对应的特征值。var person = {};Object.defineProperty(person, “name”, { writable : false, value : “Nicholas”});alert(person.name); //“Nicholas"person.name = “Greg”;alert(person.name); //“Nicholas"本例中将name属性的write值设置为false表示只可读不可写。吧configurable设置为false，表示不能从对象中删除属性。一旦把属性定义为不可配置的，就不能再把它变回可配置了。注意：在调用Object.defineProperty()方法创建一个新的属性时，如果不指定，configurable、enumerable和writable特性的默认值都是false。（2）访问器属性访问器属性不包含数据值：它们包含一对儿getter和setter函数。在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值；在写入访问器属性时，会调用setter函数并传入新值，这个函数负责决定如何让处理数据。访问器属性有如下4个特性：[[Set]]：在写入属性时调用的函数。默认值为Undefined。访问器属性不能直接定义，必须使用Object.defineProperty()来定义。object.defineProperty(book,“year”, { ger : function() { return this._year; }, set : function(newValue) { if(newValue > 2004) { this._year = newValue; this.edition += newValue - 2004; } }});book.year = 2005;alert(book.edition); //2 _year前面的下划线是一种常用的记号，用于表示只能通过对象方法访问的属性。3、定义多个属性Object.defineProperties()方法。利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个对象参数：要添加和修改其属性值的对象，第二个是与第一个对象中要添加和修改的属性值一一对应。var book = {};Object.defineProperties(book, { _year: { writable : true, value : 2004 }, edition: { writable: true, value: 1 }, year: { get: function() { return this._year; }, set: function(newValue) { if(newValue > 2004) { this._year = newValue; this.edition += newValue - 2004; } } }});以上代码在book对象上定义了两个数据属性（_year和edition）和一个访问器属性（year）。4、读取属性的特性Object.getOwnPropertyDescriptor()方法，可以去的给定属性的描述符。这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称，返回值是一个对象。如果是访问器属性，这个对象的属性有configurable、 enumerable、get和set;如果是数据属性，这个对象的属性有configurable、enumerable、writable和value。var book = {};Object.defineProperties(book, { _year: { writable : true, value : 2004 }, edition: { writable: true, value: 1 }, year: { get: function() { return this._year; }, set: function(newValue) { if(newValue > 2004) { this._year = newValue; this.edition += newValue - 2004; } } }});var descriptor = Object.getOwnPropertyDescriptor(book, “_year”);alert(descriptor.value); //2004alert(descriptor.configurable); //falsealter(typeof descriptor.get); //undefinedvar descriptor = Object.getOwnPropertyDescriptor(book, “year”);alert(descriptor.value); //undefinedalert(descriptor.enumerable); //falsealert(typeof descriptor.get); //“function” ...

这几天为 Deno 开发了一个 VS Code 插件：Deno support for VSCode，GitHub 地址：https://github.com/justjavac/…。自 Deno 发布以来就备受关注，也有很多媒体和开发者称 Deno 为“下一代 Node.js”。然而 Deno 的目标则是不兼容 Node.js，没有 npm，没有 package.json。Deno 的目标旨在提供一个兼容浏览器的平台，因此 Deno 可以像浏览器的 ES Modules 那样，通过 URL 加载模块:import * as log from “https://deno.land/x/std/log/mod.ts";而且在加载模块时不能省略扩展名。但是，目前的所有开发工具都是为 Node.js 而构建的。在 TypeScript 中，我们不需要添加 .ts 扩展名。如果我们添加了，VS Code 会给我们一个错误提示：ts(2691): An import path cannot end with a ‘.ts’ extension. Consider importing ‘./hello’ instead.而另一个问题则是，Deno 可以加载远程模块，但是 TypeScript 却不行。比如上面的代码，也是会报错的：ts(2307): Cannot find module ‘https://deno.land/x/std/log/mod'.而这个插件正是为了解决这 2 个问题。但是这两个错误不是 VS Code 提供了，而是 TypeScript 的编译器 tsc 提供的，因此需要修改 tsc 的功能。好消息是，TypeScript 从 2.3 开始便支持了 Language Service Plugin，这个功能仅能增强编辑体验，无法改变 TypeScript 核心行为（比如改变类型检查行为）或增加新特性（比如提供一种新语法或者）。通过查看 Language Service Plugin 的说明文件，这个功能正是我需要的。所以在写这个 VS Code 插件之前，我又为 TypeScript 写了一个插件：typescript-deno-plugin。这个插件不仅可以用在 VS Code，还可以用在任何支持 TypeScript 的编辑器，比如 Atom、Visual Studio、WebStorm 等。VS Code 插件提供了开箱即用的 Deno 支持，开发者不需要任何配置，但是有一个前提是：开发者需要使用 VS Code 内置的 TypeScript。如果你在项目中自行安装了 TypeScript，并且修改了 VS Code 的配置，使用了自己安装的版本，则需要自行安装配置 typescript-deno-plugin 插件。通过修改 tsconfig.json 的 plugins：{ “compilerOptions”: { “plugins”: [ { “name”: “typescript-deno-plugin” } ] }}如果你正在打算学习 Deno 的开发，可以通过这个链接 Deno support for VSCode 安装插件。祝，开发愉快。 ...

网上关于vue-devtools的安装数不胜数，但是自己操作起来却总是遇到问题。写下这篇随笔，以防以后忘记。vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。当然网上教程确实多，很容易理解，但是新手操作实在会卡住。这里介绍一篇，大家可以去看看https://blog.csdn.net/zhousen…。我这里写下我安装的全过程，以及走过的弯路，及解决办法。方法一：chrome商店直接安装vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要FQ才能下载。方法二：（主要讲方法二）一、下载chrome扩展插件GitHub下载地址：https://github.com/vuejs/vue-…这个下载的话：下载zip格式的文件二、解压到本地记得看清楚文件的目录，等会需要访问到此目录，当然你也可以解压在c盘，不建议什么东西都往c盘扔；三、win+r 输入 cmd 打开命令行操作为了方便新手，cmd也敲出来；像很多操作都是cnpm install，npm install ，npm run build等操作；等下再介绍，先进入我们解压文件的目录：进入后输入 cnpm install；可以看下，会有错误，当然如果你下载了npm，cnpm，自然不会报错；之前卡这里很久，到处找，没有找到，毕竟新手。npm：node.js下的包管理，下载node.js 会附带npm。然后我又跑去找node.jsde的下载方法。介绍大家可以去看这个node.js下载博客：https://www.cnblogs.com/goldl…node.js的下载网址：http://nodejs.cn/download/由于我的电脑是64位的windows系统；下载完成后，双击安装一路next，到了安装目录后，默认C盘，（建议改成D盘，自己新建的目录）我的是D盘，nodejs，选好后点击next。这里需要主要，点击add to path,不需要配置环境，不然又得去操作环境配置，还有这边下载安装完成后，不要随便改变文件夹，不然得重新配置环境变量。。。。。点击next，install，finish。。。下载完成后会在你的文件夹有：那个.msi是我之前下的，可以删除现在可以去操作npm 了，记得重新打开命令行，首先查看环境变量，会发现自动配好了node，和npm，你会发现现在两个居然不在同一个文件夹输入node -v ，npm -v可以查看刚才下载的node，npm的版本；注意不要忘记输入空格。现在只是安装了npm，还有cnpm需要安装输入这个命令： npm install -g cnpm –registry=https://registry.npm.taobao.org输入： cnpm -v 检查版本，四、cnpm install，npm run build 等操作 现在我们可以回到vue-devtool的下载了。。。。。。记得需要进入自己下载解压文件的位置虽然我也不知道是在干啥，但是我知道应该是成功了：时间有点长，需要耐心等一等。。。。cnpm install操作完成后进行npm run build完成后显示：然后进去到文件夹内，一定是shells下的chrome的manifest.json文件，进入本地编辑器，做如下图修改，false 改成 true五、扩展Chrome插件打开chrome浏览器，打开设置>点击或者程序>点击开发者模式>加载已解压的扩展程序

本文首发于我的博客（点此查看），欢迎关注。前言最近在做项目代码重构，其中有一个要求是为代码添加智能提示和类型检查。智能提示，英文为 IntelliSense，能为开发者提供代码智能补全、悬浮提示、跳转定义等功能，帮助其正确并且快速完成编码。说起来，JavaScript 作为一门动态弱类型解释型语言，变量声明后可以更改类型，并且类型在运行时才能确定，由此容易产生大量代码运行中才能发现的错误，相比 Java 等静态类型语言，开发体验上确实差了一截。更烦躁的是，智能提示就是依赖于静态类型检查的，所以在以前，指望 JavaScript 的智能提示完善度追上 Java 基本不可能。当然，时代在进步，TypeScript 已经问世许久，为 JavaScript 带来了静态类型检查以及其他诸多特性。JavaScript 的智能提示也已有了解决方案。调研了一段时间后，下文以 VSCode 编辑器作为开发工具，介绍一下如何为 JavaScript 加上智能提示以及类型检查。基于 JSDocJSDoc 是目前最通用的 JavaScript API 文档生成器，根据其语法编写代码注释，可以十分方便地自动生成文档。由于 JSDoc 能提供详细的类型信息，其也被 VSCode 等编辑器接受应用于智能提示。例如，可以使用 @type 标签来赋予部分声明的 object 一个特殊类型：/** * @type {{a: boolean, b: boolean, c: number}} /var x = {a: true};x.b = false;x. // <- 由于 type 声明，“x” 将被提示含有属性 a,b 以及 cJSDoc 最常见的使用是为函数的参数声明类型，使用 @param 来完成：/* * @param {string} param1 - 这里可以用于解释参数含义 /function Foo(param1) { this.prop = param1; // param1 （以及 this.prop）均为 string 类型}为代码添加 JSDoc 注释使得阅读和理解代码更加方便（代码交接时再也不用抓狂了，当然前提是注释写得好），也保障了开发时的体验并且降低了很多运行时才能发现的数据类型方面的 bug。VSCode 基本支持 JSDoc 的常见语法，具体使用可参见JSDoc support in JavaScript。基于 TypeScript 类型声明文件除了使用 JSDoc 提前声明类型，更为激进的做法是直接使用微软开发的 TypeScript，为整个项目带来完善的静态类型检查。当然，对于老项目来说，改造的成本较为巨大（使用 Flow 也类似，要动的代码太多，况且 Flow 烂尾了）。不过由于和 TypeScript 师出同门，VSCode 能够直接读取前者的类型声明文件，来为 JavaScript 提供智能提示（实际上 JavaScript 的智能提示功能就是基于 TypeScript 团队为 VSCode 提供的 JavaScript 语言服务开发的）。 TypeScript 的类型声明文件以 .d.ts 为后缀，用于描述同名的 JavaScript 文件导出代码的类型，功能上类似于 C 语言的 .h 头文件。不严格地来说，ts 类型声明文件就像用 TypeScript 语法将 JSDoc 的注释重写了一遍并提取到了单独的文件中。VSCode 更是将二者作了融合，当你二者混用的时候，可以直接在 JSDoc 的注释中直接使用 ts 类型声明文件中定义的 interface 和 class 等。直接使用官方提供的示意图（图中是 Visual Studio，不过无伤大雅）：对于自己的代码，可以编写对应的 ts 类型声明文件，而对于引用的第三方库，社区同样提供了解决方案：DefinitelyTyped 提供了常见的第三方库的类型声明文件。VSCode 有很多第三方库已经内置类型声明文件，自己下载的话直接使用 npm 即可：# @types + 第三方库名称npm i @types/express关于 ts 类型声明文件的语法等相关信息，参见官网介绍。另外，在 VSCode 中，类型检查并非默认开启，这意味着即使你有详尽的 JSDoc 注释或 ts 类型声明文件，依然可能在数据类型上栽跟头。开启方式为在项目根目录下添加 jsconfig.json 文件，并设置 “checkJs”: true，示例如下：{ “compilerOptions”: { “checkJs”: true }, // 位于此目录下的文件不进行静态检查和智能提示 “exclude”: [ “node_modules”, “**/node_modules/” ]}总结最后，无论是对老项目的改造或是新项目的开发，使用以上的方式添加智能提示和类型检查显而易见会略微拖慢开发速度，但我们认为，与智能提示带来的开发体验、将很多可能在运行时才能发现的错误通过类型检查前置解决、顺手完成的详细文档以及重构代码时的信心相比，这点速度的牺牲是值得的。参考文档：JavaScript in Visual Studio CodeWorking with JavaScriptJavaScript Language Service in Visual Studio ...

（确保编辑器已经安装了插件 vetur、vueHelper）1、ctrl+shift+p 输入snippets 选中它 输入vue》vue.json 2、或者操作 文件》首选项》用户代码片段》vue》vue.json复制如下 也可自由编辑{ “Print to console”: { “prefix”: “vue”, “body”: [ “<!– $1 –>”, “<template>”, “<div class=’$2’>$5</div>”, “</template>”, “”, “<script>”, “”, “// 导入的其他文件 例如：import moduleName from ‘modulePath’;”, “”, “export default {”, “”, “//import所引入的组件注册”, “components: {”, “”, “},”, “”, “data() {”, " return {", “”, " };", “},”, “”, “//监听属性”, “computed: {”, “”, “},”, “”, “//监控data中的数据变化”, “watch: {”, “”, “},”, “”, “//方法集合”, “methods: {”, “”, “},”, “”, “//生命周期 - 组件实例刚被创建”, “beforeCreate() { “, “”, “},”, “//创建完成 访问当前this实例”, “created() {”, “”, “},”, “//挂载之前”, “beforeMount() { “, “”, “},”, “//挂载完成 访问DOM元素”, “mounted() {”, “”, “},”, “//更新之前”, “beforeUpdate() { “, “”, “},”, “//更新之后”, “updated() { “, “”, “},”, “//for keep-alive 缓存功能，组件被激活时调用”, “activated() {”, “”, “},”, “//for keep-alive 组件被移除时调用”, “deactivated() {”, “”, “},”, “//组件销毁之前调用”, “beforeDestroy() {”, “”, “},”, “//组件销毁之后调用”, “destroyed() {”, “”, “},”, “}”, “</script>”, “<style lang=‘scss’ scoped>”, “//@import url($3); 引入公共css类”, “$4”, “</style>” ], “description”: “Log output to console” }}最后 ：保存 然后新建 .vue文件 ，如果新建的页面啥都没有 在这个页面输入 vue 回车 OK ...

主题插件Atom One Dark Theme好看的主题通用插件Bookmarks代码标记，方便查找指令：shift + cmd + kBracket Pair Colorizer 2相邻括号颜色不同，方便查找代码作用域范围，可以与任何主题使用Code Runner代码运行，支持大部分语言Code Spell Checker单词拼写提醒，错误单词纠正Debugger for Chrome调试必备Git Historygit提交历史，对比Live server实时预览htmlPath Intellisense路径提示Prettier - Code formatter代码格式化Settings Sync可以将vscode配置，传到自己的github中，更换电脑可以一键更新配置vscode-icons文件夹图标前端插件Auto Close Tag 自动HTML关闭标签Auto Rename Tag 更新HTML标签名字ESLintVue插件VeturVue 代码提示

vscode下载地址： vscode https://marketplace.visualstudio.com/VSCodevscode 插件支持https://www.jianshu.com/p/e82…配置 ESLint （需安装 Prettier - Code formatter 插件）打开用户设置文件// vscode默认启用了根据文件类型自动设置tabsize的选项 “editor.detectIndentation”: false, // 重新设定tabsize “editor.tabSize”: 2, // #每次保存的时候自动格式化 “editor.formatOnSave”: true, // #每次保存的时候将代码按eslint格式进行修复 “eslint.autoFixOnSave”: true, // 添加 vue 支持 “eslint.validate”: [ “javascript”, “javascriptreact”, { “language”: “vue”, “autoFix”: true } ], // #让prettier使用eslint的代码格式进行校验 “prettier.eslintIntegration”: true, // #去掉代码结尾的分号 “prettier.semi”: false, // #使用带引号替代双引号 “prettier.singleQuote”: true, // #让函数(名)和后面的括号之间加个空格 “javascript.format.insertSpaceBeforeFunctionParenthesis”: true, // #这个按用户自身习惯选择 “vetur.format.defaultFormatter.html”: “js-beautify-html”, // #让vue中的js按编辑器自带的ts格式进行格式化 “vetur.format.defaultFormatter.js”: “vscode-typescript”, “vetur.format.defaultFormatterOptions”: { “js-beautify-html”: { “wrap_attributes”: “force-aligned” // #vue组件中html代码格式化样式 } }保存代码自动按照eslint格式化，一应俱全断点调试 （需安装Debugger for Chrome）官网推荐 https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html在浏览器中展示源码如果你使用的是 Vue CLI 2，请设置并更新 config/index.js 内的 devtool 属性：devtool: ‘source-map’,如果你使用的是 Vue CLI 3，请设置并更新 vue.config.js 内的 devtool 属性：module.exports = { configureWebpack: { devtool: ‘source-map’ }}在vscode中点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件，选择 Chrome/Firefox: Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置：{ “version”: “0.2.0”, “configurations”: [ { “type”: “chrome”, “request”: “launch”, “name”: “vuejs: chrome”, “url”: “http://localhost:8080”, “webRoot”: “${workspaceFolder}/src”, “breakOnLoad”: true, “sourceMapPathOverrides”: { “webpack:///src/”: “${webRoot}/” } }, { “type”: “firefox”, “request”: “launch”, “name”: “vuejs: firefox”, “url”: “http://localhost:8080”, “webRoot”: “${workspaceFolder}/src”, “pathMappings”: [{ “url”: “webpack:///src/”, “path”: “${webRoot}/” }] } ]} ...

前言因为项目需求，需要把图片上传至阿里云 OSS，我的 Api 接口和后台项目是分开的，都使用的 laravel 框架开发，Api 接入 OSS 这里就不做讨论了，这里主要说一下 laravel-admin 上传阿里 OSS 的问题。网上的一些教程也有非常好的，但只说了使用流程，很少有说碰到的问题之类的情况，这里主要就是讲述我在 laravel-admin 接入阿里 OSS 时所遇到的一些问题，以后还有问题时，也会在这里更新。开发环境下面是我的 composer.json 内容(只列出本文需要)：“require”: { “php”: “>=7.0.0”, “encore/laravel-admin”: “^1.6”, “jacobcyl/ali-oss-storage”: “^2.1”, “laravel/framework”: “5.5.*”, …}具体流程1、下载合适的第三方包在 composer.json 文件中的 require 添加 “jacobcyl/ali-oss-storage”: “^2.1”；或者直接运行 composer require jacobcyl/ali-oss-storage:^2.1 亦可。2、添加服务提供者在 config/app.php 文件下增加 Jacobcyl\AliOSS\AliOssServiceProvider::class,，如下图所示：3、在 config/filesystems.php 增加 OSS 配置信息如下：‘disks’ => [ ’local’ => [ ‘driver’ => ’local’, ‘root’ => storage_path(‘app’), ], ‘public’ => [ ‘driver’ => ’local’, ‘root’ => storage_path(‘app/public’), ‘url’ => env(‘APP_URL’).’/storage’, ‘visibility’ => ‘public’, ], ‘s3’ => [ ‘driver’ => ‘s3’, ‘key’ => env(‘AWS_ACCESS_KEY_ID’), ‘secret’ => env(‘AWS_SECRET_ACCESS_KEY’), ‘region’ => env(‘AWS_DEFAULT_REGION’), ‘bucket’ => env(‘AWS_BUCKET’), ], // 这里是新增 ‘oss’ => [ ‘driver’ => ‘oss’, ‘access_id’ => // 这里是你的 OSS 的 accessId, ‘access_key’ => // 这里是你的 OSS 的 accessKey, ‘bucket’ => // 这里是你的 OSS 自定义的存储空间名称, ’endpoint’ => ‘oss-cn-hangzhou.aliyuncs.com’, // 这里以杭州为例 ‘cdnDomain’ => ‘’, // 使用 cdn 时才需要写, https://加上 Bucket 域名 ‘ssl’ => true, // true 使用 ‘https://’ false 使用 ‘http://’. 默认 false, ‘isCName’ => false, // 是否使用自定义域名，true: Storage.url() 会使用自定义的 cdn 或域名生成文件 url，false: 使用外部节点生成url ‘debug’ => false, ], ],4、在 config/filesystems.php 更改 ‘default’ 配置信息如下：‘default’ => env(‘FILESYSTEM_DRIVER’, ‘oss’),也可以在 env 文件中定义 FILESYSTEM_DRIVER = oss 也可。5、在 config/admin.php 修改 upload 配置如下：‘upload’ => [ // Disk in config/filesystem.php. ‘disk’ => ‘oss’, // 这里就是指向 disks 下面的 oss 配置 // Image and file upload path under the disk above. ‘directory’ => [ ‘image’ => ‘images’, ‘file’ => ‘files’, ],],网上的步骤一般就是到这里了，上面的流程参考：laravel-admin 文件上传 oss；问题出现但是这时候问题就出现了， laravel-admin 本身为了开发者快速开发，本身就完成了一部分功能，当我们使用默认账号 admin 登录进去后，在后台的页面右上角和左上角都有默认的头像显示，这个默认头像是存放在本地 local 下的，在 vendor/encore/laravel-admin/resources/views/partials 下 header.blade.php 和 sidebar.blade.php 两个视图文件中显示，请看下图：header.blade.phpsidebar.blade.php而我们在 具体流程 的 5个步骤中已经把上传的配置改成了 oss 了，这时访问后台时，就会抛出一个异常：一开始我以为是 config/filesystems.php 的 default 还写成 local 会解决，但结果并没有。由于时间的原因，我还没有深入去研究，对于 laravel 框架文件上传的原理，我还是个新手，不过这里放上我的解决方法，如果有更好的解决方案，欢迎下方指正，谢谢！解决把 header.blade.php 和 sidebar.blade.php 两个视图文件中的图片的 src 改成阿里云 OSS 存放图片的路径，比如： https://xxx.oss-cn-hangzhou.aliyuncs.com/xxx/xxx/5c77a20012963.jpg ，这张图片就是你想要上传的头像图片地址。这里只是举个例子，当然这样写还是不方便，万一以后更改，还是需要找到这两个文件手动改，很麻烦，可根据自身需求进行解耦优化，这里就不做讨论了。道路阻且长，仍需不断前行！文章参考： [https://blog.csdn.net/zxdf123/article/details/82752145][6][https://blog.csdn.net/guyaofei/article/details/79918697][7] ...

前言一般来说，我们从github克隆代码，有两个模式，一个是https模式，一个是ssh模式。如果我么没有建立ssh信任，是无法通过ssh模式克隆代码的。ssh模式有一个优势就是可以建立本地git工具和github服务器之间的信任，不需要使用账号密码登录，尤其是我们push origin提交服务器的时候，省去输入账号密码的步骤。场景系统：ubuntu 18.04工具：VSCode 1.31.1工具：git 2.17.1过程本地准备SSH-KEY打开终端，cd ~进入根目录，执行ssh keygen，一路回车，生成本地的SSH-KEY，在目录/home/myubuntu/.ssh下分别是id_rsa和id_rsa.pub文件。其中id_rsa.pub文件是公钥，另一个id_rsa是私钥。公约提供给服务器，私钥自己保留，在这里，服务器就是github。把SSH-KEY写入服务器登录github，访问https://github.com/settings/keys页面，主页面有两个模块SSH keys和GPG keys，我们需要使用的是SSH keys。右边页面有一个绿色按钮New SSH key，点击会出现添加栏，分别是Title和Key。把本地文件id_rsa.pub打开，可以在/home/myubuntu/.ssh下执行命令vi id_rsa.pub，完整复制粘贴到Key输入栏，Title可以随便命名，比如ubuntu key，点击下方的绿色按钮Add SSH key，保存成功。在本地终端执行命令ssh -T git@github.com，会用本地秘钥连接github主机，如果有提示You’ve successfully authenticated, but GitHub does not provide shell access.代表连接成功。这时候可以通过ssh从自己的github仓库拉取项目了。拉取数据的时候必须选择ssh地址，复制到本地终端，进入存放代码的目录，执行命令git clone git@github.com:No2015/vue-cli3-typescript.git。只有通过ssh拉取的项目才能通过ssh来控制。本地项目克隆完毕，安装依赖模块，正常运行之后。如果修改成功，可以通过命令行执行git add .、git commit -m ‘add all’,git push origin master三个命令提交代码。或者通过VSCode工具提供的快捷方式提交。因为有ssh签名的信任，账号密码都是免除了的，省事很多。结语之前搞了一小会儿，因为项目是通过https模式拉取下来的，ssh建立之后还是需要输入账号密码，折腾很长时间才发现，修改本地仓库的remote就好了，或者删除本地代码，重新通过ssh拉取新代码。修改本地仓库地址的命令是git remote set-url origin git@github.com:No2015/vue-cli3-typescript.git

本文只是简单地讲述我自己在使用GNU Emacs、Fork，以及Visual Studio Code查看Git仓库的不同分支的diff上的经历。Emacs当使用Emacs时，我更喜欢用M-x package-install安装的magit提供的功能——magit-diff，而不是它自带的vc-dir。按下M-x，输入magit-diff并敲下回车后，Emacs会在minibuffer中等待用户输入要比较的分支。就像在shell中使用git-diff一样，只需要输入两个以..连接的分支名并敲下回车，就可以列出它们间的差异。如下图所示上图是master与re两个分支间的差异。magit-diff会列出两个分支间不一致的文件，与直接使用git-diff命令没有不同。往下滚动跨过文件清单后，还可以查看单个文件的差异。如下图所示Fork第一次知道Fork是在知乎闲逛的时候，好像是在浏览“Mac下有什么值得推荐的软件”这类问题时看到的。某一次，为了能直观地查看两个commit间的差异，便试用了一番，效果确实不错。Fork的界面如下图所示还记得，当时为了能够比较两个commit间的差异，我还在Fork的菜单栏中翻了很久——虽然是毫无收获。结果发现，原来只需要选中两个commit就可以了。如下图所示图片两行蓝色的就是我选中的两个commit——先用鼠标点击其一，按住control键后再选中另一个即可。图片下方的部分与magit-diff差不多，应该也算是一目了然了。Visual Studio Code原本我觉得Fork已经足够好了，某一天在用VSCode时才忽然发现，在Fork中显示的代码差异，是没有语法高亮的。通常来说，即使没有语法高亮，查看短小的diff也不成问题。但如果差异的内容很多，或是diff位于一个很长的函数内部，这时光靠diff来做代码审查已经不太够了——因为不好确定在这片diff中出现的变量和函数，到底是不是正确地定义了的。后来我发现，VSCode自带的“源代码管理”，即便是在查看diff时也是有语法高亮的——不仅有语法高亮，对于Node.js代码而言，还有ESLint的提示和“跳转到定义”的功能，awesome！不愧是全宇宙最好用的编辑器（笑为了可以用VSCode来查看两个分支间的差异，放狗搜了一下，找到了神器GitLens。安装GitLens后，VSCode的最左侧会多出一个菜单项，在其中可以方便地选择两个分支来进行比较。首先，找到一个要比较的分支，选择“Select for Compare”。如下图所示再选中另一个要比较的分支，右键单击选择“Compare with Selected”，然后便可以在下方看到VSCode罗列出不一致的文件清单了。如下图所示VSCode是最吼的！全文完。

这里保存一下vscode的插件和配置信息{ // 以像素为单位控制字号。 “editor.fontSize”: 18, “files.autoSave”: “onFocusChange”, “editor.fontFamily”: “monospace, Consolas, ‘Courier New’”, “editor.mouseWheelZoom”: true, “editor.showFoldingControls”: “always”, “emmet.syntaxProfiles”: { “javascript”: “jsx”, “vue”: “html”, “vue-html”: “html” }, “git.ignoreMissingGitWarning”: true, “eslint.validate”: [ “javascript”, “javascriptreact”, { “language”: “vue”, “autoFix”: true } ], “eslint.options”: { “extensions”: [".js", “.vue”] }, “editor.renderIndentGuides”: true, “vetur.format.defaultFormatter.ts”: “vscode-typescript”, “vetur.format.defaultFormatter.html”: “js-beautify-html”, “vetur.format.defaultFormatterOptions”: { “js-beautify-html”: { “wrap_attributes”: “auto” // html的多个属性不换行 } }, “prettier.singleQuote”: true, “prettier.semi”: false, // “prettier.eslintIntegration”: true, “eslint.autoFixOnSave”: true, “editor.tabSize”: 2, “files.associations”: { “.vue”: “vue” }, “search.exclude”: { “/bower_components”: true, “/dist”: true }, “typescript.useCodeSnippetsOnMethodSuggest”: true, “file_peek.activeLanguages”: [ “typescript”, “javascript”, “python”, “vue” // 添加vue支持 ], “file_peek.searchFileExtensions”: [ “.js”, “.ts”, “.html”, “.css”, “.scss”, “.vue” // 添加vue支持 ], “javascript.format.insertSpaceBeforeFunctionParenthesis”: true, “typescript.format.insertSpaceBeforeFunctionParenthesis”: true, “explorer.confirmDragAndDrop”: false, “explorer.confirmDelete”: false, “vsicons.dontShowNewVersionMessage”: true, “search.location”: “panel”, “workbench.activityBar.visible”: true, “fileheader.Author”: “jiangyan6”, “fileheader.LastModifiedBy”: “jiangyan6”, “workbench.colorTheme”: “One Dark Pro”, “fileheader.tpl”: “/\r\n * @Author: {author} \r\n * @Date: {createTime} \r\n * @Last Modified by: {lastModifiedBy} \r\n * @Last Modified time: {updateTime} \r\n * @Desc: 文件名 \r\n */\r\n”, “workbench.editor.enablePreview”: false, “todohighlight.isEnable”: true, “LineCount.excludes”: [ “/.vscode/”, “/node_modules/”, “/dist/”, “/.history/” ]} ...

前言在实际的项目需求中，我相信很多人都能遇到如标题所说的问题，比如：一个月可修改昵称一次，或者一年可修改昵称三次；我下面的方法也比较简单，是在与朋友的讨论中得到的。需求背景为了表述的更清晰，我这里就简化了需求，如下：每三个月(这里按一个月30天来算, 也就是90天)可更改用户昵称两次，如果三个月内没有用完两次，则下一个三个月拥有的更改次数重置，还是两次。准备工作建立用户数据表 users (这里只列出该文章需要的字段)：CREATE TABLE users ( id int(10) unsigned NOT NULL AUTO_INCREMENT, username varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT ‘添加时间’, create_time timestamp NULL DEFAULT NULL COMMENT ‘添加时间’, username_update_num int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘用户昵称修改次数’, PRIMARY KEY (id),) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci COMMENT=‘用户主表’;我使用的是 laravel 框架，使用其内置中间件进行过滤应用程序 HTTP 请求；具体代码先上中间件里的代码，可跟着注释看。这里不着重写中间件的实现方式了，如需了解，请点击 中间件 public function handle($request, Closure $next) { /** * 目前要解决的问题是: 每三个月(90天)可更改昵称 2 次 * 下面是解决逻辑 / // 得到该用户信息 $user = User::where(‘id’, session(‘uid’))->first(); // 用户注册的时间，create_time 使用的是 timestamp 类型，所以要转换一下，方便计算 $create_time = strtotime($user->create_time); /* * 计算从注册时间起一共过去了几个 90天，也就是过了几轮 * 当前时间减去注册时间 除以 90天的秒数 = n 轮 * 得到的数值 n 很少有整数，比如：1.2 ; * 此时需要进一法处理，因为只要比90天多，哪怕多一秒也要进入下一轮 / $n = ceil( round( (time() - $create_time) / (90 * 24 * 3600), 2) ); /* * 每 90 天可修改两次，每修改一次，数据表 username_update_num + 1 * 现总修改次数：用户自注册时间起至今，共修改的多少次 * 每轮拥有修改次数：每 90天用户有两次修改机会 * 现总修改次数 / 每轮拥有修改次数 = 现修改到第几轮；用 $a 表示 / $a = $user->username_update_num / 2; // 这里写的是 >=，实际情况下，$a 是不可能大于 $n 的 if($a >= $n){ return response()->json([‘code’ => 0, ‘message’ => ‘用户昵称三个月内只能修改两次，您的次数已用完’, ‘data’ => ‘’]); }else{ // 说明前 ($n - 1) 轮中有未用完的次数 if( ($n - $a) > 1){ // 手动更改数据库，补全修改次数，也就是默认以前的每轮都把两次机会用完 $user->update([‘username_update_num’ => (($n - 1) * 2)]); } } /* * 这里是判断必传参数，与上面逻辑没有联系 / if(empty($request->post(‘username’))){ return [‘code’ => 0, ‘message’ => ‘用户昵称不能为空’, ‘data’ => ‘’]; } if($request->post(‘username’) === $user->username){ return [‘code’ => 0, ‘message’ => ‘修改后的昵称不能与原昵称一致’, ‘data’ => ‘’]; } return $next($request); }上面中间件的内容已经写完了，可能会让人有些迷糊，先别急，因为还没有写完，上面只是中间件的内容，是为了拦截已经没有机会修改昵称的用户，以及处理没有用完次数的用户，请接着看下面的控制器 UserController.php 的内容：UserController.php /* * 用户昵称修改 (三个月可修改两次) * * @param \Illuminate\Http\Request * @return \Illuminate\Http\Response */ public function usernameUpdate(Request $request) { $user = User::where(‘id’, session(‘uid’))->first(); $data = [ ‘username’ => $request->post(‘username’), ‘username_update_num’ => $user->username_update_num + 1, ]; if( !$user->update($data) ){ return [‘code’ => 0, ‘message’ => ‘更改用户昵称失败’, ‘data’ => ‘’]; } return [‘code’ => 1, ‘message’ => ‘更改用户昵称成功’, ‘data’ => ‘’]; }如上述 UserController.php 控制器，因为用户是否满足更改昵称条件已经在中间件里做过判断，所以能进来控制器的请求，均是有修改昵称次数的用户，只需直接更改更改昵称且更改次数 + 1 即可。总结这篇文章所讲述的方法适合同种类型的需求，可根据需求更改相应参数。细节上的处理不多，比如：实际上每个月的天数不一定是 30天，这里不做讨论，可相应处理时间即可。主要还是记录该种处理方法，也一定有比这种更好的方法！道路阻且长，仍需不断前行！ ...

译者按： IDE是生产力的保证！原文：Visual Studio Code Settings and Extensions for Faster JavaScript Development译者: Fundebug本文采用意译，版权归原作者所有2年之前，我放弃了Sublime Text，选择了Visual Studio Code作为代码编辑器。我每天花在VS Code上的时间长达5~6个小时，因此按照我的需求优化VS Code配置十分必要。过去这2年里，我试过各种各样的插件与配置，而现在我感觉一切都完美了，是时候给大家分享一下我的使用技巧了！插件VS Code有着非常丰富的插件，这里我给大家推荐几个我最喜欢的VS Code插件。Prettier Code Formatter下载量：167万我使用Prettier来统一代码风格，当我保存HTML/CSS/JavaScript文件时，它会自动调整代码格式。这样，我不用担心代码格式问题了。由于Prettier本身不能个性化配置，有时可能会引起不适，但是至少保证团队成员可以轻易统一代码风格。npm下载量：119万npm插件可以检查package.json中所定义的npm模块与实际安装的npm模块是否一致：package.json中定义了，但是实际未安装package.json中未定义，但是实际安装了package.json中定义的版本与实际安装的版本不一致npm Intellisense下载量：105万npm Intellisense插件会为package.json建立索引，这样当我require某个模块时，它可以自动补全。Bracket Pair Colorizer下载量：95万Bracket Pair Colorizer可以为代码中的匹配的括号自动着色，以不同的颜色进行区分，这样我们可以轻易地辨别某个代码块的开始与结束。Fundebug, 1代码搞定BUG监控！Auto Close Tag下载量：117万Auto Close Tag插件的功能非常简单，它可以自动补全HTML/XML的关闭标签。GitLens下载量：164万我非常喜欢Gitlens，因为它可以帮助我快速理解代码的修改历史。Current Line Blame：查看当前行代码的结尾查看最近一次commit的姓名、时间以及信息Current Line Hovers：在当前行代码的悬浮框查看详细的最近一次的commit信息。Markdown All in One下载量：45万Markdown All in One插件帮助我编写README以及其他MarkDown文件。我尤其喜欢它处理列表以及表格的方式。自动调整列表的数字序号自动格式化表格用户配置除了安装各种各样的插件，我们还可以通过配置VS Code的User Settings来个性化我们的VS Code。字体设置我非常喜欢带有ligatures(合字、连字、连结字或合体字)的字体。ligatures就是将多于一个字母的合成一个字形。我主要使用Fira Code作为我编程所使用的字体，如下图中的=>与===：我的字体配置如下:“editor.fontFamily”: “‘Fira Code’, ‘Operator Mono’, ‘iA Writer Duospace’, ‘Source Code Pro’, Menlo, Monaco, monospace”,“editor.fontLigatures”: true关于缩进，我是这样配置的： “editor.detectIndentation”: true, “editor.renderIndentGuides”: false,import路径移动或者重命名时，自动更新:“javascript.updateImportsOnFileMove.enabled”: “always”,user-settings.json下面是我的VS Code的配置文件user-settings.json：{ “workbench.colorCustomizations”: { “activityBar.background”: “#111111”, “activityBarBadge.background”: “#FFA000”, “list.activeSelectionForeground”: “#FFA000”, “list.inactiveSelectionForeground”: “#FFA000”, “list.highlightForeground”: “#FFA000”, “scrollbarSlider.activeBackground”: “#FFA00050”, “editorSuggestWidget.highlightForeground”: “#FFA000”, “textLink.foreground”: “#FFA000”, “progressBar.background”: “#FFA000”, “pickerGroup.foreground”: “#FFA000”, “tab.activeBorder”: “#FFA000”, “notificationLink.foreground”: “#FFA000”, “editorWidget.resizeBorder”: “#FFA000”, “editorWidget.border”: “#FFA000”, “settings.modifiedItemIndicator”: “#FFA000”, “settings.headerForeground”: “#FFA000”, “panelTitle.activeBorder”: “#FFA000”, “breadcrumb.activeSelectionForeground”: “#FFA000”, “menu.selectionForeground”: “#FFA000”, “menubar.selectionForeground”: “#FFA000” }, “editor.fontSize”: 14, “editor.lineHeight”: 24, // These are for subliminal, check them out. “editor.hideCursorInOverviewRuler”: true, “editor.lineNumbers”: “on”, “editor.overviewRulerBorder”: false, “editor.renderIndentGuides”: false, “editor.renderLineHighlight”: “none”, “editor.quickSuggestions”: true, // end subliminal changes “editor.fontFamily”: “‘Fira Code’, ‘Operator Mono’, ‘iA Writer Duospace’, ‘Source Code Pro’, Menlo, Monaco, monospace”, “vsicons.projectDetection.autoReload”: true, “editor.formatOnPaste”: false, “editor.formatOnSave”: true, “editor.fontLigatures”: true, “prettier.tabWidth”: 4, “editor.wordWrap”: “on”, “editor.detectIndentation”: true, “workbench.iconTheme”: “eq-material-theme-icons-palenight”, “editor.minimap.enabled”: false, “editor.minimap.renderCharacters”: false, “prettier.parser”: “flow”, “workbench.editor.enablePreview”: false, “emmet.includeLanguages”: { “javascript”: “javascriptreact”, “jsx-sublime-babel-tags”: “javascriptreact” }, “emmet.triggerExpansionOnTab”: true, “emmet.showExpandedAbbreviation”: “never”, “workbench.statusBar.visible”: true, “workbench.activityBar.visible”: true, “workbench.editor.showIcons”: false, “editor.multiCursorModifier”: “ctrlCmd”, “explorer.confirmDelete”: false, “window.zoomLevel”: 0, “javascript.updateImportsOnFileMove.enabled”: “always”, “materialTheme.accent”: “Yellow”, “editor.cursorBlinking”: “smooth”, “editor.fontWeight”: “500”}如果你想知道更多的VS Code使用技巧，可以查看VSCode Can Do That。推荐阅读30个极大提高开发效率的VS Code插件[我为什么推荐Prettier来统一代码风格关于FundebugFundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了6亿+错误事件，得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用！ ...