webstorm安裝及簡單介紹

本篇文章主要介紹webstorm下載、安裝、快速鍵、以及簡單的使用技巧，有興趣的朋友參考一下。

WebStorm下載位址：

#連結：http://www.php.cn/xiazai/gongju/506

安裝步驟 
1.開啟dmg鏡像，將「WebStorm.app」拖曳到應用程式中； 
2.開啟WebStorm到啟動頁面，然後退出WebStorm，這一步很重要。網路上都沒有明確說明，導致操作完下面的步奏，開啟WebStorm的時候提示錯誤。
3.將“JetbrainsCrack.jar”複製到應用程式—右鍵“WebStorm.app”顯示包內容—Contents—bin中； 
4.用文字編輯器開啟應用程式－右鍵“WebStorm.app”顯示包內容－Contents－bin－webstorm.vmoptions，在最後一行加入“-javaagent:JetbrainsCrack.jar”； 
5.開啟“WebStorm.app”，選擇“Activation code”，開啟“SN.txt”，將「'{}」內的序號填入註冊框中，這個sn檔是在你下載的dmg裡面；

webstorm設定技巧

##如何更改主題（字體&配色）:

File -> settings -> Editor -> colors&fonts -> scheme name.主題下載地址

#如何讓webstorm啟動的時候不開啟工程檔案：

File -> Settings->General去掉Reopen last project on startup.

如何完美顯示中文：

File -> Settings->Appearance中勾選Override default fonts by (not recommended)，設定Name:NSimSun，Size:12

如何顯示行號：

File -> Settings->Editor，」Show line numbers」打上勾，就顯示行號了

如何程式碼自動換行：

File -> settings -> Editor “Use Soft Wraps in editor” 打上鉤，程式碼就自動換行了

如何點擊遊標，顯示在本行末尾：

File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。

如何修改快鍵鍵：

File -> Settings->Keymap，然後雙擊要修改快捷的功能會​​有提示框出來，按提示操作

換成自己熟悉編輯器的快鍵鍵：

File ->Settings->Keymap，支援像Visual Studio、Eclipse、NetBeans這樣的主流IDE。

javascript類別庫提示。

File -> settings -> Javascript -> Libraries -> 然後在列表裡選擇自己常用到的javascript類別庫，最後Download and Install就ok了.

在開發js時發現，需要ctrl return 才能選擇選項： 

File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改為“Always”

js提示比較遲緩

File -> Code Completion -> Autopopup in 下1000改為0

git配置：

File -> settings -> Editor -> github，進去改github的帳戶，如果沒有git則不需要.

