軟件介紹

WebStorm特別版是一款能夠用于WEB前端的JS開發(fā)軟件，具有功能強(qiáng)大H5b編輯器，幫助用戶更加快捷的進(jìn)行編程，具有智能的JS集成開發(fā)環(huán)境，讓用戶能夠更加從容的進(jìn)行開發(fā)，同時(shí)還具備IntelliJ IDEA的JS部分開發(fā)功能，讓用戶能夠非常便捷、快速的完成作業(yè)。

WebStorm特別版軟件特色

1、智能的代碼補(bǔ)全

支持不同瀏覽器的提示，還包括所有用戶自定義的函數(shù)。

代碼補(bǔ)全包含了所有流行的庫，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

2、代碼格式化

代碼不僅可以格式化，而且所有規(guī)則都可以自己來定義

3、html提示

大家經(jīng)常在js代碼中編寫html代碼，一般來說十分痛苦，不過有了智能提示，就爽多了。而且html里面還能有js提示。

4、聯(lián)想查詢

只需要按著Ctrl鍵點(diǎn)擊函數(shù)或者變量等，就能直接跳轉(zhuǎn)到定義；可以全代碼導(dǎo)航和用法查詢

項(xiàng)目查找函數(shù)或者變量，還可以查找使用并高亮。

5、代碼重構(gòu)

這個(gè)操作有些像Resharper，熟悉Resharper的用戶應(yīng)該上手很快，支持的有重命名、提取變量/函數(shù)、內(nèi)聯(lián)變量/函數(shù)、移動(dòng)/復(fù)制、安全刪除等等。

6、代碼檢查和快速修復(fù)

可以快速找到代碼中的錯(cuò)誤或者需要優(yōu)化的地方，并給出修改意見，快速修復(fù)。

7、代碼調(diào)試

支持代碼調(diào)試，界面和IDEA相似，非常方便。

8、代碼結(jié)構(gòu)瀏覽

可以快速瀏覽和定位

9、代碼折疊

功能雖小，不過勝在方便高效

10、包裹或者去掉外圍代碼

自動(dòng)提示包裹或者去掉外圍代碼，一鍵搞定。

WebStorm特別版軟件功能

JavaScript

基于DOM，特定瀏覽器完成

編碼導(dǎo)航和用法查詢

支持ECMAScript

支持CoffeeScript

支持結(jié)點(diǎn)

JavaScript重構(gòu)

JavaScript單元測試

代碼檢測和快速修復(fù)

JSLint/JSHint

基于 Mozilla的JavaScript調(diào)試器

其他用途

批量代碼分析

編碼語言混合或內(nèi)混

拼寫檢查器

重復(fù)代碼檢測器

編輯語言

支持HTML5

css/js

檢驗(yàn)和快速修復(fù)

Zen編碼

顯示內(nèi)容

顯示應(yīng)用的風(fēng)格

便捷的環(huán)境

HTML5樣本文件和其他Web應(yīng)用程序模板

FTP和遠(yuǎn)程文件同步

集成了版本控制系統(tǒng)

本地記錄

WebStorm特別版使用教程

1、設(shè)置開發(fā)工具主題/風(fēng)格

File -> settings -> Editor -> colors&fonts -> scheme name.

跟人覺得 Default Darcula 這兩款主題還可以，如果內(nèi)置主題都不喜歡，可以去 主題下載地址 尋找你中意的主題。

2、換成自己熟悉編輯器的快鍵鍵：如 Eclipse 的快捷鍵 + 自定義快捷鍵組合

3、取消勾選安全保存時(shí)間

這兩項(xiàng)取消勾選，否則影響熱更新，不能及時(shí)將修改的內(nèi)容反應(yīng)在瀏覽器上。

4、集成 Eslint

集成 Eslint 的前提是你的項(xiàng)目里使用了 Eslint。

5、集成 Git

對 Webstorm 集成 Git 的前提是你已經(jīng)掌握 Git 的基礎(chǔ)使用方法

