web storm使用和配置


 

 

官網:http://www.jetbrains.com/webstorm/

webStorm,File=》setting=》JavaScript-Libraries

 

How WebStorm Works: Completion for JavaScript Libraries

One of the essential features of WebStorm’s editor is code completion. The way it is implemented in WebStorm is that it takes all JavaScript files in the project and goes through them, adding functions and methods to an internal index used for code completion suggestions. The index is automatically updated whenever existing files are changed or new files are added.

completion

JSDoc , used for documenting code, also plays an important role in making your coding experience better. It powers WebStorm autocompletion with additional details about parameters and their types.

jsdoc

But what if you have only minified files included, or if all the libraries are loaded dynamically? In this case it would be impossible for the IDE to statically analyse them and provide the necessary level of code completion when you press Ctrl+Space, or to resolve functions and methods you use.

This is where we introduce the concept (or mechanism) of External libraries that we use in WebStorm.

External libraries

External libraries are files explicitly added to project’s index to be used only in enhancing coding assistance (i.e. code completion, syntax highlighting, navigation, and documentation lookup). They are not to be edited in the scope of this project.

To make this concept clearer, let’s see how it works on a real project. Here is a simple project using the Famous framework for UI (same as on the screenshots above).

As we can see, some framework-specific methods are not resolved. This happens because the file famous.js is in not in the project, but is hosted on CDN.

notresolved

To make WebStorm aware of the functions and methods of the library without adding its source code to the project, we need to set it as an External JavaScript library.

There are several ways to do this:

  • Download the library from the CDN link

The quick-fix ‘Download library’ (call up with Alt+Enter) loads the file from the CDN link into the WebStorm cache (but not in your project).

downloadlib

You can go to Preferences | JavaScript | Libraries to load the list of all libraries that could power code completion for your project and enable specific aspects of code completion that you need.

listoflibs

  • Add file or folder

Another way to add libraries to this list is manually. This option is useful when the library is stored locally on your computer, but not in the project folder.

Select Preferences | JavaScript | Libraries and click Add . Enter the library name and the path to the library file or folder. If you select Global visibility level, you’ll be able to enable this library in your other projects.

addnewlib

Additionally, you can specify the path to library’s/framework’s documentation. This URL will be opened when you press Shift+F1 ( Show external documentation ) on methods from the library.

Important note: If your library files are in the project folder, it’s worth adding them to the list of JavaScript libraries as described above: as a result, code inspections will be disabled for these files, and project-wide Code quality analysis will become faster.

Consider node_modules folder as an example. We would like to have code completion for the modules and keep them in the project, but there is no need for us to run inspections against these files. That is why this folder should be marked as a library. In fact, WebStorm does that automatically.

nodemodules

Node.js Core modules as External library

Node.js core modules (like http or fs ) are another example where External libraries are used. WebStorm suggests downloading the sources and marks them as Global libraries.

nodecore

Once you’ve downloaded the sources, you can enable coding assistance for functions and methods from Node.js core modules in any of your projects. To do that, go to Preferences | JavaScript | Libraries and select the checkbox:

nodecoreenable

Using TypeScript community stubs (TypeScript definition files)

WebStorm provides one more workaround for adding coding assistance for some popular libraries, frameworks and modules when you don’t have the source code available in your project. It allows you to download DefinitelyTyped stubs. These definition files for libraries and frameworks are added to the list of your project’s External libraries, thus enhancing code completion.

tsdef

 

Develop with pleasure!

JetBrains WebStorm Team

文章轉自:http://www.tuicool.com/articles/732ENnZ

新版本的默認支持zen coding。

 

問題:如何修改編輯器字體

 

 
Settings -> Editor -> Colors & Fonts -> Font。
默認是不可以的,后來網上查到首先保存主題另存為才能修改字體。改成了Courier new。字體大小14.
 

 

WebStorm live edit功能與瀏覽器實現同步實現步驟:

http://ju.outofmemory.cn/entry/70084

http://www.350351.com/bianchengyuyan/CSS/314781.html

更多:http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html

 

運行:

配置:ctrl+alt+s。

alt+F2.

常用快捷鍵:

http://www.36ria.com/5700

web storm入門指南:

http://www.36ria.com/5884

 

WebStorm安裝Vim以及快捷鍵設置

WebStorm安裝Vim以及快捷鍵設置