插件安裝：File ->plugins，然後就選擇給力的插件們再安裝.(“css-X-fire”插件,用於使用firebug修改css屬性時，編輯器內的css程式碼也會改變。夾功能:當工程目錄很龐大時，有些子目錄很常打開，但層級又很深，這時候可以把目錄添加到收藏夾裡面，添加成功後，左側有個“Favorites”菜單

麵包屑導覽：

除了左邊的工程頁面，可以選擇目錄之外，在頂部選單下有一個類似網站麵包屑導覽一樣的目錄也可以實現相同功。點選每個目錄就會有下拉選單顯示其下的子目錄，很實用.

建構器介面:

註解符合格式的話就會出現。如果是js檔案則是js類別的函數和物件；css檔案的話則是這個css檔案的概括；html檔案的話則是節點的結構圖。話說這幾個就是為了方便查看程式碼的結構性.

todo介面：

為程式碼加上todo註解就會出現這個介面

雙欄程式碼介面：
右鍵點選程式碼標籤上的文件，然後右鍵-> spilt vertically(左右兩螢幕)或spilt horizo​​ntally(上下兩螢幕)

本地歷史功能:
找回程式碼的好方法

webstorm快速鍵說明

#Editing編輯相關快速鍵

Ctrl Space：
Basic code completion (the name of any class, method or variable) 基本程式碼完成（任何類別、函數或變數名稱），改為Alt S

Ctrl Shift Enter ：
Complete statement 補全目前語句

Ctrl P：
Parameter info (within method call arguments) 參數資訊包含方法呼叫參數

Ctrl mouse over code
Brief Info 簡單資訊

Ctrl F1
Show description of error or warning at caret 顯示遊標所在位置的錯誤訊息或警告訊息

Alt Insert
Generate code…（Getters, Setterstters , Constructors）新建一個檔案或產生程式碼，…建構函數，可以建立類別裡面任何欄位的getter與setter方法

Ctrl O
Override methods 重載方法

Ctrl I
Implement methods 實作方法

Ctrl Alt T
Surround with…（if, else, try, catch, for, etc）用* 來圍繞選取的程式碼行，（ * 包含if 、 while 、 try catch 等）

Ctrl /
Comment/uncomment with line comment 行註解/取消行註解

Ctrl Shift /
Comment/uncomment with block comment 區塊註解/取消區塊註解

Ctrl W
Select successively increasing code blocks 選擇程式碼區塊，一般是增量選擇

Ctrl Shift W
Decrease current selection to previous state 上個快速鍵的回退，減量選擇代碼

Alt Q
Context info 上下文資訊

#Alt Enter
Show intention actions and quick-fixes 意圖行動，快速見效

# Ctrl Alt L
Reformat code 根據範本格式對程式碼格式化

Tab/ Shift Tab
Indent/unindent selected lines 對所選行進行縮排處理/撤銷縮排處理

#Ctrl X or Shift Delete
Cut current line or selected block to clipboard 剪下目前行或所選程式碼區塊到剪切板

Ctrl C or Ctrl Insert
Copy current line or selected block to chipboard 拷貝目前行或所選程式碼區塊到剪貼簿

Ctrl V or Shift Insert
Paste from clipboard 貼上剪下板上的內容

#Ctrl Shift V
Paste from recent buffers 貼上緩衝器中最新的內容

Ctrl D
Duplicate current line or selected block 複製目前行或所選程式碼區塊

Ctrl Y
Delete line at caret 刪除遊標所在位置行

Ctrl Shift J
Smart line join（HTML and JavaScript only）加入智慧行（HTML 和JavaScript）

Ctrl Enter
Smart line split（HTML and JavaScript only）分離智慧行（HTML 和JavaScript）

Shift Enter
Start new line 另起一行

Ctrl Shift U
Toggle case for word at caret or selected block遊標所在位置大小寫轉換

Ctrl Shift ]/[
Select till code block end/start 選擇直到程式碼區塊結束/開始

Ctrl Delete
Delete to word end 刪除文字結束

Ctrl Backspace
Delete to word start 刪除文字開始

Ctrl NumPad /-
Expand/collapse code block 擴充功能/縮減程式碼區塊

Ctrl Shift NumPad
Expand all 擴張所有

Ctrl Shift NumPad-
Collapse 縮減所有

Ctrl F4
Close active editor tab 關閉活躍編輯標籤

# Search/replace搜尋/替代相關快速鍵######Ctrl F ###Find 在目前檔案內快速尋找程式碼######Ctrl Shift F ###Find in path 指定檔案內尋找路徑### ###F3 ###Find next 尋找下一個######Shift F3 ###Find previous 尋找上一個######Ctrl R ####Replace 目前檔案內程式碼替代##### #Ctrl Shift R ###Replace in path 指定檔案內程式碼批次替代######Usage Search搜尋相關快速鍵######Alt F7/Ctrl F7 ###Find usages/Find usages in file 找到使用/在檔案中找到使用######Ctrl Shift F7 ###Highlight usages in file檔案中精彩使用######Ctrl Alt F7 ###Show usages 顯示使用#######Running運行######Alt Shift F10 ###Select configuration and run 選擇架構架，執行######Alt Shift F9 ###Select configuration and debug 選擇架構架，修補漏洞######Shift F10 # ##Run 執行######Shift F9 ###Debug 修補漏洞######Ctrl Shift F10 ###Run context configuration from editor 從編輯執行內容架構######Ctrl Shift X # ##Run command line 執行命令列###

Debugging Debugging相關快速鍵

F8 
Step over 不進入函數

F7 
Step into 單步執行

Shift F7 
Smart step into 智慧單步執行

Shift F8 
Step out 跳出

Alt F9 
##Shift F8 

Step out 跳出

Alt F9 

Run to cursor 運行到遊標處

Alt F8 

Evaluate expression 評估表達

F9 

Resume program 重新開始程序

Ctrl F8 

Toggle breakpoint 切換斷點

Ctrl Shift F8 

View breakpoints 查看斷點

Ctrl Shift F8 

View breakpoints 查看斷點

Ctrl Shift F8 

View breakpoints 查看斷點

Ctrl Shift F8 

View breakpoints 查看斷點

Navigation 定位相關快速鍵

Ctrl N 

Go to class跳到指定類別

Ctrl Shift N 

go to file 透過檔案名稱快速尋找工程內的檔案

Ctrl Alt Shift N 

Go to symbol 透過一個字元找出函數位置

Alt Right/ left 

Go to next/ previous editor tab 進入下一個/ 上一個編輯器選項

F12 

Go back to previous tool window 進入上一個工具視窗

Esc 

Go to editor（from tool window） 從工具視窗進入編輯器

Shift Esc 

Hide active or last active window 隱藏活動視窗

Ctrl Shift F4 

Close active run/message/find/…tab 關閉活動….標籤

Ctrl G 

Go to line 跳到第幾行

Ctrl E 

Recent files popup 彈出最近開啟的檔案

#Ctrl Alt Left/Right 

Navigate back/forward 導航前進/後退

Ctrl Shift Backspace 

Navigate to last edit location 向最近編輯定位導航

Alt F1 

#Select current file or symbol in any view#尋找目前選取的程式碼或檔案在其他介面模組的位置

Ctrl B or Ctrl Click 

Go to declaration跳到定義處

Ctrl Alt B 

Go to implementation (s) 跳轉方法實作處

Ctrl Shift B 

Go to type declaration 跳轉方法定義處

Ctrl Shift I 

Open quick definition lookup 開啟定義快速尋找

Ctrl U 

Go to super-method/super-class 跳躍方法/超階級

Alt Up/Down 

Go to previous/next method 在方法間快速移動定位

Ctrl ]/[ 

Move to code block end/start 跳到編碼區塊結束/開始

Ctrl F12 

File structure popup 檔案結構彈出

#Ctrl H 

Type hierarchy 類型層次

Ctrl Alt H 

Call hierarchy 呼叫層次結構

F2/ Shift F2 

Next/previous highlighted error 跳到後一個/前一個錯誤，高亮錯誤或警告快速定位，使用這個快捷鍵可以快速在出錯的語句之間進行跳躍。

F4/Ctrl Enter 

Edit source/ View source 編輯原始碼/檢視原始碼

Alt Home 

Show navigation bar 顯示導覽列

#F11 

Show navigation bar 顯示導覽列

#F11 

Toggle bookmark 切換標記

Ctrl F11 

Toggle bookmark with mnemonic 採用記憶切換標記

Ctrl #[0-9] 

Go to numbered bookmark 跳到帶編號的標記

Shift F11 

Show bookmark 顯示標記

Refactoring 重構相關快速鍵

F5

Copy 拷貝

F6 

F5
Copy 拷貝

#Move 移動

Alt Delete 

Safe Delete 安全刪除

Shift F6 
Rename 重新命名

Ctrl Alt N 
Inline Variable 嵌入變數

Ctrl Alt M 
Extract Method( Javascript only) 提取函數

Ctrl Alt V 
Introduce Variable 引入變數

#Ctrl Alt F 

Introduce Field 引入域

Ctrl Alt C 

Introduce Constant 引入常數

VCS/Local History 版本控制系統/ 本地歷史相關快捷鍵

#Alt 　BackQuote( ) 
#'VCS 'quick popup 快速彈出VCS

Ctrl K 
Commit project to VCS 提交項目至VCS

Ctrl T 
Update project from VCS 從VCS 更新項目

Alt Shift C 
View recent changes 查看最新改變

General 常用的相關快速鍵

Ctrl Shift A 

Find action 尋找並呼叫編輯器的功能

#Alt #[0-9] 

Open corresponding tool window 快速切換開啟介面模組

Ctrl Alt F11 

Toggle full screen mode 切換全螢幕模式Ctrl Shift F12 

##############112 ###########。 #Toggle maximizing editor 切換最大化編輯器######Alt Shift F ###Add to Favorites 將目前檔案增加至收藏夾######Alt Shift I ###Inspect current file with current profile 使用目前屬性檢查目前檔案######Ctrl BackQuote( ) ###Quick switch current scheme 快速轉換現有組合######Ctrl Alt S ###Open setting dialog 開啟設定對話框############################################################################################################################################################################################### ##Ctrl Tab ###Switch between tabs and tool window 標籤和工具窗的轉換（與windows快捷鍵衝突）############相關建議：#########

WebStorm ES6怎麼使用babel

在Webstorm中怎麼使用babel讓ES6轉換成ES5

常用的WebStorm快捷鍵

以上是webstorm安裝及簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！