軟件介紹
WebStorm特別版是一款能夠用于WEB前端的JS開發軟件,具有功能強大H5b編輯器,幫助用戶更加快捷的進行編程,具有智能的JS集成開發環境,讓用戶能夠更加從容的進行開發,同時還具備IntelliJ IDEA的JS部分開發功能,讓用戶能夠非常便捷、快速的完成作業。
WebStorm特別版軟件特色
1、智能的代碼補全
支持不同瀏覽器的提示,還包括所有用戶自定義的函數。
代碼補全包含了所有流行的庫,比如:JQuery, YUI, Dojo, Prototype, Mootools and Bindows。
2、代碼格式化
代碼不僅可以格式化,而且所有規則都可以自己來定義
3、html提示
大家經常在js代碼中編寫html代碼,一般來說十分痛苦,不過有了智能提示,就爽多了。而且html里面還能有js提示。
4、聯想查詢
只需要按著Ctrl鍵點擊函數或者變量等,就能直接跳轉到定義;可以全代碼導航和用法查詢
項目查找函數或者變量,還可以查找使用并高亮。
5、代碼重構
這個操作有些像Resharper,熟悉Resharper的用戶應該上手很快,支持的有重命名、提取變量/函數、內聯變量/函數、移動/復制、安全刪除等等。
6、代碼檢查和快速修復
可以快速找到代碼中的錯誤或者需要優化的地方,并給出修改意見,快速修復。
7、代碼調試
支持代碼調試,界面和IDEA相似,非常方便。
8、代碼結構瀏覽
可以快速瀏覽和定位
9、代碼折疊
功能雖小,不過勝在方便高效
10、包裹或者去掉外圍代碼
自動提示包裹或者去掉外圍代碼,一鍵搞定。
WebStorm特別版軟件功能
JavaScript
基于DOM,特定瀏覽器完成
編碼導航和用法查詢
支持ECMAScript
支持CoffeeScript
支持結點
JavaScript重構
JavaScript單元測試
代碼檢測和快速修復
JSLint/JSHint
基于 Mozilla的JavaScript調試器
其他用途
批量代碼分析
編碼語言混合或內混
拼寫檢查器
重復代碼檢測器
編輯語言
支持HTML5
css/js
檢驗和快速修復
Zen編碼
顯示內容
顯示應用的風格
便捷的環境
HTML5樣本文件和其他Web應用程序模板
FTP和遠程文件同步
集成了版本控制系統
本地記錄
WebStorm特別版使用教程
1、設置開發工具主題/風格
File -> settings -> Editor -> colors&fonts -> scheme name.
跟人覺得 Default Darcula 這兩款主題還可以,如果內置主題都不喜歡,可以去 主題下載地址 尋找你中意的主題。
2、換成自己熟悉編輯器的快鍵鍵:如 Eclipse 的快捷鍵 + 自定義快捷鍵組合
3、取消勾選安全保存時間
這兩項取消勾選,否則影響熱更新,不能及時將修改的內容反應在瀏覽器上。
4、集成 Eslint
集成 Eslint 的前提是你的項目里使用了 Eslint。
5、集成 Git
對 Webstorm 集成 Git 的前提是你已經掌握 Git 的基礎使用方法
Webstorm 集成 Git 帶來的遍歷就是將 Git 的指令用選項的意思表達出來,如果你熟悉 Git 是如何提交代碼的,那么在 Webstorm 使用 Git 提交代碼應該不是什么難事。
對于分支的操作在 Webstorm 右下角
6、常用開發工具窗口
開發過程中,最常用的工具窗口有以下幾個:
Project 記錄項目的層級結構;(快捷鍵 Alt + 1)
Structure 記錄當前文件內部的層級結構,方便快速定位到某個方法;(快捷鍵 Alt + 7)
Npm 使用 npm 構建的工程,Npm 窗口會記錄 package.json 里的腳本信息,一般用于快速啟動項目;快捷鍵 (Ctrl + E)
TODO 項目中難免會預留 TODO 標記用于日后完善,該窗口可以快速定位到哪個文件的哪一行預留了 TODO 標記。(快捷鍵 Alt + 6)
7、配置 Less 自動轉譯 CSS
在進行配置之前,請確保你已經使用 npm/yarn 或其它工具全局安裝了 less 包。
8、Webstorm 安裝 Editorconfig 插件
如果你的項目中要使用 .editorconfig 配置文件控制代碼風格,那么 Editorconfig 插件必不可少。Webstorm 2017.1 及之后的版本都默認安裝了這個插件,如果沒有安裝,參照下圖自行安裝。
9、文件類型設置 —— File Types
在使用微信開發工具開發小程序時,經常遇到這么個問題:小程序開發工具不支持多例模式,一次性只能打開一個項目,可是同時又想打開其他項目參考里面的代碼,總不至于用文本編輯器打開吧。我的選擇是使用 Webstorm 打開小程序的項目,可是隨之而來的一個問題就是小程序的 .wxml 和 .wxss 文件類型 Webstorm 無法識別,代碼都是一片黑色,沒有背景高亮看著很是不舒服。
使用 File Types 可以將 .wxml 和 .wxss 文件類型添加到 Webstorm 中。
在 Cascading Style Sheet 下添加 *.wxss 類型,使用 css 語法高亮;
在 HTML 下添加 *.wxml 類型,使用 html 語法高亮。
注意:前面的 * 號不能忘記。
webstorm怎么設置主題?
1、在菜單File中找到Settings,進入
2、appearance里面第一個就是切換主題的設置
3、或者搜索theme,其它程序開發類的軟件,也可以這樣搜索
4、點擊下拉框,選擇另一個主題,再點擊右下角的應用,使之生效。
5、這是Darcula主題的效果,特點是深色
6、這是Intellij主題的效果,默認主題
7、這是Windows主題的效果,和Intellij主題差別不大
WebStorm特別版漢化教程
1、首先小伙伴需要將webstorm安裝在自己的電腦上;
2、然后從網上下載漢化包;
3、將文件解壓并打開找到resources_cn.jar壓縮包;
4、找到你電腦中webstorm的安裝路徑位置,并將文件打開;
5、找到文件夾“lib”,注意漢化包就是放在這里哦;
6、將resources_cn.jar壓縮包直接拖到安裝目錄文件夾“lib”里即可;
7、最后重新啟動webstrom時既是漢化版的啦!
WebStorm特別版常見問題
1. webstorm里使用git bash
webstorm內置terminal為Command Prompt。linux的指令,比如clear,ls等都無法使用??赏ㄟ^以下設置將terminal改為git bash
2. import時通過webpack設置了別名alias,如何恢復webstorm路徑提示和ctrl跳轉
webstorm有針對webpack的設置,File > Settings > Languages and Frameworks >JavaScript | Webpack,然后選擇有配置alias的文件就行了,一般為webpack.base.conf.js。
3. webstorm卡頓——改變內存占用,提升速度
這個看過很多教程,基本都是讓修改WebStorm.exe.vmoptions這個文件。
路徑如下
webstorm安裝主目錄>bin>WebStorm.exe.vmoptions
更改為
第二行:-Xms526m
第三行:-Xmx1024m
其實,webstorm可以用自定義的vmoptions,不用修改WebStorm.exe.vmoptions,而且自定義的入口非常方便:
Help > Edit Custom VM Options。
4. webstorm 右下角顯示內存占用
Settings > Appearance & Behavior > Appearance | Window Options里,勾選Show memory indicator
5. webstorm里import時使用單引號
Setting > Editor > Code Style > HTML里,選項Generated quote marks,選擇Single。
6. webstorm 使用內置的git工具——compare with branch解決沖突
執行git pull后,如果有大量文件沖突,可以通過
右鍵 > Git > compare with banch 來直觀的對比每一個有沖突的文件和遠程分支的差異,然后選擇接受本地或遠程。
7. 手機訪問webstorm做的頁面,根據IP地址訪問出錯
webstorm需要設置為【允許外部連接訪問】
Setting > Build, Exection, Deployment > Debugger里,勾選 can accept external connections,同時Port改為4位。
8. webstorm高亮后端模板(如.ftl文件)
打開Webstorm的setting,可以使用快捷鍵:“Ctrl + Alt + s”打開setting之后,在Editor中的File Types(也可以直接用setting的搜索功能搜索file types) 中的Recognized File Types框中選擇Html Files(因為ftl和tpl模板本身就是html文件,所以就用html文件的高亮格式即可),然后在Registered Patterns中添加“”.ftl“或者”“.tpl”。點擊ok即可
9. JetBrains系列WebStorm等中文輸入法無法跟隨光標
我自己筆記本外接2個顯示屏,其中1個只webstorm用。在webstorm里輸入中文時,如果顯示的輸入法不跟隨(在別的屏幕里),直接將輸入法拖入webstorm所在屏幕內的右側,這樣雖然依然不跟隨,最起碼是在同一個屏幕內。
WebStorm特別版更新日志
在類型信息工具提示和文檔中突出顯示語法
現在,在 JavaScript 和 TypeScript 文件中顯示表達式類型(Cmd / Ctrl-hover)的工具提示會有語法突出顯示。
文檔彈出窗口中顯示的代碼示例也添加了突出顯示。
在導入中使用別名和路徑映射
現在在 JavaScript 和 TypeScript 文件中自動添加導入時,將使用別名和路徑映射。
其他改進和修復
支持使用字符串編寫的 Cucumber 步驟定義
改進 JavaScript 調試工具窗口中的“在瀏覽器中重新加載”操作
修復了編輯某些 TypeScript 類型時的性能問題
從終端跳轉到 Esc 編輯器的問題
改進了 macOS 上的字體渲染
- 精選留言 來自湖南益陽移動用戶 發表于: 2023-1-28
- 好像可以了哦??!謝謝~~
- 精選留言 來自浙江寧波電信用戶 發表于: 2023-6-6
- 好用,真的不錯,棒棒的
- 精選留言 來自寧夏銀川聯通用戶 發表于: 2023-8-3
- 非常強烈推薦,能夠完全解決需求
- 精選留言 來自江西鷹潭電信用戶 發表于: 2023-1-27
- 好用! 謝謝啦,繼續加油哦!永遠支持你們!
- 精選留言 來自遼寧葫蘆島移動用戶 發表于: 2023-9-23
- 剛剛用上了已經