WebStorm2020特別版介紹

WebStorm2020是jetbrains公司旗下一款JavaScript 開發(fā)工具，擁有便捷智能的操作界面，豐富強(qiáng)大的工具欄，為開發(fā)者們提供高級的編碼幫助，助程序員可以輕松的完成代碼編輯。

WebStorm2020特別版特色

一、外觀

1、新的默認(rèn)編輯器字體

在過去的一年中，我們一直在開發(fā)一種字體，該字體可以使您更舒適地編碼，而不會過多地疲勞您的眼睛。請歡迎JetBrains Mono，這是一種專門為編碼而設(shè)計的新開源字體！WebStorm 2020.1隨附此默認(rèn)選擇的新字體。

2、零干擾編碼

我們添加了新的Zen 查看模式，以幫助您完全專注于代碼。每當(dāng)您要在全屏編輯器中工作（源代碼居中且隱藏UI元素以最大程度地減少干擾）時，都可以使用它。

3、顯示懸停文檔

您不必再顯式調(diào)用“ 文檔”彈出窗口�，F(xiàn)在，當(dāng)您將鼠標(biāo)懸停在符號上時，它就會顯示出來，因此您可以更快地找到相關(guān)文檔。如果您的代碼有問題，則彈出窗口還將提供可用于解決該問題的快速修復(fù)。

4、使用IDE進(jìn)行快速編輯

是否曾經(jīng)想使用IDE來快速編輯文件？使用新的LightEdit 模式，您可以在文本編輯器窗口中打開單個文件，而不必加載整個項(xiàng)目。

5、自定義狀態(tài)欄

如果您沒有隱藏狀態(tài)欄并經(jīng)常使用它，則現(xiàn)在可以決定要在其上看到的內(nèi)容。右鍵單擊狀態(tài)欄，然后刪除不需要的元素。

二、構(gòu)架

1、使用Composition API

在WebStorm 2020.1中，您將找到對使用Vue 3中的Composition API定義的組件的支持。在組件的模板部分，IDE將正確解析和自動完成從setup()組件功能返回的符號，包括反應(yīng)式中的屬性。狀態(tài)，計算的屬性和參考。

2、Vuex的編碼協(xié)助

如果您正在使用Vuex庫，則現(xiàn)在在編輯Vue組件時會從Vuex存儲中獲得符號的完成建議。另外，WebStorm將使您跳到吸氣劑，突變和動作的定義。

3、全面支持Angular 9

為了幫助您使用Ivy和其他Angular 9功能，我們在WebStorm 2020.1中添加了對它們的完全支持。您無需配置即可在TypeScript和模板文件中使用代碼完成和自動導(dǎo)入等功能。

4、改進(jìn)的React支持

通過將插入符號放在組件上并按，可以為定義的組件 添加導(dǎo)入語句。而且，如果您在項(xiàng)目中使用Material-UI組件，那么現(xiàn)在在創(chuàng)建樣式時會看到完成建議。 React.memoAlt+Enter

三、JavaScript和TypeScript

1、新的智能意圖和檢查

使用新的智能意圖和檢查（Alt+Enter）可以節(jié)省編碼時的時間！例如，快速將現(xiàn)有代碼轉(zhuǎn)換為可選的鏈接和/或無效合并（最新版本的JavaScript和TypeScript中引入的語法）。

2、更有用的快速文檔

對于JavaScript和TypeScript，“ 文檔”彈出窗口現(xiàn)在顯示更多有用的信息，包括有關(guān)符號類型和可見性以及該符號定義位置的詳細(xì)信息。

3、重做的介紹字段重構(gòu)的UI

通過更新的Introduce字段重構(gòu)，您可以在正在使用的代碼的上下文中查看更改的預(yù)覽。另外，現(xiàn)在只需較少的點(diǎn)擊即可應(yīng)用重構(gòu)。

4、支持TypeScript 3.8功能

