Visual Studio Code使用中CPU占用率异常暴增过高原因

Visual Studio Code 在使用中CPU占用率突然增高,风扇开始狂转,温度骤增,影响心情的故障原因。

今天要说的是一个困扰我好几个月的问题,Visual Studio Code(下文简称VSCode)在使用中突然增高,风扇开始狂转,温度骤增,影响心情的故障原因。

其实,无论是Windows还是OSX,很多人可能或多或少都遇到过VSCode突然就不好使了,我就遇到过好多次疑难杂症,折腾很久才弄出来,比如下面三点:

  1. tab键突然就不好使了,卡顿很久或者压根无法缩进,并且sidebar的git那块功能彻底失效!
  2. 写Markdown文档的时候,tab键的缩进只能向右,不能收回。。。这真是奇葩。
  3. 使用中莫名其妙的风扇就响了起来,看看进程和温度,CPU满载执行,完全不知道怎么回事,这也是本次要专门提到的问题。

继续阅读“Visual Studio Code使用中CPU占用率异常暴增过高原因”

Nunjucks使用正则表达式示例

我在使用egg.js时,他用的模板引擎是Nunjucks,其中有个地方需要用到正则,可是官方文档基本上写了跟没写一样,官方的[正则表达式](https://mozilla.github.io/nunjucks/templating.html#regular-expressions),于是我便去找例子了。

我在使用egg.js时,他用的模板引擎是Nunjucks,其中有个地方需要用到正则,可是官方文档基本上写了跟没写一样,官方的正则表达式,于是我便去找例子了。

正则表达式

在Nunjucks中使用正则表达式的示例:

{% set regExp = r/^foo.*/g %}
{% if regExp.test('foo') %}
  Foo in the house!
{% endif %}

那么这个就会被正常显示。其他的表达式也是可以的。例如:

<!-- 有个后台存储的未验证的手机号码(mobile)在前端显示,如果格式正确则显示,不正确则显示“暂无” -->
{% set regExp = r/^\d{11}$/g %}
<span>号码:{{mobile if regExp.test(mobile) else '暂无'}}</span>

这两个例子应该看得懂吧。正则这块我并没有看源码,因为搜索出来了,我这里参考的regex exmaple?

后来发现其实很多方法文档并没有写出来,这时候可能真的需要看看源码了,有兴趣的话可以阅读下filter的源码https://github.com/mozilla/nunjucks/blob/master/nunjucks/src/filters.js

WordPress升级到4.9.6及近期博客改造计划

我的Wordpress博客升级到了4.9.6了, 大概也是最后一次升级了. 同时在目前未发生重大变动的情况下, 我打算通过WP-Markdown插件暂时弥补无法通过markdown语法写作的弊端. 与此同时, 也是该想想怎么改造了~

这篇文章是装了WP markdown插件后, 启用了该插件来写的. 目前我正在使用markdown语法进行写作. 将来我想也是.

WordPress升级4.9.6

其实我一直都不太愿意升级Wordpress, 主要是怕博客出现故障. 而且之前的升级, 都没法自动升级, 每次都要手动下载最新的安装包, 在本地模拟一次升级, 确保无误才更新到线上, 当然之前也是因为用的虚拟主机, 所以有些限制导致无法正常在线升级, 年初, 博客迁移到了腾讯云, 一切管理权限都在我这了, 感觉很棒.

当然一直想着改造博客, 迁移, 年初看了Gatsby, Jekyll等等, 想自己写个简单的模板, 然后数据迁移过来, 发现遇到很多障碍, 非常困难. 也就一直没有实施. 今天有一次试着搜了一下wordpress的markdown插件, 看到这款老插件WP-Markdown更新了, 于是打算再次尝试. 安装后才发现, ~~这个插件支支持4.9.1+版本的wordpress, 而我的还是4.8.6~~(原来我看错了, 是仅测试到了4.9.1…好吧反正升级了也暂时没出现什么问题.) 也是抱着侥幸的态度- -. 直接点击了后台的自动更新, 当然点击之前我还是做了备份的~~ 幸运的是升级很顺利. 插件启用后, 文章编辑器就只有编码模式了. 不过对我来说毫无影响~

那么, 我的博客就这样顺利的升级到了4.9.6了. 同时, 将来也抛弃了自带的富文本编辑器了. 使用Markdown来创作了.

当然还有一个主题更新, 这个是万万不可得. 一旦更新我自己修改的大部分模板内容就会被覆盖(我记得以前是, 现在大概也是吧). 因此, 主题旧点就旧点的吧.

关于WP-Markdown

这个插件小试了下, 勉强还行, 但是样式还是很糟糕. 看来要花点功夫来处理. 毕竟markdown的代码显示部分还是比较常用的.

其实每次对内容改动都是件麻烦事. 因为旧的文章又不是markdown格式, 就会出现很多问题. 之前用的highlight.js, 现在也给禁用了, 估计旧文章的样式会有问题, 目前还在考虑给旧文章加载highlight.js, 新文章就不加了.

话说, 这次更新结束后, 也许也是最后一次更新了. 我备份了数据库, 有个大胆的想法.

如果有时间, 基于目前的MySQL数据库, 尝试搞一套前后端分离的博客系统?

好了, 先写到这吧, 晚上把腾讯云的服务器的yum也更新了, nodejs也更新到8.x最新版本了. 有空就好好想想博客怎么在改造下了.

对了正好昨天公安备案通过了。这个网站属于交互类,非常麻烦给了两个表格过来,有一个表格有170多条,我没啥耐心,就随便填的。不过居然一天就通过了。。。棒棒哒~

VSCode格式化代码功能失效的bug解决方法

我在更换了系统,并使用VSCode的Settings Sync插件同步设置和其他插件后,部分插件功能失效,无法格式化代码等问题的查找和解决

VSCode格式化代码功能失效的bug解决方法

前不久我装上了黑苹果,那么为了快速转移开发环境,我使用了VSCode(Visual Studio Code下面简称VSCode)的插件Settings Sync来同步个人设置和其他常用插件,如果不熟悉Settings Sync的可以参考之前我写的一篇文章《Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)》来使用。

