如何优雅地使用 VSCode 来编辑 vue 文件?

最近有个项目使用了Vue.js,本来一直使用的是 PHPStorm 来进行开发,可是遇到了很多问题。后来,果断放弃收费的 PHPStorm ,改用vscode (Visual Stdio Code).当然 vscode 对 vue 也不是原生支持的,今天来扒一扒如何配置 vscode 以便优雅地编辑 vue 文件

先来扒一扒使用 PHPStorm 遇到的问题

  1. vue文件虽然可以通过插件来解决高亮问题,但是<script>标签中的 ES6 代码的识别老是出问题,箭头函数有的时候能正确识别,有的时候会报错
  2. 无法正确识别 vue 文件中的 jsx 语法
  3. 无法正确识别和高亮 vue 文件...
阅读全文

mac上spacemacs体验小记

安装

第一步,安装emacs-ma

emacs-mac是对GNU的emacs为mac环境进行了一定的定制,可能体验会更好一点。那就卸载掉以前的emacs,装下吧
$ brew remove emacs$ brew tap railwaycat/emacsmacport$ brew install emacs-mac --with-spacemacs-icon
其中最后一步会花费比较长的时间,我当时在make阶段足足花费了近10分钟...

第二步,克隆下spacemacs的配置...

阅读全文

一个将多说的头像变成https的简单方法

最近启用全站https之后,却发现地址栏里面却还没有小绿锁 -- 检查了下网络请求,发现原来是多说搞的鬼
多说的头像有一些不是https的,如http://wx.qlogo.cn/mmopen/5YxiaxTAIu0nOId2JW67SDEgJqPNjx33IeUNG5QJLuddhd45icL0R905icmdXbSib4H9FLib1IUsjA67ePswvZ9PxVA/0
其实呢,就上面这个这个头像而言,将http协议改成https协议后其实也是能够访问的。所以呢,就有了一个很简单的解决方案:首先,把多说的嵌入脚本下载保存到本地。
wget https://static.duoshuo.com/embed.js
其次,打开这个文件,格式化一下,找到avatarUrl这个函数,将其修改为这样:
avatarUrl: function (e) {return ((e.avatar_url || rt.data.default_avatar_url) + '').replace(/^http:/, location.protocol);}
最后,压缩下这个js,并替换原本的js:
<script type="text/javascript">var duoshuoQuery = {short_name:"<%= config.duoshuo_shortname %>"};setTimeout(function() {var ds = document.createElement('script');ds.type = 'text/javascript';ds.async = true;ds.src = '/lib/duoshuo-embed.min.js';ds.charset = 'UTF-8';(document.getElementsByTagName('head')[0]|| document.getElementsByTagName('body')[0]).appendChild(ds);}, 10);</script>
构建并发布网站,OK了。有个小bug:如果头像的服务器不支持https的话,就无法显示头像了。这其实也是有办法解决的,比如搞个反向代理,将http转换成https。不过有点麻烦,懒得弄了。阅读全文

一个关于systemd私有目录的奇怪问题

今天遇到一个奇怪的问题 -- PHP里面访问不了/tmp/xhprof-data目录,可是这个目录明明是存在的!今天要使用xhprof进行性能分析,但是打开性能分析开关然后访问页面后却发现没有任何性能数据,很奇怪。检查了下httpd的日志,发现有个fatal error:PHP Fatal error: Uncaught exception 'ErrorException' with message 'fopen(/tmp/xhprof-data/57ad36118dcf0.default.xhprof): failed to open stream: No such file or directory'而对应的PHP代码是类似这样:$file = fopen($filePath, 'w');一般来说这个错误应该是目录不存在或权限不足导致的。那么就检查下对应的目录:
➜  /tmp$ ll -d xhprof-datadrwxrwxrwx. 2 apache apache 41 Aug 12 10:34 xhprof-data
目录是存在的呀,而且为了让PHP能访问,特意设置了全部可以读写,并且所属的用户和组都是apache。然后在代码里面测试下这个目录是否可以访问:
// 简单粗暴点,直接加一行打印看看var_dump(is_dir(dirname($filePath)));die;
结果令人吃惊 -- 居然打印出来是false。难道路径错了吗?把路径也重新打印出来核对下:
// 简单粗暴点,直接加一行打印看看var_dump(dirname($filePath));die;
路径打印出来就是/tmp/xhprof-data,没有错!奇葩问题呀!最后尝试删除掉这个目录,然后在PHP里面加一行自动创建目录:
is_dir(dirname($filePath)) or mkdir(dirname($filePath), 0777, true);
结果,居然通了!到tmp目录下看看跟之前创建的有啥区别:
➜  /tmp$ ll xhprof-datals: cannot access xhprof-data: No such file or directory
奇怪了,目录呢? 使用find找下试试:
➜  /tmp$ find . -type d -name xhprof-datafind: ‘./systemd-private-bd5ddddffb9240cdad836fe13ccb096d-httpd.service-kCEghE’: Permission denied➜  /tmp$ sudo !!➜  /tmp$ sudo find . -type d -name xhprof-data./systemd-private-bd5ddddffb9240cdad836fe13ccb096d-httpd.service-kCEghE/tmp/xhprof-data
原来是放到了systemd-private-bd5ddddffb9240cdad836fe13ccb096d-httpd.service-kCEghE下面。这个是个什么鬼? 据google一下的结果,原来是systemd可以配置/tmp目录为私有目录,以防冲突而创建的。检查下配置:
➜  /tmp$ cat /usr/lib/systemd/system/httpd.service | grep PrivateTmpPrivateTmp=true
果然是有对应的这个配置。涨姿势了。特此记录。阅读全文

如何在静态博客HEXO中只显示摘要信息

默认情况下hexo博客(如本站)的首页显示的是完整的文章 -- 而文章比较长的时候这无疑会带来诸多不遍。 那怎么样才能只显示个摘要呢?方法说白了,其实很简单 -- 只要加入一个<!-- more -->这样的占位符在文章正文里面即可:
这就是一个简介<!-- more -->这里更多的内容
注意:这个占位符貌似只能另起一行,不能放在行内。阅读全文

如何解决Selenium中”Cannot find function addEventListener in object [object HTMLDocument]”的错误

今天遇到一个很坑爹的问题,某Selenium自动化用例老是失败,报错如下
1) App\Tests\***********Facebook\WebDriver\Exception\UnknownServerException: TypeError: Cannot find function addEventListener in object [object HTMLDocument]. (http://**********/*)Failed to take screen-shot: org.openqa.selenium.htmlunit.HtmlUnitDriver cannot be cast to org.openqa.selenium.TakesScreenshot
Google了下这个错误,发现暂时没有适合我的解决方案:
  1. 有的方案建议换firefox来测试 -- 可是我们的这个自动化用例是要跑在一台linu...
阅读全文

PHP下使用强大的imagick轻松生成组合缩略图

最近有个需求是要把多张图片组合起来生成缩略图,刚好可以用强大的imagick扩展。这里说的imagickImageMagick在PHP下的扩展。使用pecl安装起来那叫一个轻松简单 —— 一条命令就搞定:
sudo pecl install imagick
(扩展装好后还是要在php.ini中加上extension=imagick.so,然后记得重启apachePHP-fpm服务。)这个需求是要这样生成缩略图:
  1. 如果有1张图片,就直接生成这张图片的缩略图;
  2. 如果有2张图片,则一张在左边一张在右边,各一半;
  3. 如果有3张图片,则两张左边平均分配,一张独占右边;...
阅读全文