The right tools will do more with less, of course, you have to grasp the sense of propriety, or become the more you will do more of the "laborers."
Editing software layer out of the group, strengths, each has a short. It's hard to find a suitable one. Fortunately there are webstorm, and recently another 3.0 new version released. Why do you say that, she is different from other editors:
1. Any editor needs to be saved (Ctrl + S), which is the feature of the editing software on all win platforms, but the Webstorm edit file does not have that familiar meter in the upper right corner.
In other words, all operations are stored directly, so the disadvantage is that there is no previous meter identification, in case the keyboard misoperation will be stored immediately.
After saving the CTRL + S, in conjunction with the Firefox vim, basically do not move the mouse to see the results page.
2. Any editor has no history as long as the file is closed, but Webstorm has. That is, as long as the webstorm does not close, your files can be returned to the previous operation at any time, webstorm the history after the shutdown reboot. This disadvantage is also obvious, the resulting memory consumption will certainly be relatively large.
3. Any editor, except for server SVN, does not have a local version, but Webstorm provides a local file modification history.
4. The Eye of the Times. Zencoding appeared in the IT World in 2009, after which few tools were integrated directly into it. Webstorm was integrated after 2.0. Node.js,html5,git,cvs and so on are not listed.
5. The provided plug-in is also relatively complete, installation is very convenient. This brings additional problems, the previous eclipse was installed third-party, Webstorm seemingly cannot install third-party plug-ins.
6. You can export the current settings: File, export setting the following is the import settings.
Other uses:
1. Subject, refer to here. (The required files are downloaded in 4th Setting.rar, including the color profiles mentioned in the article)
2. Add Vim plugin: Browse repositories, Plugins, File, Settings, right-click Download and install and restart the IDE.
After rebooting, the console outputs: "8:50:07 Ideavim:vim Keymap was successfully enabled" indicates that the Vim plugin was successfully installed. In addition to install VIM plug-in inside the aptana2.0, really headache, all the files are supported Vim mode, in. html actually does not support, depressed.
This will be another problem, if I want to use ctrl+c,ctrl+v and so on some default shortcut keys, how to do? After installing vim and modifying Defualt, right-click Remove CTRL + Insert in main menu, edit, and then only one CTRL + C is left. After this configuration, you can use some of the default shortcut keys, 90% vim shortcuts. There is one more question to note after the Webstorm restart, the global default is the Vim shortcut, you need to select default copy in Keymaps, Keymap, file, Setting, or Or the global Vim shortcut key.
3. In addition to Webstorm, the company provides another development tool for Phper, Phpstorm, which is described on the home page, Phpstorm includes all Webstorm features. But getting used to curly braces to go to the method name is shown on the same line, so you have to configure:
File--Settings, code style, PHP--wrapping and braces, braces placement
In method Declaration:end of line.
4. Zencoding because of the shortcut keys provided, it is true that zencoding shortcut keys are modified:
Live Templates, File--Setting
Here side if you modify a nothing special, but if you want to add a need in the following type: no applicable contexts yet. Define, click Define to select the type you want to add.
How to make reasonable changes, refer to here.
If you are interested in my modified file settings please click here to download. (which is the Setting.jar file exported from my webstorm, including themes, shortcut keys, ZENCODING.CSS, etc.)
Disposable Import:
Import: File--Import Settings ... Download the individual module configuration directory: win7-C:\Users\jikey (user name) \. Webide10\config
You can also export sttings settings:file ...
5. When developing JS, you need CTRL + RETURN to select candidates and configure:
Preselect, Code completion, Editor, Setting, File----Suggestion:
' Smart ' changed to always
6. Note that: Webstorm debugging is not supported Chinese path Chinese file name.
The following is a description of the shortcut keys for Webstorm:
1. CTRL + SHIFT + N: Opens files in the project (similar to ctrl+shift+r in Eclipse) to open files in any directory under the current project.
2. Ctrl + J: output template
3. Ctrl + B: Skip to variable declaration
4. Ctrl + ALT + T: Surround the package code (including Zencoding's wrap with abbreviation)
5. Ctrl + []: match {}[]
6. Ctrl + F12: can display the structure of the current file
7. Ctrl + X: Cut (delete) row, uncheck, cut the entire row directly, and cut the selected content if part is selected
8. ALT + Left/right: Tag Toggle
9. Ctrl + R: Replace
CTRL + SHIFT + UP: line move
SHIFT + ALT + UP: Block Movement (if () {},while () {} statement block movement)
CTRL + D: Row copy
CTRL + SHIFT +/[: Check Block code <table>....</table>
CTRL +/: Single-line comment
CTRL + SHIFT +/: Block comment
CTRL + SHIFT + I: If the class in the CSS displays the current class details, if it is JS it displays the details of the function (imagine, if you look at the details on the jquery method, you can see the implementation code directly), If it's PHP, then it's still the details of the function.
+ Ctrl + '-/+ ': You can collapse any code block in the project, including any nodetype=3 element in the HTM, function, or object direct amount, and so on. It is not selected for folding, but is automatically recognized for folding. CTRL + '. ': Collapses the code of the selected code. SHIFT + ESC: Any small window that is currently active is minimized or ALT + ' number key ', and the number is displayed on the small window's title bar. ALT + ' 7 ': Displays the current function structure. Similar to the effect of outline in eclipse. Experiment, to Aptana than the power of some, but still can not fully display prototype the following method name. 21. In the case of a *.html page, right-click on a DOM structure in the navigation bar under the file name to select the current DOM structure as a whole.
22. Add support for jquery to the project.
Javascript Libraries, Settings, File, ADD
Add a path to files and add document support to documentations URLs. Here is to note that to add the original uncompressed code, the *.min.js version of the method is not prompted.
After adding, the right menu also has a download button, click, he will automatically select the latest version of the JS library to search, and then in the list of pop-up, and then click Select one, after clicking Download and install, will not be downloaded. This experience is not too good, no checkbox, no radio, just the whole line dimmed after the selection.
If you add multiple versions of jquery, you can visually see the difference between the new methods in each version.
* In this submenu, Usage Scope right click on Project second column under Library, select the newly added jquery to overwrite the entire project.
You can also select the most recently added jquery support in the right-click Use JavaScript Library on the current page.
Of course, not adding as much as possible, after adding more, after the code hints there will be a few milliseconds delay, you need to carefully select the latest version.
23. Line Wrap Settings: File | Settings | Editor --use soft wraps in editor
The following is the effect of jquery1.1 in WS, as well as a hint below that the vim starts running, and the number title bar name on the left.
Default shortcut keys:
1. CTRL + SHIFT + N: Open files in Project
2. Ctrl + J: output template
3. Ctrl + B: Skip to variable declaration
4. Ctrl + ALT + T: Surround package code (including zencoding wrap with abbreviation), CTRL + SHIFT + DEL: Delete package
5. Ctrl + []: match {}[]
6. Ctrl + F12: can display the structure of the current file, quickly jump to the target function
7. Ctrl + X: Cut rows
8. ALT + Left/right: Tag Toggle
9. Ctrl + R: Replace CTRL + SHIFT + R: Global substitution
CTRL + SHIFT + UP: line move
SHIFT + ALT + UP: Block move
CTRL + D: Row copy
CTRL + SHIFT +/[: Check Block code <table>....</table>
CTRL +/: Single-line comment
CTRL + SHIFT +/: Block comment
CTRL + SHIFT + I: Show details of the current class,function
. CTRL + P: Show default parameters
CTRL + SHIFT + V: Multiple texts can be copied
SHIFT + ENTER: Smart jumps to the next line
CTRL + K:SVN Submission
CTRL + SHIFT + U: case
CTRL + ~: Toggle Theme
* CTRL + F11: Add Tag Ctrl + SHIFT + Large keypad number keys
CTRL + ALT + F12:file path
CTRL + ALT + A:search Keymap
SHIFT + F6: Refactoring the sign signature
The following vim common shortcut keys:
A. Mobile:
H,j,k,l: Left, bottom, top, right.
W: The first word of the next word. W: Next word (without punctuation).
E: The ending of the next word. E: Punctuation is not included.
B: The word head of the previous word. B: Punctuation is not included.
<>: Indent when v mode is selected.
Two. Jump:
%: Can match {}, "", (), [] jump between.
H, M, L: Jumps directly to the top, middle, and bottom of the current screen.
#H: Jumps To line # of the current screen.
#L: Jumps to the bottom # line of the current screen.
ZT: The current edit line is placed on top of the screen.
ZZ: The current edit line is placed on the screen.
ZB: The current edit line is placed on the bottom of the screen.
G: Jump directly to the bottom of the file.
GG: Jump to the top of the file.
GD: Jumps to the definition of the function and variable where the cursor is located.
(): Jumps to the current beginning and end of line.
{}: Jumps up and down to the nearest empty line.
[{: Jump to the beginning of the current chunk.]
]}: Jumps to the end of the current chunk.
0: Jump to the beginning of the line.
$: Jumps to the end of the line.
2$: Jumps to the end of the line at the next line.
#: Jumps to the first # position of the line.
#G: 15G, jump to line 15.
: #: Jump to # line.
Three. Select:
1.V: Turn on visual mode. V: Turn on progressive visual mode.
2.^v: Rectangle selection.
3.V3W: Select three characters.
4.ab: Includes brackets and areas within ().
5.aB: Includes brackets and areas within {}.
6.ib: The area within the brackets ().
7.iB: The area within the brackets {}.
8.aw: Mark a word.
Four. Edit:
1. Add:
I: Insert before cursor.
I: Inserted at the beginning of the current line.
A: Insert after cursor.
A: The current line end is inserted.
O: Insert a new row before the current line.
O: Inserts a new row after the current line.
2. Modify C (change) as the main:
R: replaces the character at which the cursor is located.
R: Replaces the character where the cursor is located.
CW: Changes the word-to-tail at the cursor location.
C#W:C3W modifies 3 characters.
C: Modify to end of line.
CI ': Modifies the text content in the paired punctuation.
Di ': Delete the text content in the paired punctuation.
Yi ': Copy the text content in the paired punctuation.
VI ': Select the text content in the paired punctuation.
S: replaces the character at the current cursor.
#S: Delete the # line and replace it with the new text.
3. Delete main:
D: Delete to the end of the line.
X: Deletes the previous character in the position of the cursor every time it is pressed.
X: Every time you press the cursor, delete the following character at the location of the pointer.
#x: Delete the 6 characters after the cursor position.
d^: Delete to the beginning of the line.
d$: Delete to the end of the line.
DD: (CUT) deletes the line where the cursor is located.
DW: Deletes the remainder of the word after a word/cursor.
D4W: Delete 4 word.
#dd: Deletes the # line starting at the line where the cursor is located.
DaB: Deletes the contents of {} and within it.
DiB: Delete the contents of {}.
N1,N2 d: Removes the content between the n1,n2 rows.
4. Find:
/: Enter keywords, find not to find, directly press N, search backwards until found.
?: Enter the keyword and find it is not looking, just press N and look forward until you find it.
*: Find the same word backwards on the current page.
#: Finds the same word forward on the current page.
5. Copy y (Yank) mainly:
YW: Copies the characters from the cursor to the end of the word into the buffer.
#yw: Copies the # characters to the buffer.
Y: Equivalent to YY, copy the entire line.
#yy: Represents the number of lines of text that is copied from the line where the cursor is located.
P: Paste. All operations related to Y must be combined with p to paste.
]p: Paste to the appropriate indent.
N1,N2 CO N3: Copy the contents of line N1 to section N2 to the N3 line.
6. Case conversion:
GUU: Changes the current line's letter to uppercase.
GUU: Changes the current line's letter to lowercase.
GUW: Changes the word under the current cursor to uppercase.
GUW: Changes the word under the current cursor to lowercase.
A. Whole capitalization:
Gggug
GG: The first character of the cursor to the file.
Gu: The selection range is all lowercase.
G: To the end of the file.
B. Entire lowercase: gggug
7. Other:
J: The current line and the next line are merged into one line.
8. Move:
N1,N2 m N3: Move the contents of the N1 line to the N2 row below the N3 line.
This configuration recognizes:
1. The javascript aspect is closer to the current trend of popular development than Aptana.
2. Be bolder and more insightful on html,css than Dreamweaver.
3. There is a bit more heroism on PHP than Zendstudio.
4. In Java, the company offers another tool: IntelliJ idea
Can see the pure English interface, a plethora of shortcut keys, not recommended for beginners to use. It is easy to develop inertia, and inertia is the enemy of developers.
Finally thank the Fire Lord, is the fire ye taught me to use Webstorm. The Fire Lord has always been the pyer in the forefront of technology.
Welcome to reprint, but you must keep the attribution Pride (including links) in this article.
Front-end development tool Webstorm 3.0 configuration using
