WebStorm2020特別版介紹

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

WebStorm2020特別版特色

一、外觀

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

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

2、零干擾編碼

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

3、顯示懸停文檔

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

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

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

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

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

二、構(gòu)架

1、使用Composition API

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

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

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

3、全面支持Angular 9

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

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

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

三、JavaScript和TypeScript

1、新的智能意圖和檢查

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

2、更有用的快速文檔

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

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

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

4、支持TypeScript 3.8功能

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

四、工具類

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

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

2、并排顯示終端會(huì)話

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

3、捆綁式拼寫檢查器

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

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

有需要與您的項(xiàng)目一起工作的隊(duì)友嗎？與他們共享您的運(yùn)行配置。WebStorm 2020.1賦予您更多的自由，因?yàn)槟�現(xiàn)在可以將運(yùn)行配置存儲(chǔ)在您選擇的任何項(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)時(shí)，所有符號(hào)都可以正確解析，并且可以在TypeScript項(xiàng)目中自動(dòng)完成。

五、版本控制

1、重做對(duì)話框以重新提交

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

2、更改提交流程

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

WebStorm2020功能

一、智能編碼輔助

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

1、現(xiàn)代框架

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

2、智能編輯器

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

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

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

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

WebStorm提供了功能強(qiáng)大的內(nèi)置工具，用于調(diào)試，測(cè)試和跟蹤客戶端和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í)行代碼并評(píng)估表達(dá)式-所有這些都無(wú)需離開IDE。

2、測(cè)試中

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

3、跟蹤和分析

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

三、無(wú)縫工具集成

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

1、構(gòu)建工具

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

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

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

3、項(xiàng)目模板

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

四、IDE功能

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

1、VCS

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

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

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

WebStorm2020特別版亮點(diǎn)

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

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

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

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

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

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

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

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

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

WebStorm2020安裝特別教程

1、在本站下載并解壓，如圖所示，首先我們來(lái)安裝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試用已過(guò)期可以使用reset_eval文件夾內(nèi)的腳本重置一下。）

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

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

6、以下界面中，我們?cè)诩せ罘绞街羞x擇License server 激活，地址填入：https://fls.jetbrains-agent.com  可以聯(lián)網(wǎng)激活。小編測(cè)試其實(shí)這個(gè)地址都沒輸入，直接激活了

注意，如果你網(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、完成后，再次啟動(dòng)即可

WebStorm2020使用教程

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

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

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

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

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

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

修改字體大小

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

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

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

這是修改后的效果圖