Webstorm 集成 Git 帶來的遍歷就是將 Git 的指令用選項(xiàng)的意思表達(dá)出來，如果你熟悉 Git 是如何提交代碼的，那么在 Webstorm 使用 Git 提交代碼應(yīng)該不是什么難事。

對于分支的操作在 Webstorm 右下角

6、常用開發(fā)工具窗口

開發(fā)過程中，最常用的工具窗口有以下幾個(gè)：

Project 記錄項(xiàng)目的層級結(jié)構(gòu)；（快捷鍵 Alt + 1）

Structure 記錄當(dāng)前文件內(nèi)部的層級結(jié)構(gòu)，方便快速定位到某個(gè)方法；（快捷鍵 Alt + 7）

Npm 使用 npm 構(gòu)建的工程，Npm 窗口會記錄 package.json 里的腳本信息，一般用于快速啟動(dòng)項(xiàng)目；快捷鍵 （Ctrl + E）

TODO 項(xiàng)目中難免會預(yù)留 TODO 標(biāo)記用于日后完善，該窗口可以快速定位到哪個(gè)文件的哪一行預(yù)留了 TODO 標(biāo)記。（快捷鍵 Alt + 6）

7、配置 Less 自動(dòng)轉(zhuǎn)譯 CSS

在進(jìn)行配置之前，請確保你已經(jīng)使用 npm/yarn 或其它工具全局安裝了 less 包。

8、Webstorm 安裝 Editorconfig 插件

如果你的項(xiàng)目中要使用 .editorconfig 配置文件控制代碼風(fēng)格，那么 Editorconfig 插件必不可少。Webstorm 2017.1 及之后的版本都默認(rèn)安裝了這個(gè)插件，如果沒有安裝，參照下圖自行安裝。

9、文件類型設(shè)置 —— File Types

在使用微信開發(fā)工具開發(fā)小程序時(shí)，經(jīng)常遇到這么個(gè)問題：小程序開發(fā)工具不支持多例模式，一次性只能打開一個(gè)項(xiàng)目，可是同時(shí)又想打開其他項(xiàng)目參考里面的代碼，總不至于用文本編輯器打開吧。我的選擇是使用 Webstorm 打開小程序的項(xiàng)目，可是隨之而來的一個(gè)問題就是小程序的 .wxml 和 .wxss 文件類型 Webstorm 無法識別，代碼都是一片黑色，沒有背景高亮看著很是不舒服。

使用 File Types 可以將 .wxml 和 .wxss 文件類型添加到 Webstorm 中。

在 Cascading Style Sheet 下添加 *.wxss 類型，使用 css 語法高亮；

在 HTML 下添加 *.wxml 類型，使用 html 語法高亮。

注意：前面的 * 號不能忘記。

webstorm怎么設(shè)置主題？

1、在菜單File中找到Settings，進(jìn)入

2、appearance里面第一個(gè)就是切換主題的設(shè)置

3、或者搜索theme，其它程序開發(fā)類的軟件，也可以這樣搜索

4、點(diǎn)擊下拉框，選擇另一個(gè)主題，再點(diǎn)擊右下角的應(yīng)用，使之生效。

5、這是Darcula主題的效果，特點(diǎn)是深色

6、這是Intellij主題的效果，默認(rèn)主題

7、這是Windows主題的效果，和Intellij主題差別不大

WebStorm特別版漢化教程

1、首先小伙伴需要將webstorm安裝在自己的電腦上；

2、然后從網(wǎng)上下載漢化包；

3、將文件解壓并打開找到resources_cn.jar壓縮包；

4、找到你電腦中webstorm的安裝路徑位置，并將文件打開；

5、找到文件夾“lib”,注意漢化包就是放在這里哦；

6、將resources_cn.jar壓縮包直接拖到安裝目錄文件夾“lib”里即可；

7、最后重新啟動(dòng)webstrom時(shí)既是漢化版的啦！

WebStorm特別版常見問題

