軟件介紹

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 上的字體渲染