前端开发者说

记录开发的故事

  • 首页
  • 归档
  • 标签
  • 搜索
close

变量的解构赋值和展开运算符

发表于 2017-09-20   |  

本文对变量的解构赋值(destructing)和展开运算符(spread operator …)做个简单的介绍。

本文首发在前端开发说

阅读全文 »

npm相关资源整理

发表于 2017-09-19   |  

npm(全称Node Package Manager,即node包管理器)是Node.js默认的、以JavaScript编写的软件包管理系统。 - 来自wikipedia

本文首发在美妆心得技术博客,同步到前端开发者说博客。

npm镜像

1
$ npm config set registry "https://registry.npm.taobao.org"

其他镜像,用于提高安装速度,比如用vue-cli初始化项目。在~/.npmrc中添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
registry=https://registry.npm.taobao.org/
// https://registry.npmjs.org=true
// https://blog.niceue.com/front-end-development/using-domestic-npm-images.html=true
// http://www.cnblogs.com/huang0925/archive/2013/05/17/3083207.html=true
electron_mirror=https://npm.taobao.org/dist/electron/
sass_binary_site=https://npm.taobao.org/dist/node-sass
phantomjs_cdnurl=https://npm.taobao.org/dist/phantomjs
// https://gist.github.com/52cik/c1de8926e20971f415dd=true
chromedriver_cdnurl=https://npm.taobao.org/dist/chromedriver
disturl=https://npm.taobao.org/dist
operadriver_cdnurl=https://npm.taobao.org/mirrors/operadriver
selenium_cdnurl=https://npm.taobao.org/mirrors/selenium
node_inspector_cdnurl=https://npm.taobao.org/mirrors/node-inspector
// 自定义的npm scope
@x-scaffold:registry=https://registry.npmjs.org/

关于关于更多的镜像资料,可以参考我之前写的文章国内镜像源整理

npm包资源搜索

https://libraries.io/npm 相关资源的各种排行榜

npms A better and open source search for node packages

recently updated packages

npm 资源的cdn

整理的Top100

most depended-upon packages

Top 30 NPM Packages for Node.js Developers 2016

most depended-upon packages

包管理工具

pnpm Fast, disk space efficient package manager

cnpm 淘宝 NPM 镜像

yarn

Yarn 对你的代码来说是一个包管理器, 它允许你使用并分享代码给全世界的开发者, Yarn 做这些快捷、安全、可靠,所以你不用担心什么。

设置国内镜像

1
2
$ yarn config set registry https://registry.npm.taobao.org --global
$ yarn config set disturl https://npm.taobao.org/dist --global

这个facebook应该不会加类似React的协议吧?

会生成一个yarn.lock锁定依赖。

优点(摘自官网)

  • 离线模式
  • 确定性
  • 网络性能
  • 相同的软件包
  • 网络适应
  • 扁平模式

例外有看到社区

「CYarn」使用 cnpm 源的 Yarn

smart-npm 在各大社区发布后,就没看到更多了。

npx: npm 5.2.0 内置的包执行器

推荐阅读

  • 一文看懂npm、yarn、pnpm之间的区别
  • Yarn vs npm:你需要知道的一切
  • 更多npm与yarn的性能对比
  • npm 5.0 新版功能特性解析及与 yarn 评测对比
  • npm、bower、jamjs 等包管理器,哪个比较好用?
  • 如何评价Facebook推出的JavaScript模块管理器yarn?
  • 在中国,安装 & 升级 npm 依赖的正确方法

文档

  • https://docs.npmjs.com/
  • semver语义化版本 2.0.0
  • Npm的配置管理及设置代理

依赖升级

见 npm update [-g] […]

npm-check-updates

npm-check

Check for outdated, incorrect, and unused dependencies.

相关的介绍可以参考Node.js开源项目推荐:npm模块升级工具 npm-check

扩展阅读

  • 如何将package.json中的每个依赖关系更新为最新版本?

Node升级

n

Node.js version management: no subshells, no profile setup, no convoluted API, just simple.

nvm

Node Version Manager - Simple bash script to manage multiple active node.js versions

其他

Cost of modules

Find out which of your dependencies is slowing you down

https://github.com/sindresorhus/awesome-npm

【译】用8个 npm 技巧打动你的同事

git利用rebase修改历史提交记录

发表于 2017-08-27   |  

有时候在git的操作中相同的功能提交多次。相同git log看着很难受,特别是有代码洁癖的开发者。本文通过实例来说一说rebase命令如何修改git的history。

阅读全文 »

JavaScript如何遍历Object

发表于 2017-06-03   |  

遍历对象的方法:

  1. for … in
  2. Object.getOwnPropertyNames
  3. Object.keys
  4. for … of ES6
  5. Object.values ES7
  6. Object.entries ES7

for … in

for…in 循环只遍历可枚举属性。像 Array 和 Object 使用内置构造函数所创建的对象都会继承自 Object.prototype 和 String.prototype 的不可枚举属性,例如 String 的 indexOf() 方法或者 Object 的 toString 方法。循环将迭代对象的所有可枚举属性和从它的构造函数的 prototype 继承而来的(包括被覆盖的内建属性)。来自MDN

1
2
3
4
5
6
7
8
9
10
let  o = {
'name': 'huixisheng',
'mail': 'huixisheng@gmial.com'
}

for(let i in o) {
console.log('%s: %s', i, o[i]);
// name: huixisheng
// mail: huixisheng@gmial.com
}

仅迭代自身的属性
如果你只要考虑对象本身的属性,而不是它的原型,那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性 (也能使用propertyIsEnumerable)。另外,如果你知道外部不存在任何的干扰代码,你可以扩展内置原型与检查方法。 来自MDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let  o = {
'name': 'huixisheng',
'mail': 'huixisheng@gmial.com'
}


function Person() {
this.city = 'hangzhou';
}
Person.prototype = o;

const objPerson = new Person();

for (let prop in objPerson) {
// propertyIsEnumerable 返回一个布尔值,表明指定的属性名是否是当前对象可枚举的自身属性。
if (objPerson.hasOwnProperty(prop)) {
// objPerson.city: hangzhou
// 原型链上的属性不会显示
console.log('objPerson.%s: %s', prop, objPerson[prop]);
}
}


for(let prop1 in objPerson){
console.log('objPerson.%s: %s', prop1, objPerson[prop1]);
}
//objPerson.city: hangzhou
//objPerson.name: huixisheng
//objPerson.mail: huixisheng@gmial.com

Object.getOwnPropertyNames()

object.getOwnPropertyNames 返回一个数组,该数组对元素是 obj 自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for…in 循环(或 Object.keys)迭代该对象属性时一致。 数组中不可枚举属性的顺序未定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//不可枚举属性
var my_obj = Object.create({}, {
getFoo: {
value: function() { return this.foo; },
enumerable: false
}
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]
console.log(Object.keys(my_obj)); // [ 'foo' ]
for (var i in my_obj) {
console.log(i, my_obj[i]); // foo 1
}
1
2
3
4
5
6
7
8
9
10
let  o = {
'name': 'huixisheng',
'mail': 'huixisheng@gmial.com'
}

console.log(Object.getOwnPropertyNames(o)); // [ 'name', 'mail' ]
console.log(Object.getOwnPropertyNames(Object).join(',')); // length,name,arguments,caller,prototype,assign,create,freeze,getOwnPropertyDescriptor,getOwnPropertyNames,getOwnPropertySymbols,is,isExtensible,isFrozen,isSealed,keys,preventExtensions,seal,defineProperty,defineProperties,getPrototypeOf,setPrototypeOf
console.log(Object.getOwnPropertyNames(Array).join(',')); // length,name,arguments,caller,prototype,isArray,from,of
console.log(Object.getOwnPropertyNames(Function).join(',')); // length,name,arguments,caller,prototype
console.log(Object.getOwnPropertyNames(Map).join(',')); // length,name,arguments,caller,prototype

for … of

for…of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray,arguments 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3

Object.values() ES7

Object.values() 方法返回一个给定对象自己的所有可枚举属性值的数组,值的顺序与使用for…in循环的顺序相同 ( 区别在于for-in循环枚举原型链中的属性 )。来自MDN

1
2
3
4
5
let  o = {
'name': 'huixisheng',
'mail': 'huixisheng@gmial.com'
};
Object.values(o); // ['huixisheng', 'huixisheng@gmial.com']

兼容性:

  • http://node.green/#ES2017-features-Object-static-methods-Object-values
  • http://kangax.github.io/compat-table/es2016plus/#test-Object_static_methods
  • http://www.webbrowsercompatibility.com/

Polyfill :

  • shims/Object.values
  • tc39/proposal-object-values-entries

Object.entries ES7

兼容性

  • http://node.green/#ES2017-features-Object-static-methods-Object-entries
1
2
3
4
5
6
7
8
9
10
let  o = {
'name': 'huixisheng',
'mail': 'huixisheng@gmial.com'
}

for(let [key, value] of Object.entries(o)) {
console.log(key, value);
}
// name huixisheng
// mail huixisheng@gmial.com

扩展阅读

  1. Object.keys()与 for…in 遍历对象,输出的结果为什么是顺序的
  2. ES6之6种遍历对象属性的方法
  3. JavaScript学习笔记:对象属性的枚举
  4. JavaScript 学习系列二:Object 对象
  5. Object 对象和 Array 对象
  6. 详解forin,Object.keys和Object.getOwnPropertyNames的区别
  7. ES6 中的 Set、Map 和 WeakMap
  8. http://yanhaijing.com/javascript/2015/05/08/member-of-object/

mac相关技巧整理

发表于 2017-05-30   |  

整理工作中容易遗忘的小技巧和碰到的问题。

屏幕共享

打开 系统偏好设置 -> 共享 -> 屏幕共享。在另外的电脑打开 Finder -> 前往 -> 连接服务器 -> 输入 vnc://ip 访问。或者⌘+K

相关的远程控制s软件splashtop,teamviewer

找回Sierra允许”任何来源”的应用

sudo spctl --master-disable

屏幕截图

Command+shift+3 全屏截图,保存截图到桌面
Command+shift+4 鼠标选定区域截图,保存截图到桌面

相关的扩展阅读:

  • 你所不知道的Mac截图的强大
  • OS X 系统自带的截图快捷键有哪些?

如何重置 Mac 上的 NVRAM

Option + Command + P + R + Power

  • https://support.apple.com/zh-cn/HT204063
  • https://www.zhihu.com/question/20401972

Apache

查看是否开启apache服务 ps aux | grep httpd 或者 apachectl status

开启Apachesudo apachectl start

相关的设置目录 /etc/apache2/

扩展阅读

  • Mac OS X Lion 如何删除自带的 apache php?
  • Mac OS X 启用 Web 服务器

如何查看对于窗口的程序

sudo lsof -iTCP:80 | grep LISTEN

1
2
3
4
5
6
➜  apache2 sudo lsof -iTCP:80 | grep LISTEN
httpd 48016 root 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN)
httpd 48040 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN)
httpd 48506 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN)
httpd 48507 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN)
httpd 48508 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN)

sudo lsof -n -i4TCP:80 | grep LISTEN

查看当前所有监听的端口以及对应的Command和PID

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
➜  apache2 sudo  lsof -nP -iTCP -sTCP:LISTEN
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
java 76 huixisheng 160u IPv6 0x89923b92a98a8d39 0t0 TCP *:9999 (LISTEN)
java 76 huixisheng 431u IPv6 0x89923b92b82f0d39 0t0 TCP *:49493 (LISTEN)
Dash 5123 huixisheng 18u IPv4 0x89923b92b1000c41 0t0 TCP *:50621 (LISTEN)
Dash 5123 huixisheng 21u IPv6 0x89923b92a98a87f9 0t0 TCP *:50621 (LISTEN)
Shadowsoc 7093 huixisheng 4u IPv4 0x89923b92aa812159 0t0 TCP *:8090 (LISTEN)
Shadowsoc 7093 huixisheng 7u IPv4 0x89923b92a3c75c41 0t0 TCP 127.0.0.1:1080 (LISTEN)
phpstorm 10310 huixisheng 143u IPv4 0x89923b92af530159 0t0 TCP 127.0.0.1:6942 (LISTEN)
phpstorm 10310 huixisheng 336u IPv4 0x89923b92a60cd349 0t0 TCP 127.0.0.1:63342 (LISTEN)
plugin_ho 12471 huixisheng 37u IPv4 0x89923b92aaa35a51 0t0 TCP 127.0.0.1:54000 (LISTEN)
�\x9c\x89 24465 huixisheng 12u IPv4 0x89923b92b5a30159 0t0 TCP *:32445 (LISTEN)
httpd 48016 root 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN)
httpd 48040 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN)
httpd 48506 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN)
httpd 48507 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN)
httpd 48508 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN)