1. webstorm里使用git bash

webstorm內(nèi)置terminal為Command Prompt。linux的指令，比如clear，ls等都無法使用。可通過以下設(shè)置將terminal改為git bash

2. import時(shí)通過webpack設(shè)置了別名alias，如何恢復(fù)webstorm路徑提示和ctrl跳轉(zhuǎn)

webstorm有針對webpack的設(shè)置，F(xiàn)ile > Settings > Languages and Frameworks >JavaScript | Webpack，然后選擇有配置alias的文件就行了，一般為webpack.base.conf.js。

3. webstorm卡頓——改變內(nèi)存占用，提升速度

這個(gè)看過很多教程，基本都是讓修改WebStorm.exe.vmoptions這個(gè)文件。

路徑如下

webstorm安裝主目錄>bin>WebStorm.exe.vmoptions

更改為

第二行：-Xms526m

第三行：-Xmx1024m

其實(shí)，webstorm可以用自定義的vmoptions，不用修改WebStorm.exe.vmoptions，而且自定義的入口非常方便：

Help > Edit Custom VM Options。

4. webstorm 右下角顯示內(nèi)存占用

Settings > Appearance & Behavior > Appearance | Window Options里，勾選Show memory indicator

5. webstorm里import時(shí)使用單引號

Setting > Editor > Code Style > HTML里，選項(xiàng)Generated quote marks，選擇Single。

6. webstorm 使用內(nèi)置的git工具——compare with branch解決沖突

執(zhí)行g(shù)it pull后，如果有大量文件沖突，可以通過

右鍵 > Git > compare with banch 來直觀的對比每一個(gè)有沖突的文件和遠(yuǎn)程分支的差異，然后選擇接受本地或遠(yuǎn)程。

7. 手機(jī)訪問webstorm做的頁面，根據(jù)IP地址訪問出錯(cuò)

webstorm需要設(shè)置為【允許外部連接訪問】

Setting > Build, Exection, Deployment > Debugger里，勾選 can accept external connections，同時(shí)Port改為4位。

8. webstorm高亮后端模板（如.ftl文件）

打開Webstorm的setting，可以使用快捷鍵：“Ctrl + Alt + s”打開setting之后，在Editor中的File Types（也可以直接用setting的搜索功能搜索file types） 中的Recognized File Types框中選擇Html Files（因?yàn)閒tl和tpl模板本身就是html文件，所以就用html文件的高亮格式即可），然后在Registered Patterns中添加“”.ftl“或者”“.tpl”。點(diǎn)擊ok即可

9. JetBrains系列WebStorm等中文輸入法無法跟隨光標(biāo)

我自己筆記本外接2個(gè)顯示屏，其中1個(gè)只webstorm用。在webstorm里輸入中文時(shí)，如果顯示的輸入法不跟隨（在別的屏幕里），直接將輸入法拖入webstorm所在屏幕內(nèi)的右側(cè)，這樣雖然依然不跟隨，最起碼是在同一個(gè)屏幕內(nèi)。

WebStorm特別版更新日志

在類型信息工具提示和文檔中突出顯示語法

現(xiàn)在，在 JavaScript 和 TypeScript 文件中顯示表達(dá)式類型（Cmd / Ctrl-hover）的工具提示會有語法突出顯示。

文檔彈出窗口中顯示的代碼示例也添加了突出顯示。

在導(dǎo)入中使用別名和路徑映射

現(xiàn)在在 JavaScript 和 TypeScript 文件中自動(dòng)添加導(dǎo)入時(shí)，將使用別名和路徑映射。

其他改進(jìn)和修復(fù)

支持使用字符串編寫的 Cucumber 步驟定義

改進(jìn) JavaScript 調(diào)試工具窗口中的“在瀏覽器中重新加載”操作

修復(fù)了編輯某些 TypeScript 類型時(shí)的性能問題

從終端跳轉(zhuǎn)到 Esc 編輯器的問題

改進(jìn)了 macOS 上的字體渲染