WebStorm 2020.1捆綁了TypeScript 3.8，并引入了對TypeScript 3.8新功能的完全支持，例如僅類型導(dǎo)入/導(dǎo)出，私有字段和頂級await。

四、工具類

1、保存時運(yùn)行更漂亮

使用新的“在文件上保存時運(yùn)行”選項(xiàng)，WebStorm將在您保存 IDE設(shè)置時將Prettier格式應(yīng)用于在IDE設(shè)置中指定并在項(xiàng)目中編輯的所有文件。不再需要文件監(jiān)視程序或第三方插件。

2、并排顯示終端會話

為了簡化使用內(nèi)置終端仿真器的工作，WebStorm現(xiàn)在允許您 垂直和水平拆分終端會話。密切關(guān)注當(dāng)前使用的幾種工具的輸出，而無需在選項(xiàng)卡之間切換。

3、捆綁式拼寫檢查器

從v2020.1開始，WebStorm將與Grazie（我們的智能拼寫，語法和樣式檢查工具）捆綁在一起。這應(yīng)該有助于您避免在添加注釋，提交消息和JavaScript語言構(gòu)造時出現(xiàn)語法錯誤。

4、更靈活的運(yùn)行配置共享

有需要與您的項(xiàng)目一起工作的隊(duì)友嗎？與他們共享您的運(yùn)行配置。WebStorm 2020.1賦予您更多的自由，因?yàn)槟�現(xiàn)在可以將運(yùn)行配置存儲在您選擇的任何項(xiàng)目文件夾中。

5、在TypeScript項(xiàng)目中使用Yarn 2

我們已經(jīng)擴(kuò)展了最初的Yarn 2支持，該支持在WebStorm 2019.3中引入。現(xiàn)在，當(dāng)使用Yarn 2和Plug'n'Play模式安裝依賴項(xiàng)時，所有符號都可以正確解析，并且可以在TypeScript項(xiàng)目中自動完成。

五、版本控制

1、重做對話框以重新提交

是否想使提交歷史更加線性和可理解？多虧了更新的，更具交互性的“ 重新設(shè)置基準(zhǔn)”對話框，這變得更加容易。它顯示可以應(yīng)用于每個提交的操作，并允許您查看提交詳細(xì)信息和差異以及快速重置已應(yīng)用的更改。

2、更改提交流程

為了簡化提交流程，我們開發(fā)了一個新的“ 提交”工具窗口來處理所有與提交相關(guān)的任務(wù)。默認(rèn)情況下，所有新用戶都啟用該功能。如果您是現(xiàn)有用戶，并且想放手一搏，請從“本地更改”中選擇“ 提交”，而不在“首選項(xiàng)/設(shè)置” |“設(shè)置”中顯示對話框。版本控制| 提交對話框。

WebStorm2020功能

一、智能編碼輔助

WebStorm為您提供了針對JavaScript和JavaScript編譯語言，Node.js，HTML和CSS的智能編碼幫助。享受代碼完成，強(qiáng)大的導(dǎo)航功能，即時錯誤檢測以及所有這些語言的重構(gòu)。

1、現(xiàn)代框架

WebStorm為Angular， React，Vue.js和Meteor提供高級編碼幫助。享受對React Native，PhoneGap，Cordova和Ionic的支持，以進(jìn)行移動開發(fā)以及使用Node.js在服務(wù)器端進(jìn)行開發(fā)。多合一的IDE！

2、智能編輯器

IDE將分析您的項(xiàng)目， 以為所有受支持的語言提供最佳的代碼完成結(jié)果。數(shù)以百計的內(nèi)置檢查會在您鍵入內(nèi)容時報告任何可能的問題，并提出快速修復(fù)選項(xiàng)。

3、導(dǎo)航和搜索

WebStorm可幫助您更有效地處理代碼，并在處理大型項(xiàng)目時節(jié)省時間。只需單擊一下即可跳轉(zhuǎn)到方法，函數(shù)或變量定義，或搜索用法。

二、調(diào)試，跟蹤和測試

WebStorm提供了功能強(qiáng)大的內(nèi)置工具，用于調(diào)試，測試和跟蹤客戶端和Node.js應(yīng)用程序。只需最少的配置并與IDE進(jìn)行周到的集成，使用WebStorm即可輕松完成這些任務(wù)。

1、調(diào)試

WebStorm 為您的客戶端代碼（可與Chrome一起使用）和Node.js應(yīng)用程序提供內(nèi)置的調(diào)試器。放置斷點(diǎn)，單步執(zhí)行代碼并評估表達(dá)式-所有這些都無需離開IDE。

2、測試中

由于WebStorm與Karma測試運(yùn)行程序，Mocha，Jest和Protractor集成在一起，因此輕松執(zhí)行測試。直接在IDE內(nèi)部運(yùn)行和調(diào)試測試，以美觀和直觀的格式查看結(jié)果，并導(dǎo)航到測試代碼。

3、跟蹤和分析

WebStorm具有spy-js，這是一個內(nèi)置工具，可幫助您跟蹤JavaScript代碼。探索文件如何與函數(shù)調(diào)用連接，并有效地識別任何可能的瓶頸。

三、無縫工具集成

WebStorm與流行的命令行工具集成在一起，用于Web開發(fā)，無需使用命令行即可為您提供高效，簡化的開發(fā)體驗(yàn)。

1、構(gòu)建工具

享受一個簡單的統(tǒng)一UI，可以從IDE直接運(yùn)行Grunt， Gulp或 npm任務(wù)。所有任務(wù)都在一個特殊的工具窗口中列出，因此只需雙擊任務(wù)名稱即可啟動它。

2、代碼質(zhì)量工具

除了數(shù)百WebStorm自己檢查的，它可以運(yùn)行 ESLint， JSCS，TSLint，Stylelint， JSHint或JSLint的對你的代碼，并突出顯示在飛行的任何問題，就在編輯器中。

3、項(xiàng)目模板

使用流行的項(xiàng)目模板（如Express 或Web入門工具包），從“歡迎”屏幕開始新項(xiàng)目， 由于與Yeoman集成，因此可以訪問更多項(xiàng)目生成器。

四、IDE功能

WebStorm建立在開源IntelliJ平臺的基礎(chǔ)上，我們在JetBrains上已經(jīng)開發(fā)和完善了15多年。享受它提供的微調(diào)但高度可定制的體驗(yàn)，以適合您的開發(fā)工作流程。

1、VCS

WebStorm提供了一個統(tǒng)一的UI，可與許多流行的版本控制系統(tǒng)一起使用，從而確保git，GitHub，SVN，Mercurial和Perforce的用戶體驗(yàn)一致。

2、當(dāng)?shù)貧v史

無論您是否使用VCS，本地歷史記錄都可以成為真正的代碼保護(hù)程序。您可以隨時檢查特定文件或目錄的歷史記錄，并回滾到其任何以前的版本。

WebStorm2020特別版亮點(diǎn)

gitignore 文件中也為文件和文件夾名稱提供了補(bǔ)全建議。

該提取方法重構(gòu)現(xiàn)在與當(dāng)?shù)氐墓δ芎褪褂媒鈽?gòu)的返回值，使得它非常適合提取自定義作出反應(yīng)掛鉤。

此版本 JavaScript 與 TypeScript 的代碼自動補(bǔ)全功能得到改進(jìn)，Vue.js 支持得到增強(qiáng)，并且支持了 20 多種語言語法高亮，還有更加智能的析構(gòu)等。

JavaScript 與 TypeScript 自動補(bǔ)全代碼的彈出窗口現(xiàn)在有更加精致的外觀，補(bǔ)全建議的顯示變得更加清晰和一致，更容易查看到補(bǔ)全對象的定義位置以及它是否是標(biāo)準(zhǔn)語言 API 的一部分。此外，對于具有多個定義的內(nèi)容，現(xiàn)在還有一個新圖標(biāo)。

新的 Propagate to destruct intent（Alt-Enter），在可能再次進(jìn)行析構(gòu)的情況下可以替換額外的變量。IDE 現(xiàn)在會提示條件中的布爾表達(dá)式是否有一些不必要的部分，并建議簡化它。

在 JavaScript 或 TypeScript 文件中重命名符號時，IDE 現(xiàn)在將動態(tài)用法組合在一起，默認(rèn)情況下將它們從重構(gòu)中排除。這使得重構(gòu)更加準(zhǔn)確，并可以更好地控制在重構(gòu)預(yù)覽工具窗口中應(yīng)該重命名的內(nèi)容。

現(xiàn)在 Vue 代碼自動補(bǔ)全功能更加精確，因?yàn)?IDE 采用了 Vuetify、BootstrapVue 與 Quasar 等 Vue 組件庫與工具。

支持 20 多種語法高亮，比如 PHP 與 Python，無需額外配置，能力主要來自于 IDE 集成的 TextMate 語法文件集。

WebStorm 支持 shell 腳本，.sh 和 .bash 文件支持代碼自動補(bǔ)全，可以使用新的運(yùn)行配置，并且 IDE 集成 ShellCheck 用于 linting、集成 shfmt 以格式化代碼。

WebStorm2020安裝特別教程

1、在本站下載并解壓，如圖所示，首先我們來安裝WebStorm 2020.1 ，如圖所示，選擇你的安裝位置

2、勾選安裝位數(shù)和進(jìn)行適配設(shè)置，點(diǎn)擊next

3、根據(jù)提示繼續(xù)安裝，安裝完成，點(diǎn)擊finish退出向?qū)?/p>

4、如圖所示，運(yùn)行后如圖所示，進(jìn)入激活界面，勾選Evaluate for free選項(xiàng)，點(diǎn)擊Evaluate

（如果你的IDE試用已過期可以使用reset_eval文件夾內(nèi)的腳本重置一下。）

5、如圖所示，這時候我們打開特別文件夾，在以下位置中將jetbrains-agent.jar 拖進(jìn)IDE窗口（或者當(dāng)作IDE插件安裝），點(diǎn) "Restart" 按鈕重啟IDE。

（事實(shí)上你直接將jetbrains-agent-latest.zip拖放到IDE窗口也沒問題）

6、以下界面中，我們在激活方式中選擇License server 激活，地址填入：https://fls.jetbrains-agent.com  可以聯(lián)網(wǎng)激活。小編測試其實(shí)這個地址都沒輸入，直接激活了

注意，如果你網(wǎng)絡(luò)不好其實(shí)可以選擇Activation code激活。壓縮包內(nèi)有Activation code。

7、我們將resources_zh_CN_IntelliJIDEA_2020.1.jar漢化文件放到安裝目錄的lib目錄內(nèi)，默認(rèn)路徑：C:\Program Files\JetBrains\WebStorm 2020.1\lib，如圖所示：

8、完成后，再次啟動即可

WebStorm2020使用教程

默認(rèn)的WebStorm的背景色是純白色，這種顏色更容易讓你引起眼部疲勞。

點(diǎn)擊“文件”→“設(shè)置”

找到并點(diǎn)擊“Colors & Fonts”打開“Editor”（編輯）

打開“編輯”后，找到“HTML”

這時，查看右側(cè)，找到如下圖的選框，選擇你所喜歡的背景色。

確定背景色后，找到并點(diǎn)擊“Save as”選項(xiàng)，隨意輸入你喜歡的名字。

修改字體大小

點(diǎn)擊并打開“Colors & Fonts”，找到“Font”

這時，查看窗口右側(cè)，找到你剛剛輸入的那個命名，在找到Size選項(xiàng)。

直接在Size后的窗口中輸入數(shù)字即可，我用的是20。大家根據(jù)喜好修改就可以了。

這是修改后的效果圖