安装nginx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
➜  desktop brew install nginx
Docroot is: /usr/local/var/www

The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.

To have launchd start nginx now and restart at login:
brew services start nginx
Or, if you don't want/need a background service you can just run:
nginx
==> Summary
🍺 /usr/local/Cellar/nginx/1.12.0_1: 23 files, 1MB
➜ desktop which nginx
/usr/local/bin/nginx
➜ desktop sudo brew services start nginx

不过试了一下,不是超级用户登陆,而是普通用户登陆,并且监听的端口在1024以下的(例如把默认的8080端口改为了80端口),nginx 开机是启动不了。因此,要 nginx 开机启动的话,需要给予它管理员权限:
sudo chown root:wheel /usr/local/Cellar/nginx/1.2.6/sbin/nginx
sudo chmod u+s /usr/local/Cellar/nginx/1.2.6/sbin/nginx

来自: http://dhq.me/mac-install-nginx-mysql-php-fpm

vagrant up 开启端口报错

==> homestead-7: Checking if box ‘laravel/homestead’ is up to date…
Vagrant cannot forward the specified ports on this VM, since they
would collide with some other application that is already listening
on these ports. The forwarded port to 27017 is already in use
on the host machine.

To fix this, modify your current project’s Vagrantfile to use another
port. Example, where ‘1234’ would be replaced by a unique host port:

config.vm.network :forwarded_port, guest: 27017, host: 1234

Sometimes, Vagrant will attempt to auto-correct this for you. In this
case, Vagrant was unable to. This is usually because the guest machine
is in a state which doesn’t allow modifying port forwarding. You could
try ‘vagrant reload’ (equivalent of running a halt followed by an up)
so vagrant can attempt to auto-correct this upon booting. Be warned
that any unsaved work might be lost.
➜ Homestead git:(master) ✗ sudo lsof -n -i4TCP:27017 | grep LISTEN
mongod 526 huixisheng 11u IPv4 0x40824e155718bce3 0t0 TCP 127.0.0.1:27017 (LISTEN)

原因homestead和mongod的端口冲突了

相关资源

  • 让 Mac 变成神兵利器的软件清单
  • macOS 上的时间跟踪软件

vue @input事件

发表于 2017-05-27   |  

今天有同事过来问我,给el-input 加了@input参数$event变成了input变化后的值(v-model)。大致伪代码如下:

对于@input的印象是:

Vue2.x去除了.sync,需要双向绑定就用到了@input .sync在2.3.0又回来了

所以要让组件的 v-model 生效,它必须:
接受一个 value 属性
在有新的 value 时触发 input 事件

于是去看下el-input源码,截取的伪代码:

1
2
3
4
5
6
7
8
9
10
<input ref="input" @input="handleInput">

methods: {
handleInput(event) {
const value = event.target.value;
this.$emit('input', value);
this.setCurrentValue(value);
this.$emit('change', value);
},
}

