WebStorm2020特別版介紹

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

WebStorm2020特別版特色

一、外觀

1、新的默認編輯器字體

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

2、零干擾編碼

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

3、顯示懸停文檔

您不必再顯式調用“ 文檔”彈出窗口。現在，當您將鼠標懸停在符號上時，它就會顯示出來，因此您可以更快地找到相關文檔。如果您的代碼有問題，則彈出窗口還將提供可用于解決該問題的快速修復。

4、使用IDE進行快速編輯

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

5、自定義狀態欄

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

二、構架

1、使用Composition API

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

2、Vuex的編碼協助

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

3、全面支持Angular 9

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

4、改進的React支持

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

三、JavaScript和TypeScript

1、新的智能意圖和檢查

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

2、更有用的快速文檔

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

3、重做的介紹字段重構的UI

通過更新的Introduce字段重構，您可以在正在使用的代碼的上下文中查看更改的預覽。另外，現在只需較少的點擊即可應用重構。

4、支持TypeScript 3.8功能

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

四、工具類

1、保存時運行更漂亮

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

2、并排顯示終端會話

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

3、捆綁式拼寫檢查器

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

4、更靈活的運行配置共享

有需要與您的項目一起工作的隊友嗎？與他們共享您的運行配置。WebStorm 2020.1賦予您更多的自由，因為您現在可以將運行配置存儲在您選擇的任何項目文件夾中。

5、在TypeScript項目中使用Yarn 2

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

五、版本控制

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

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

2、更改提交流程

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

WebStorm2020功能

一、智能編碼輔助

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

1、現代框架

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

2、智能編輯器

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

3、導航和搜索

WebStorm可幫助您更有效地處理代碼，并在處理大型項目時節省時間。只需單擊一下即可跳轉到方法，函數或變量定義，或搜索用法。

二、調試，跟蹤和測試

WebStorm提供了功能強大的內置工具，用于調試，測試和跟蹤客戶端和Node.js應用程序。只需最少的配置并與IDE進行周到的集成，使用WebStorm即可輕松完成這些任務。

1、調試

WebStorm 為您的客戶端代碼（可與Chrome一起使用）和Node.js應用程序提供內置的調試器。放置斷點，單步執行代碼并評估表達式-所有這些都無需離開IDE。

2、測試中

由于WebStorm與Karma測試運行程序，Mocha，Jest和Protractor集成在一起，因此輕松執行測試。直接在IDE內部運行和調試測試，以美觀和直觀的格式查看結果，并導航到測試代碼。

3、跟蹤和分析

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

三、無縫工具集成

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

1、構建工具

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

2、代碼質量工具

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

3、項目模板

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

四、IDE功能

WebStorm建立在開源IntelliJ平臺的基礎上，我們在JetBrains上已經開發和完善了15多年。享受它提供的微調但高度可定制的體驗，以適合您的開發工作流程。

1、VCS

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

2、當地歷史

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

WebStorm2020特別版亮點

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

該提取方法重構現在與當地的功能和使用解構的返回值，使得它非常適合提取自定義作出反應掛鉤。

此版本 JavaScript 與 TypeScript 的代碼自動補全功能得到改進，Vue.js 支持得到增強，并且支持了 20 多種語言語法高亮，還有更加智能的析構等。

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

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

在 JavaScript 或 TypeScript 文件中重命名符號時，IDE 現在將動態用法組合在一起，默認情況下將它們從重構中排除。這使得重構更加準確，并可以更好地控制在重構預覽工具窗口中應該重命名的內容。

現在 Vue 代碼自動補全功能更加精確，因為 IDE 采用了 Vuetify、BootstrapVue 與 Quasar 等 Vue 組件庫與工具。

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

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

WebStorm2020安裝特別教程

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

2、勾選安裝位數和進行適配設置，點擊next

3、根據提示繼續安裝，安裝完成，點擊finish退出向導

4、如圖所示，運行后如圖所示，進入激活界面，勾選Evaluate for free選項，點擊Evaluate

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

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

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

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

注意，如果你網絡不好其實可以選擇Activation code激活。壓縮包內有Activation code。

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

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

WebStorm2020使用教程

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

點擊“文件”→“設置”

找到并點擊“Colors & Fonts”打開“Editor”（編輯）

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

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

確定背景色后，找到并點擊“Save as”選項，隨意輸入你喜歡的名字。

修改字體大小

點擊并打開“Colors & Fonts”，找到“Font”

這時，查看窗口右側，找到你剛剛輸入的那個命名，在找到Size選項。

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

這是修改后的效果圖