William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

Tag Archives: vi

tips of using Jetbrains, xdebug and vim

The following are some summary using PhpStorm and vi.

1.vi: jump position

The following includes some strange symbols for vim, however useful:

Ctrl + o takes to previous location.
`. take you to the last change you made.
CTRL-O and CTRL-I seem to take you back and forth (Ctrl-o, Ctrl-i)


Redo / Undo
u: undo last change
Ctrl-R: Redo
U: return the last line which was modified to its original state

2. phpstorm

Excellent IDE: history, github integration, xdebug, code styles, ftp deployment, a lot of features which make development much easier.

// Always:
Ctrl + Shift + a

To navigate to a recently opened file: Ctrl+E
To navigate to a recently edited file:
Ctrl-Shift-E (recently opened file)
Ctrl-E (recently edited file)

Navigate a class, file or symbol with the specified name:
Class: Ctrl+N
File (directory): Ctrl+Shift+N
Symbol: Ctrl+Shift+Alt+N

To navigate to the next/previous change in the editor:
shortcuts: Ctrl+Shift+Alt+Down or Ctrl+Shift+Alt+Up.

Ctrl+b: open the function's source defination.
Ctrl+F12: show herited members.
Alt-click to close other files.

3. xdebug & phpStorm

By using XAMPP’s xdebug, and phpStorm, make drupal debug works in a web-application env.

To start Xdebug, you’ll need to append the XDEBUG_SESSION_START=xxx section to the url, i.e.:

It does not matter which browser you use, as long as the HTTP request is going to the apache/PHP server that has xdebug installed and configured.

Configuring XDebug with PHPStorm:


4. Run node in webstorm

JetBrains’ Webstorm is fabulous. the ctrl+shift+a shortcut key is great, and git is pretty helpful.
Some useful shortcut keys:

PhpStorm Default Keymap – JetBrains

such as CTRL + SHIFT + F,

vi: wget images from site

vi: wget images from site

Sometimes when we visit a website, we are expressive by the images and want to download them. Manually download is bored, here is a quick way to download them in Linux platform.

  • First use FireFox’s ‘Web Developer’ to get ‘generated resource’.
    ‘View Source’->’View Generated Source’.
  • Save the source in a file of Linux/Cygwin enviroment., such as $HOME/images/src_file.
  • The next step we operate the src_file to get the images like following:
//0. locate to images/ folder.
$ cd images/

//1. strip images from html source.
$ grep -i '.png' src_file >img_file
$ grep -i '.jpg' src_file >>img_file
$ grep -i '.jpeg' src_file >>img_file
$ grep -i '.gif' src_file >>img_file

//2. extract href links.
$ vi img_file

//3. use wget to download these images.
$ for i in `cat img_file`; do wget $i; done;

It is done within 1 minute, no matter how many and big the images are. The key is to use wget – which is a perfect tool for retrieving files using HTTP, HTTPS and FTP, the most widely-used Internet protocols.

change left-indent tab to white-space

vi : change left-indent tab to white-space

When we edit php stuff in a IDE (Integrated Developing Environment such as Dreamweaver, EClipse, and Aptana), We usually has problem with codes’ ‘left indent‘.

Almost all editor use tab(‘\t’) as left indent. The problem will occur when editing the codes in different editor, such as Dreamweaver, notepad+, and Aptana, etc. They explain the ‘left indent‘ by their own ways, and will make the codes actually not ‘left-indent‘ and confusion to read.

The good solution is to use ‘white space‘ instead of ‘left indent‘. Since white space is an ascii code, it makes the ‘left-indent’ solid and never changes across from different tools. To do it is pretty simple, the following is my way by using favorite vi in a *nix enviroment:

//1. using vi to edit a php file.
$ vi php_codes.php
//2. in vi, use sed:
:1,$s/\t/  /g
//if above doesn't work, use: 'ctrl-v', then 'ctrl-I' 
//instead of '\t' to try again.
//':set list' can get all hidden chars in vi.

This way will translate all left-indent tab (‘\t’) to white-spaces: 2 white-spaces, or 4, depending on your choice.

This will greatly increase the codes readability in different IDEs (Dreamweaver, EClipse, Zend, Aptana etc) since it use 2 white-spaces instead of tab (‘\t’).

A improvement way is to write a sed file to loop all php codes in a project, so the changes will apply to all files.

How to manage daily notes and files?

Everyday we need to write down some notices and remarks about our work routines and details. For example, today I wrote down the following messages regarding to daily work and technical details:

(1) Drupal configuration information, database info, admin user and password, installed modules and some specific notices.
(2) extract some excellent information regarding on Drupal development from web articles.
(3) record my developing details and schedule.
(4) record table structures and its design details and reasons why and how.

I put this information into a single file name like `date`_project.txt.
The number of such files are increasing. How to manage them? How to retrieve useful, accurate and certain information in a efficient and quick way? Different people have different choices.

There are 2 choices on my hands: Using Visual Studio environment or using UltraEdit-32.

(1) Visual Studio (I used VC 6++) is quite excellent on these file management and retrieve.
(1.a) First creating a Workspace to hold on the whole project, such as PHP developing.
(1.b) Second creating project under the workspace as many as possible, for examples, under the ‘PHP developing’ workspace, we can create projects of ‘my PHP’, ‘CMS’, ‘MVC’, ‘social networking’, ‘misc’ etc.
(1.c) In a individual project, add text file to hold content. It is pretty intuitionistic and easy to add/remove files under a certain projects.
(1.d) So it is quite clear and reasonable to divide the hiberarchy to 3 levels:
Workspace -> Project -> Files
(1.e) The most valuable thing which I like best is the retrieving function: just using F4 key!
For example, I want to find a keyword ‘htmlentities’, of course, it scatters into different files and very hard to find out all of them without a integration environment.
But in VC, just select search from menu bar, then search the project, or the whole workspace, or any certain directory you want, it will list all the files which include the information, and use ‘F4’ to step in and continue, the information retrieving become much easy and simple!

My long-time developing experience tells me the VC environment is so useful and helpful to speed up daily routine works.

(2) UltrEdit-32 is another choice for the management and retrieving. It is lightweight, also has 3 levels structure:
Workspace -> Project -> Files
And rapid searching function. However, it is a simple version. Not easy and convenient like VC.

The advantage is that it is cheaper and easy to find out, and like VC, it can manage almost all types of files, so it is an alternative of VC.

(3) I also tried Eclipse or Dreamweaver, they are far behind of VC studio on such things.

(3.a) EClipse seems want to add everything into its environment, but it is complex and hard to use. It beats back many people when they try to remember all the shortcut keys. It is not a successful integration environment on such thing.

(3.b) Dreamweaver, which I use mostly for PHP development, can retrieve keyword under a certain project (It has not the concept of workplace), So it is 2-level management instead of VC’s 3-level management.

From Menu bar, ‘Edit’ -> ‘Find and Replace’-> ‘Find in: Entire Current Local Site’ -> then ‘Find All’ (Ctrl+F).
It also retrieve and list the keyword in all files. Similar like VC.

Dreamweaver can only cover PHP related files, some common file such as .txt files or .sql files, except advanced configuration, it can’t support.

I am not a Microsoft fan, my favorite tools are ‘vi’ and ‘dreamweaver’, but VC 6++ environment is quite excellent for project management purpose.

So my conclusion is that, if you desire to improve work performance and efficiency, Microsoft’s Visual Studio integration environment is a ideal way to practice.