可以理解$event为v-model没有问题,可是handlerInput($event, index) { 第一反应index的值应该没有才对。于是去Vue的源码找答案,Vue的源码并不是晦涩难懂,相反而是通俗易懂,当然精髓的代码还没有完全参透。接下来要抽段时间好好品味一番。@TODO

打了断点,大致明白了点,不会像一开始那么迷茫。

input事件

参阅了下资料:

当 <input> 或 <textarea> 元素的值更改时,DOM input 事件会同步触发。(对于 type = checkbox 或 type = radio 的输入元素,当用户单击控件时,输入事件不会触发,因为value属性不会更改。) 此外,当内容更改时,它会在 contenteditable 的编辑器上触发。在这种情况下,事件目标是编辑主机元素。如果有两个或多个具有 contenteditable 的元素为真,“编辑主机”是其父级不可编辑的最近的祖先元素。同样,它也会在 designMode 编辑器的根元素上触发。

来自: https://developer.mozilla.org/zh-CN/docs/Web/Events/input

最后需要注意的是:oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG,那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发,而 IE 其他版本都是正常的,目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案,如果大家有更好的方法,欢迎参与讨论。

来自: http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html

参考

  • https://github.com/ElemeFE/element/blob/d3bf30b48c66649e659c29df80844daa7992f1d9/packages/input/src/input.vue
  • https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md#%E6%95%B4%E8%A1%8C%E9%AB%98%E4%BA%AE
  • https://developer.mozilla.org/zh-CN/docs/Web/Events/input

MacOSX安装多版本php

发表于 2017-05-26   |  

由于lavarel的环境homestead升级成了7.x,导致在外面跑composer update会报错,很麻烦,于是需要升级系统自带php的版本。

1
2
3
4
➜  bin /usr/bin/php -v
PHP 5.6.30 (cli) (built: Feb 7 2017 16:06:52)
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies

1
2
3
# 添加brew的php源
brew tap homebrew/php
brew tap homebrew/dupes
1
2
3
# 安装php71
brew install php71
brew link php71
1
2
3
4
➜  huixisheng.github.com git:(dev) ✗ php -v
PHP 7.1.5 (cli) (built: May 13 2017 13:30:32) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies

缺少mongodb的扩展报错

1
2
3
Problem 1
- jenssegers/mongodb v3.2.2 requires mongodb/mongodb ^1.0.0 -> satisfiable by mongodb/mongodb[1.1.2, 1.0.0, 1.0.1, 1.0.2, 1.0.3, 1.0.4, 1.0.5, 1.1.0, 1.1.1].
- jenssegers/mongodb v3.2.0 requires mongodb/mongodb ^1.0.0 -> satisfiable by mongodb/mongodb[1.1.2, 1.0.0, 1.0.1, 1.0.2, 1.0.3, 1.0.4, 1.0.5, 1.1.0, 1.1.1].
1
2
brew search mongodb
brew install php71-mongodb

居然不用手动配置php.ini

删除MaxOSX自带的php

Mac默认安装了较低版本的php,删除之,统一使用brew管理

查看

$ php -v
PHP 5.6.25 (cli) (built: Sep 19 2016 15:45:41)
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies

删除之

$ sudo rm -rf /private/etc/php-fpm.conf.default /private/etc/php.ini php.ini.default
$ sudo rm -rf /usr/bin/php /usr/bin/php-config /usr/bin/phpdoc /usr/bin/phpize
$ sudo rm -rf /usr/include/php
$ sudo rm -rf /usr/lib/php
$ sudo rm -rf /usr/sbin/php-fpm
$ sudo rm -rf /usr/share/php
$ sudo rm -rf /usr/share/man/man1/php-config.1 /usr/share/man/man1/php.1 /usr/share/man/man1/phpize.1
$ sudo rm -rf /usr/share/man/man8/php-fpm.8

  • 来自http://www.jianshu.com/p/81a6d5253d48

其他

1
$ /usr/local/Cellar/nginx/1.10.3/html
1
2
3
4
5
$ sudo php-fpm -c /usr/local/etc/php/7.1/php.ini -y /usr/local/etc/php/7.1/php-fpm.conf
Password:
[27-Mar-2018 16:25:00] ERROR: failed to open error_log (/usr/var/log/php-fpm.log): No such file or directory (2)
[27-Mar-2018 16:25:00] ERROR: failed to post process the configuration
[27-Mar-2018 16:25:00] ERROR: FPM initialization failed

修改php-fpm.conf 的配置 error_log为绝对绝对地址

配置nginx解析php

记得开启php-fpm

1
2
3
4
5
6
7
8
9
location ~ \.php$ {
root html;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
# 取消默认的配置无法解析
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
include fastcgi_params;
}

参考

  • http://www.jianshu.com/p/66d1d4ee172c
  • https://github.com/Homebrew/homebrew-php
  • http://nodejh.com/post/macos-sierra-apache-multiple-php-versions/

phpstorm相关配置

发表于 2017-05-26   |  

值得开心的事: 在最新的2017.1版本中,PhpStorm/WebStorm已经对Vue.js 进行了原生支持

相关问题

PhpStorm与WebStorm关系

引用官网说明:

1
2
3
PhpStorm = WebStorm + PHP + DB/SQL

All the features of WebStorm are included into PhpStorm, and full-fledged support for PHP and Databases/SQL support are added on top.

.php文件的语法高亮设置

.php 文件不高亮 Editor->file types 里面可以设置相同的类的代码高亮。
php类,可以增加:php4,php5,html,phtml等

phpstorm注释的时候的斜线位置不在缩进的位置

phpstorm注释的代码在Sublime中打开,收起代码的时候很不友好,估计有强迫症用户更是受不了吧。

Preferences->Editor->Code Style->PHP->Other 里面取消 Line comment at first column之前的勾选就行了!

如何修改phpstorm新建文件默认模版注释

默认注释:

1
2
3
4
5
6
7
<?php
/**
* Created by PhpStorm.
* User: huixisheng
* Date: 2017/5/26
* Time: 21:00
*/

1
2
3
4
5
6
<?php
/**
*
* @date 2017-05-26 21:06
* @author huixisheng <huixisheng@gmail.com>
*/

配置Laravel代码跳转

安装Laravel Plugin。执行php artisan ide-helper:generate

  • https://github.com/barryvdh/laravel-ide-helper

怎么设置tab为4个空格缩进

Editor -> Code Style -> PHP,右侧不要勾选 Use tab character

vue的代码缩进由4个空格改为2个空格

Editor > Code Style > JavaScript的设置,Indent键值为4

常用的快捷键

快捷键 描述
shift+command+↑ 代码行上移
control+g 选中相同单词
Commond+d 复制行到下一行
Command+delete 删除当前行
double shift 搜索文件
⌘ + E 历史文件
⌘⌥O 搜索函数。全项目范围
⌥ + 回车 导入包,自动修正
⌘ + n 快事为每个成员属性生成 getter 及 setter 方法

苹果键盘修饰键

Command ⌘
Shift ⇧
Option Alt ⌥
Control ⌃
Caps Lock ⇪
Fn

  • PHPStorm 快捷键大全(Win/Linux/Mac)
  • Mac 键盘快捷键
  • 认识Mac下的那些符号!

如何打特殊符号

搜狗输入法->详情表情和符号

切换至ES6规范

在项目中开启ES6 Preferences->Languages & Frameworks->JavaScript->JavaScript language version->ECMAScript 6。 难找的话直接搜索JavaScript

主题相关文章介绍

  • http://chinagdg.org/2016/02/ttt2-seti-ui/
  • https://www.zhihu.com/question/37762479
  • https://www.zhihu.com/question/35413120
  • https://www.zhihu.com/question/35203203 mac下intellij idea 变得特别卡该如何解决?
  • http://www.webstormthemes.com/themes-list?title=&field_tags_tid=All
  • http://www.jianshu.com/p/10f5f0055715
  • https://blog.fazero.me/2015/07/25/WebStorm%E6%9B%B4%E6%8D%A2%E4%B8%BB%E9%A2%98%E5%92%8C%E4%BF%AE%E6%94%B9%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F/
  • https://www.zhihu.com/question/35413120
  • https://plugins.jetbrains.com/plugin/8006-material-theme-ui
  • http://color-themes.com/?view=index&layout=Generic&order=popular&search=&page=2

相关文章

  • 新特性 https://www.jetbrains.com/webstorm/whatsnew/#v2017-1-completion-in-webpackconfigjs
  • jsdoc https://www.jetbrains.com/help/webstorm/2017.1/creating-jsdoc-comments.html http://blog.lxjwlt.com/2016/09/11/jsdoc.html
  • http://xwartz.xyz/pupa/2016/05/my-workflow-in-sublime/
  • WebStorm 有哪些过人之处? https://www.zhihu.com/question/20936155
  • eslint http://laichuanfeng.com/work/use-eslint-in-webstorm/
  • https://plugins.jetbrains.com
  • 如何优雅的使用 phpStorm
  • 使用phpstorm对代码做智能重构,适用所有JetBrains IDE工具 https://juejin.im/entry/5a2a6bd45188253d6817802b
  • https://juejin.im/post/5a61fe346fb9a01c9b660765
  • WebStorm(前端)和 PhpStorm(后端 PHP)IDE 的统一设置。 https://github.com/zhaotoday/ide-settings
  • 在 WebStorm/PhpStorm 中开启对 Vue.js 的完美支持 http://lightcss.com/get-vuejs-support-in-webstorm-and-phpstorm/

更新日志

2017-05-28 01:02:06

  • 添加主题和相关介绍文章
  • 添加碰到的问题
  • 添加常用的快捷键

参考

  • http://lightcss.com/get-vuejs-support-in-webstorm-and-phpstorm/

项目碰到的问题整理

发表于 2016-12-04   |  
  • 兼容性
  • 项目总结
  • webapck
  • sticky
  • Vue

近期做的项目零零散散的问题的总结。主要是使用webpack,vue碰到的问题。

阅读全文 »

iphone屏幕录制导出gif

发表于 2016-11-30   |  

gif图片可用于博客中文章demo的展示,聊天不发几个表情都不好意思去聊天。

当你做app测试的时候发现了bug,用干巴巴的文字记录,不好描述,或许你的藐视开发人员有可能不懂你在说什么。所以有图有真相,这样方便开发人员重现问题,万一他们自己的设备就是没有问题呢。有图在就不好甩锅了。

Mac系统自带的QuickTime Player可用于电脑和iphone手机的 屏幕录制导出视频,结合软件可以导出gif图片。

阅读全文 »

jenkins发送自定义内容邮件

发表于 2016-11-26   |  

本文介绍了groovy脚本自定义构建完成后通知邮件的标题和内容。

阅读全文 »

npm直接安装github仓库代码

发表于 2016-10-23   |  

npm是nodejs的官方包管理,有成千上万的包,方便了前端模块化开发。但有些前端库并没有发布到npm,但有时候项目又需要它。本文介绍通过npm如何安装github仓库代码。从而达到模块化开发的目的。

阅读全文 »

git操作常见问题汇总

发表于 2016-10-22   |  

平常工作中常用的git操作命令。

阅读全文 »

兼容性解决方案整理

发表于 2016-10-22   |  

移动互联网的今天,告别了ie6。

以下来自原先项目psc。psc已经删除,使用issues继续整理。相信这是一个更好的开始。整理到博客汇总。

阅读全文 »

markdown文件生成目录

发表于 2016-10-22   |  
  • gh-md-toc
    • 安装
    • 生成内容
  • doctoc
    • 安装
    • 控制插入的位置
    • 支持的平台
阅读全文 »

配置SSH公钥和git多账号配置

发表于 2016-10-22   |  

本文介绍如何配置ssh-key

阅读全文 »

国内镜像源整理

发表于 2016-10-22   |  

本文对国内ruby、npm、brew、Composer等镜像源做整理,给前端开发这提供方便。

阅读全文 »

调试工具整理

发表于 2016-10-22   |  

更新日志

2016-12-22

  • [*] 文章结构修改
  • [+] 添加远程调试在线工具

本文收集整理了浏览器调试工具介绍,手机调试方案,nodejs调试,无线抓包。

阅读全文 »

spawn和exec简单介绍

发表于 2016-10-22   |  

谷歌搜了下网上介绍spawn和exec区别的文章还是很详细的,引用相关主要的提到的点。同时结合项目中使用过的脚步了解相关的使用方法。

阅读全文 »

git命令简单介绍

发表于 2015-01-21   |  

开发过程中常用git操作很碰到的问题进行总结。

阅读全文 »
123
huixisheng

huixisheng

前端路漫漫兮,吾将上下而求索

50 日志
60 标签
RSS
GitHub Twitter 微博
© 2019 huixisheng
由 Hexo 强力驱动
主题 - NexT.Pisces