軟件介紹

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單元測(cè)試

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

JSLint/JSHint

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

其他用途

批量代碼分析

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

拼寫檢查器

重復(fù)代碼檢測(cè)器

編輯語言

支持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

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

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

對(duì)于分支的操作在 Webstorm 右下角

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

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

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

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

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

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

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

在進(jìn)行配置之前，請(qǐng)確保你已經(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 無法識(shí)別，代碼都是一片黑色，沒有背景高亮看著很是不舒服。

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

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

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

注意：前面的 * 號(hào)不能忘記。

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有針對(duì)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í)使用單引號(hào)

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 來直觀的對(duì)比每一個(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）的工具提示會(huì)有語法突出顯示。

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

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