现象

当然本文并不是介绍同步,而是要说同步后的编码过程中出现的异常。在Mac下安装好VSCode,用Settings Sync同步成功后,接着git clone正在开发的项目到本地,开发过程中,却发现一个非常奇怪的问题:所有的格式化代码的功能都失效了。Mac下使用快捷键“Alt+Shift+F”(我用的windows键盘),却提示,“当前没有安装“xxx”文件的文档格式化程序。”!我的Vue,SCSS代码都无法正常格式化!这个非常令人不爽,难道Mac下的VSCode会有格式化代码功能的缺失?和Windows版本的VSCode功能不一致?我觉得不太可能。于是重启回到Windows 10,重新拉了项目测试,毫无问题。无论是Windows还是Mac,都是最新版的Visual Studio Code。

分析

无奈之下去google了一下格式化代码的问题,发现很多人都遇到过,有的人说重装VSCode,但是我才新装的,所以排除了,但是重装这个词让我想起一个东西,就是这些格式化代码工具,例如VeturPrettier,他们正常运行的时候都是会在编辑器中产生一个服务或者提示,而失效状态下是看不到的。于是我尝试把Vetur插件停用,重新加载再启用,然而还是无效!

想来想去,插件也安装了,编辑器也是新装的,为何插件没起到作用,突然记起之前Windows下的输出面板中是有Vue Language Server的,而现在却没有,是不是要重新安装插件呢,或者说通过Settings Sync自动化同步插件安装的功能还存在一些其他的问题呢?

解决方案

带着疑问我尝试着将Vetur和Prettier卸载,然后再重新安装,启动VSCode,打开项目,切换到一个Vue页面,终于看到了Vetur的服务,比如下面这张图中表现了正常的格式化功能的效果(截图为我解决问题后的图片)

正常的格式化插件效果

图中看到这里有个Vue Language Server,才是真正表示Vetur插件正常,右下角还有个Prettier,说明一切正常,再试了一下使用快捷键“Alt+Shift+F”,也终于可以正常格式化代码了!问题完美解决。

结论

有时候自动化工具安装的插件可能会存在一些问题,虽然不排除我这个问题发生的偶然性。

另一方面,重装软件有时候能解决问题,不过需要针对问题分析,从最小的改变逐渐排除故障。如果我把VSCode重装,再用Settings Sync同步一次,也许的确可以解决问题,但是也有可能依旧存在问题,而从插件重装下手才是比较省时省力的。