運氣好,趕上了2012年12月21日“世界末日”的促銷活動,便宜買到了這款號稱The smartest JavaScript IDE的軟件。

我一向對工具很挑剔,由於是從.NET轉型成Web前端,在嘗試了Sublime Text 2以后,還是覺得VS把Web Essential, VsVim之類的插件裝全了,更好用也更好看一些。

同時,作為一個Vim的受益者,IDE對Vim支持得如何很大程度上影響了我的選擇。在vim的支持方面,VS的VsVim和Sublime的Vintage都有一些缺陷。種種原因,令我對WebStorm充滿了期待。

安裝Vim插件

在主界面用快捷鍵ctrl+alt+s打開settings界面,左側導航欄里選中plugin項,如下圖:

 

選中plugins后,會在右側列出所有已安裝的插件,我們要新安裝一個插件,因此要點擊Browse repositories。

彈出的新窗口默認會列出所有的插件,我們在右上角的搜索框輸入ideavim進行篩選,然后在ideaVim上右鍵選擇Download and install,如下圖:

下載進度會顯示在WebStorm主窗口底部的狀態欄,下載完畢后會有提示,需要重啟Web Storm才能使插件生效

 

重啟后,就已經是Vim的輸入方式了。這時候打開Tools菜單,會看見多了兩項。

VIM Emulator:切換是否使用Vim的輸入方式。

Reconfigure VIM Keymap: 設置快捷鍵。下文中我們將會用它來設置快捷鍵。

 

設置快捷鍵

長期在Windows下工作,使用Vim不可避免要搭配一些Windows的快捷鍵,比如ctrl+c, ctrl+v,在gVim, VsVim, Vintage里都做出了妥協,采用了Windows的行為。但WebStorm默認並沒有保持這些快捷鍵在Vim中原有的作用。沒關系,下面就來詳述一下如何解決這個問題。

具體做法是:新建一套鍵盤映射,然后讓vim使用這套映射。

(我裝了vim插件后,進入vim編輯模式,ctrl+z默認撤銷, 用,ctrl+c不行)。

首先,在主界面用快捷鍵ctrl+alt+s打開settings界面,左側導航欄里選中Keymap項,如下圖:

在右側的keymaps下拉列表中選擇Default,我們將以此為基礎進行修改,因此點擊copy按鈕,復制一份新的出來,接下來就可以放心在上面修改了。

給它起一個新的名字myVim。

現在要看看copy命令的快捷鍵,於是在右上的搜索框輸入copy,會把與copy相關的都篩選出來,見下圖:

 

我們看到,ctrl+V和ctrl+Insert都能達到copy的目的。同樣,在Default模式下ctrl+V也可以實現paste操作了,這些快捷鍵都從Default那里繼承了過來。

常使用Vim的人肯定知道Esc鍵有多常用。但現代鍵盤幾乎都讓Esc鍵偏居一隅,夠起來不方便。其實在標准的Vim里,ctrl+[同樣能達到Esc的效果。但是在WebStorm的Default模式下,ctrl+[已經被賦予了另外的作用,由於myVim從Default繼承而來,因此ctrl+[也起不到Esc的作用。好在WebStorm的自定義快捷鍵可以覆蓋系統的默認設置。

在上圖中快捷鍵的位置上點擊右鍵,會彈出用於刪除和添加快捷鍵的菜單。修改的時候,如果和別的快捷鍵有沖突會看到紅字提醒。例如下圖所示,ctrl+[的原有功能是Move caret to code block start. 我們的本意就是給它賦予新的功能,果斷點OK,接下來會再彈一個確認對話框,點remove刪除原有的熱鍵功能。

完成后點擊下面的OK按鈕退出Keymaps設置。如下圖,打開主界面菜單欄中的Tools > Reconfigure VIM Keymap,下拉列表中選擇剛才新建的myVim。重啟WebStorm,大功告成。

這時候再試一試ctrl+[,是不是已經可以從Insert Mode返回到Normal Mode了?

避免按Esc鍵的其他方法

有人覺得ctrl+[按起來麻煩,習慣用CapsLock或者JJ來模擬Esc,可以看一下http://vim.wikia.com/wiki/VimTip285

針對Windows用戶的配置,請參考 http://vim.wikia.com/wiki/VimTip75

參考:http://www.cnblogs.com/dc10101/archive/2013/01/02/2841900.html

 我把ctrl+d變成了delete line。

 

http://cssha.com/webstorm/?replytocom=


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM