軟件介紹

WebStorm 2020.3特別版是一款非常專業(yè)的WEB前端開發(fā)軟件，我們不僅可以通過這款軟件來完成WEB頁面的HTML5代碼編輯，同時(shí)還可以對自己開發(fā)設(shè)計(jì)的WEB頁面進(jìn)行調(diào)試，尋找到開發(fā)過程中忽視的問題，從而讓W(xué)EB頁面更加完美。

WebStorm 2020.3特別版軟件詳情

要論軟件開發(fā)人員和團(tuán)隊(duì)的必備工具是什么，那當(dāng)然莫屬是WebStorm啦！而就在近日，jetbrains公司為該軟件進(jìn)行了一次重大更新，之前都是斷斷續(xù)續(xù)的小更新，但是本次由原來的2020.2版本更新至現(xiàn)在的2020.3版本了，而在本次的全新版本中，界面和功能都有煥然一新的改變，相信大家都想來體驗(yàn)這款全新的版本吧，所以本次小編就為大家?guī)�來這款全新的WebStorm 2020.3特別版。

該軟件被廣大開發(fā)者評為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”“最智能的JavaScript IDE”，而這離不開它可視化的界面以及出色的開發(fā)功能。而在本次的新版本中更是又精簡了程序的外觀，并且新增了許多出色功能，比如Tailwind CSS 支持、改進(jìn)的調(diào)試體驗(yàn)、Git 暫存支持、新的導(dǎo)航功能等等。本次的新外觀能夠直接從歡迎屏幕中打開或者是創(chuàng)建項(xiàng)目，甚至還可以調(diào)整常用的設(shè)置，更加的方便好用了。而在框架技術(shù)中也支持Tailwind CSS了，該功能可以更高效的幫助開發(fā)人員自動補(bǔ)全Tailwind類，并且在鼠標(biāo)懸停時(shí)自動顯示所生成的CSS，可以很大程度的提高大家的開發(fā)效率。還有JavaScript 和 TypeScript、工具、導(dǎo)航等都有全新的改變，使其更具創(chuàng)造力和效率。不管您是學(xué)習(xí)，還是開發(fā)者或者是團(tuán)隊(duì)，該軟件都可以給大家提供平穩(wěn)愉快的開發(fā)體驗(yàn)。

WebStorm 2020.3特別版軟件功能

【外觀】

1、新的歡迎屏幕

我們更新了歡迎屏幕！ 您不僅可以從歡迎屏幕中打開和創(chuàng)建項(xiàng)目，還可以調(diào)整最常用的設(shè)置，如 IDE 主題和字體。

2、IDE 主題已與操作系統(tǒng)設(shè)置同步

現(xiàn)在，您可以將 WebStorm 主題與 macOS 和 Windows 設(shè)置同步。 您只需轉(zhuǎn)到 Preferences / Settings | Appearance & Behavior | Appearance | Theme，然后選擇 Sync with OS 選項(xiàng)。 點(diǎn)擊 Sync with OS 旁邊的齒輪圖標(biāo)來選擇您的首選主題。 我們也計(jì)劃為 Linux 用戶實(shí)現(xiàn)此功能。

3、改進(jìn)了選項(xiàng)卡的使用

在 v2020.3 中，我們讓您能夠更方便地使用選項(xiàng)卡。 現(xiàn)在，您可以通過拖放選項(xiàng)卡或使用新的 Open in Right Split 操作來拆分編輯器。 此外，固定的選項(xiàng)卡現(xiàn)在以特殊圖標(biāo)標(biāo)記，并顯示在選項(xiàng)卡欄的開頭，以便您更快地找到它們。

4、閱讀器模式

WebStorm 具有一種新模式，可讓您的庫和只讀文件可讀性更強(qiáng)。 進(jìn)入此模式可呈現(xiàn)注釋、啟用字體連字等等。

5、多文件模板

我們已經(jīng)實(shí)現(xiàn)了添加自定義文件模板的功能，這些模板可一次創(chuàng)建多個(gè)文件。 例如，當(dāng)您需要添加 .js 文件和測試文件時(shí)，這會非常方便。

6、使用 WebStorm 打開文件

現(xiàn)在，使用 WebStorm 在默認(rèn)情況下打開特定文件類型非常簡單。 轉(zhuǎn)到 Preferences / Settings | Editor | File Types 并點(diǎn)擊 Associate File Types with WebStorm 按鈕。

【框架與技術(shù)】

1、支持 Tailwind CSS

WebStorm 現(xiàn)在可以幫助您更高效地使用 Tailwind CSS！ 它將自動補(bǔ)全 Tailwind 類，在鼠標(biāo)懸停時(shí)為您顯示所生成 CSS 的預(yù)覽，并支持您使用 tailwind.config.js 文件進(jìn)行自定義。

2、根據(jù)用例創(chuàng)建 React 組件

您的代碼中有未解析的 React 組件嗎？ 將脫字符號放到其中，按 Alt+Enter，然后從列表中選擇 Create class / function component - WebStorm 將為您創(chuàng)建相關(guān)的代碼結(jié)構(gòu)。

3、Markdown 編輯和預(yù)覽改進(jìn)

Mermaid.js 支持、重新格式化 .md 文件的功能以及與編輯器一起自動滾動預(yù)覽窗格的功能 - 這些和其他變更將顯著改善您在 WebStorm 中使用 Markdown 文件的體驗(yàn)。

4、對復(fù)雜 webpack 設(shè)置的基本支持

我們已經(jīng)開始添加對多個(gè) webpack 配置的支持。 轉(zhuǎn)到 Preferences / Settings | Languages & Frameworks | JavaScript | Webpack 選擇手動或自動檢測配置文件。

5、Vue.js 的增強(qiáng)

我們已經(jīng)修復(fù)了與 Vue 3 相關(guān)的諸多問題。 例如，WebStorm 現(xiàn)在支持腳本設(shè)置語法。 我們還使 IDE 在 Vue 項(xiàng)目中正確應(yīng)用了 ESLint 代碼樣式規(guī)則，并改進(jìn)了與 TypeScript 語言服務(wù)的集成。

6、全面支持 pnpm

現(xiàn)在，WebStorm 全面支持 pnpm 程序包管理器以及 npm 和 yarn。 在過去的一年里，我們一直在逐步實(shí)現(xiàn)對 pnpm 支持的改進(jìn)。 在 v2020.3 中，我們已經(jīng)完成了收尾工作。

【JavaScript 和 TypeScript】

1、集成了 TypeScript 和 Problems 工具窗口

我們已將 TypeScript 語言服務(wù)集成到 Problems 工具窗口中，并移除了 TypeScript 工具窗口。 進(jìn)行此變更后，用戶可以更輕松地在一個(gè)位置檢查代碼中的問題。 我們還將先前在 TypeScript 工具窗口中可用的操作移動到狀態(tài)欄上的專用微件中。

2、使用 CSS 和 HTML 更好地格式化模板文字

從 v2020.3 開始，WebStorm 將正確支持包含 JavaScript 的多行 CSS 和 HTML 塊的代碼格式化。 當(dāng)您添加這些更復(fù)雜的模板文字或重新格式化代碼時(shí)，IDE 將正確縮進(jìn)。

3、改進(jìn)了調(diào)試體驗(yàn)

調(diào)試時(shí)使用交互式提示和內(nèi)聯(lián)監(jiān)視！ 現(xiàn)在，您可以點(diǎn)擊提示以查看屬于變量的所有字段。 此外，您還可以直接從提示更改變量值并添加監(jiān)視表達(dá)式。

【工具】

1、支持我們的協(xié)作開發(fā)工具

WebStorm 2020.3 支持 Code With Me (EAP)，這是一款用于協(xié)作開發(fā)和結(jié)對編程的新工具。 利用此工具，您可以與他人共享項(xiàng)目，這樣便可實(shí)時(shí)協(xié)同處理。 要試用 Code With Me，請從 Preferences / Settings | Plugins 安裝相應(yīng)的插件。

2、關(guān)于 WebStorm 基礎(chǔ)知識的內(nèi)置培訓(xùn)課程

為了幫助您熟悉 WebStorm 的關(guān)鍵功能，我們開發(fā)了一門交互式培訓(xùn)課程。 這門課程可以幫助您學(xué)習(xí)完成一些常見任務(wù)，例如重構(gòu)代碼或在項(xiàng)目中導(dǎo)航。 您可以在 Welcome 屏幕上的 Learn WebStorm 選項(xiàng)卡下，也可以從主菜單中轉(zhuǎn)到 Help | IDE Features Trainer 來找到此課程。

3、HTTP 客戶端的 cURL 轉(zhuǎn)換

現(xiàn)在，您可以通過在 HTTP 請求編輯器中按 Alt+Enter 并選擇 Convert to cURL and copy to clipboard 選項(xiàng)，將 HTTP 請求導(dǎo)出到 cURL。

4、更好的拼寫和語法檢查

現(xiàn)在，您可以更快地解決語法和拼寫問題 - 將鼠標(biāo)懸停在問題上，隨后會出現(xiàn)一個(gè)包含說明和建議修復(fù)方法的彈出窗口。 我們還添加了對更多語言的支持，并改進(jìn)了語法檢查的質(zhì)量。

【版本控制】

1、支持 Git 暫存區(qū)域

現(xiàn)在，您可以直接從 WebStorm 暫存文件！ 為此，請轉(zhuǎn)到 Preferences / Settings | Version Control | Git，然后選擇 Enable staging area 選項(xiàng)。 您可以從 Commit 工具窗口，從間距以及使用 Show Diff 功能暫存變更。

2、重新排列了 VCS 菜單

現(xiàn)在，主菜單下的 VCS 組根據(jù)您正在使用的版本控制系統(tǒng)命名。 我們還重新排列了主菜單中 Git 下的項(xiàng)目，以便您更輕松地訪問最常用的操作。

3、改進(jìn)了分支的使用

現(xiàn)在，WebStorm 會自動更正新分支名稱中未被接受的符號 此外，它還會顯示當(dāng)前可用于所選分支的所有操作，就像對待其他分支一樣。

【導(dǎo)航】

1、更有用的導(dǎo)航欄

導(dǎo)航欄可快速替代 Project 視圖，您可以利用它輕松瀏覽項(xiàng)目的結(jié)構(gòu)并打開特定文件。 在 v2020.3 中，我們還可以跳轉(zhuǎn)到 JavaScript 和 TypeScript 文件中的特定代碼元素。

2、快速文件預(yù)覽

您可以在 Project 視圖中選擇文件，最終在編輯器中預(yù)覽這些文件。 要開啟此功能，請點(diǎn)擊 Project 視圖中的齒輪圖標(biāo)，然后選擇 Enable Preview Tab 和 Open Files with Single Click。

3、更加強(qiáng)大的 Search Everywhere

現(xiàn)在，Shift+Shift 彈出窗口允許您執(zhí)行更多操作。 首先，您可以使用它執(zhí)行基本數(shù)學(xué)運(yùn)算 - 結(jié)果將立即顯示在彈出窗口中。 它還允許您查找 Git 數(shù)據(jù)，包括有關(guān)分支和提交的詳細(xì)信息。 除此之外，所有查找結(jié)果現(xiàn)在都基于它們與搜索查詢的相關(guān)性而不是其類型進(jìn)行分組。

設(shè)置方法

WebStorm的初始界面都為英文想必大家都知道，而這款2020.3版本與之前設(shè)置中文的方法是一樣的，為了便于不懂的朋友更好設(shè)置，下面為大家?guī)�來切換為中文顯示的方法，一起來看看吧：

1、入程序之后頁面是為英文，新版本可以直接點(diǎn)擊“Plugins”，在界面框中輸入“Chinese”回車搜索，可見會出現(xiàn)一個(gè)中文插件，點(diǎn)擊“Install”安裝插件；

2、在出現(xiàn)的彈框中選擇“Accept”；

3、等待插件成功下載后點(diǎn)擊右邊的“RESTART IDEA”；

4、在彈出的彈框中點(diǎn)擊“RESTART”；

5、然后軟件就會自動重啟，重新啟動之后打開就可以顯示中文語言了。

WebStorm 2020.3特別版使用說明

1、在本站下載解壓后可得已集成綠色特別的文件，雙擊打開“bin”文件夾；

2、在下面找到webstorm64.exe雙擊打開；

3、可見2020.3版本的新界面；

4、選擇“Evaluate for free”中的“Evaluate”；

5、然后就可以直接進(jìn)入軟件界面了。