那么,如果开发中依赖插件的部分功能失效了,你也可以尝试重装插件,或许问题就能快速解决了~

Vue下滚动到页面底部无限加载数据Demo

看到一篇Implementing an Infinite Scroll with Vue.js, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考.
从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充

Vue下滚动到页面底部无限加载数据Demo

看到一篇Implementing an Infinite Scroll with Vue.js, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考.

从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充

本文技术要点

  • Vue生命周期
  • axios简单用法
  • moment.js格式化日期
  • 图片懒加载
  • 结合原生js来写scroll事件
  • 请求节流

创建项目

首先创建一个简单的vue项目

# vue init webpack-simple infinite-scroll-vuejs

然后安装项目所需要用的一些插件

# npm install axios moment

初始化用户数据

项目搭建完后, 跑起来看看

# npm run dev

打开http://localhost:8080无误后, 我们开始修改代码, 先看看获取用户数据这块,

<script>
import axios from 'axios'
import moment from 'moment'
export default {
  name: 'app',
  // 创建一个存放用户数据的数组
  data() {
    return {
      persons: []
    }
  },
  methods: {
    // axios请求接口获取数据
    getInitialUsers() {
      for (var i = 0; i < 5; i++) {
        axios.get(`https://randomuser.me/api/`).then(response => {
          this.persons.push(response.data.results[0])
        })
      }
    },
    formatDate(date) {
      if (date) {
        return moment(String(date)).format('MM/DD/YYYY')
      }
    },
  beforeMount() {
    // 在页面挂载前就发起请求
    this.getInitialUsers()
  }
}
</script>

这里原作者也专门提醒, 完全没有必要也不建议在加载页面的时候请求5次, 只是这个接口一次只能返回1条数据, 仅用于测试才这样做的. 当然我这里也可以通过Mock来模拟数据, 就不详细说了~

接下来来写模板结构和样式, 如下:

<template>
  <div id="app">
    <h1>Random User</h1>
    <div class="person" v-for="(person, index) in persons" :key="index">
      <div class="left">
        <img :src="person.picture.large" alt="">
      </div>
      <div class="right">
        <p>{{ person.name.first}} {{ person.name.last }}</p>
        <ul>
          <li>
            <strong>Birthday:</strong> {{ formatDate(person.dob)}}
          </li>
          <div class="text-capitalize">
            <strong>Location:</strong> {{ person.location.city}}, {{ person.location.state }}
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.person {
  background: #ccc;
  border-radius: 2px;
  width: 20%;
  margin: 0 auto 15px auto;
  padding: 15px;

  img {
    width: 100%;
    height: auto;
    border-radius: 2px;
  }

  p:first-child {
    text-transform: capitalize;
    font-size: 2rem;
    font-weight: 900;
  }

  .text-capitalize {
    text-transform: capitalize;
  }
}
</style>

这样页面就能显示5个人的个人信息了.

处理无限滚动加载逻辑

我们接下来需要在methods里面添加scroll()来监听滚动, 并且这个事件是应该在mounted()这个生命周期内的. 代码如下:

<script>
  // ...
  methods: {
    // ...
    scroll(person) {
      let isLoading = false
      window.onscroll = () => {
        // 距离底部200px时加载一次
        let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
        if (bottomOfWindow && isLoading == false) {
          isLoading = true
          axios.get(`https://randomuser.me/api/`).then(response => {
            person.push(response.data.results[0])
            isLoading = false
          })
        }
      }
    }
  },
  mounted() {
    this.scroll(this.persons)
  }
}
</script>

这段代码原文是有一点拼写错误的. 我这里修正了, 另外增加了距离底部即开始加载数据, 并进行截流.

保存好, 回到浏览器, 查看效果, 已经没有问题了~

总结

滚动到页面底部无限加载的功能在Vue上实现其实和普通的页面开发差不多, 每次滚动加载未完成的情况下不会触发请求下一次, 每次请求push到数组内, 通过<img :src="">的数据绑定实现了懒加载(其实0 0我不太认可…), 看完是不是感觉挺简单的.

最后, 我把这个也弄了一份在GitHub上面, 有需要的可以看看infinite-scroll-vuejs-demo~