WebStorm2022中文版是一款極其專業(yè)的開發(fā)工具，不論是用于Web前端開發(fā)、作為HTML5編輯器、還是充當智能的JavaScript IDE都可以輕松勝任，強大的功能可滿足開發(fā)者的一切需求，從而輕松提高辦公效率。相較于之前的版本而言，新版的WebStorm2022進行了全面的優(yōu)化與新增。首先優(yōu)化了代碼編輯操作，之前我們使用時精彩不能進行實時編輯，而這次優(yōu)化支持編輯和保存后自動更新瀏覽器中的頁面，用戶可更快的創(chuàng)建臨時文件，十分的出色。其次增加了自動導(dǎo)入JavaScript和打字稿功能，告別了以往完成ES6符號時代碼錯誤問題，人性化的導(dǎo)入語句操作，為開發(fā)者提供了更出色的易用性。甚至最為一提的的當屬WebStorm2022優(yōu)化了整體的可用性，新增中文、韓文、日文等多種語言包，改良了工具窗口、為內(nèi)置終端添加了三項新功能，帶給了開發(fā)者們前所未有的體驗，歡迎感興趣的用戶自行下載體驗。

WebStorm2022中文版安裝教程

1、在本站解壓得到WebStorm2022中文版安裝包，安裝運行后默認為英文，選擇"Plugins"，直接快捷鍵“Ctrl+ALT+S”打開“Settings -> Plugins”進行設(shè)置；

2、選擇“marketplace”接著在輸入框中輸入“Chinese”后即可找到中文語言包點擊Install安裝；

3、下載完成后點擊“restart ide”——“restart”，之后重啟軟件；

4、這樣就可以得到中文版的WebStorm2022了，已經(jīng)可以免費使用了。

WebStorm2022新功能

一、代碼編輯
1、保存時重新加載頁面
您要求我們改進實時編輯功能， 我們做到了！WebStorm 現(xiàn)在可以在您編輯和保存 HTML、CSS 和 JavaScript 文件時自動更新瀏覽器中的頁面。首先，在編輯器中打開一個 HTML 文件，將鼠標懸停在它上面，然后單擊要使用的瀏覽器的圖標——所有瀏覽器都受支持。

2、保存時的操作
你喜歡在保存時執(zhí)行某些操作嗎？WebStorm 2021.2 現(xiàn)在正確 支持此工作流程！我們重新設(shè)計了所有現(xiàn)有功能，將其集中在一處，并通過一些新選項對其進行了增強，包括重新格式化代碼和優(yōu)化保存時導(dǎo)入的能力。

3、更快地創(chuàng)建臨時文件
想要在項目上下文之外處理一些代碼嗎？在編輯器中選擇它，然后按Alt+Enter并選擇 Create new scratch file from selection。這將創(chuàng)建一個帶有所需代碼的 臨時文件。
4、Code With Me 同步完成
當你是繼守則與我會話期間模式，你現(xiàn)在可以 保持的代碼完成建議的軌道，你下列用途的人。
二、JavaScript 和打字稿
1、自動導(dǎo)入 require
您知道 WebStorm 可以 在您完成 ES6 符號時添加缺少的導(dǎo)入語句嗎？它現(xiàn)在也可以對 CommonJS 模塊執(zhí)行相同的操作——可以在代碼完成時插入require導(dǎo)入。

2、支持 JSDoc 中的 TypeScript 類型
WebStorm 現(xiàn)在正確支持.js文件中JSDoc 注釋中使用的 TypeScript 語法。我們 重新設(shè)計并擴展了現(xiàn)有支持并修復(fù)了許多已知問題。

3、箭頭函數(shù)的新動作
需要快速向代碼中添加箭頭函數(shù)嗎？您現(xiàn)在可以使用 Ctrl+Alt+J. 您還可以鍵入arf并按 Tab展開模板并添加空箭頭功能。

4、調(diào)試時預(yù)覽選項卡
以前僅適用于項目視圖 的 預(yù)覽選項卡現(xiàn)在可以在您調(diào)試應(yīng)用程序時使用。要打開它，請轉(zhuǎn)到 首選項/設(shè)置 | 編輯 | 一般 | 編輯器選項卡 并勾選 啟用預(yù)覽選項卡復(fù)選框。這將幫助您 避免多個文件使編輯器混亂，因為 WebStorm 將在一個選項卡中連續(xù)打開文件。

三、框架和技術(shù)
1、React useState 鉤子的重命名重構(gòu)
您不再需要浪費時間 一一重構(gòu)useState值和函數(shù)——WebStorm 現(xiàn)在可以為您重命名兩者！將插入符號放在狀態(tài)值上，然后按 Shift+F6或 轉(zhuǎn)到Refactor | 從右鍵單擊上下文菜單中重命名。

2、完成私有 npm 包添加新的項目依賴項package.json變得更加容易，因為代碼完成現(xiàn)在適用于私有 npm 包。WebStorm 允許您檢查有關(guān)軟件包最新版本的信息，就像檢查公共軟件包一樣。

3、支持類名和 clsx 庫為了幫助您更高效地使用 React 項目中的 CSS 類，我們添加了對流行 類名 和 clsx 庫的支持。WebStorm 將顯示CSS 類的補全建議， 并使用文字名稱解析字符串文字和屬性中的所有符號。
4、對網(wǎng)絡(luò)類型的通用支持
我們擴展了對web-types 的支持 ，這是一種用于記錄 Web 框架的開源標準。它以前專注于 Vue 支持。但是現(xiàn)在您可以使用它來 豐富HTML 文件中自定義組件的編碼幫助。觀看 此網(wǎng)絡(luò)研討會錄像以了解更多信息。
四、版本控制
1、新的預(yù)提交檢查想要在提交之前運行測試來檢查您的代碼嗎？我們添加了一個新選項來幫助您執(zhí)行此操作。單擊Commit 工具窗口中的齒輪圖標，選擇Run Tests，然后選擇所需的運行配置。WebStorm 將測試您的文件并警告您任何問題。

2、GPG 簽名支持
您現(xiàn)在可以通過使用 GPG 密鑰對提交進行簽名來保護您的提交。您可以通過打開此功能配置GPG密鑰......在 首選項/設(shè)置| 版本控制 | 吉特。
3、本地歷史搜索
現(xiàn)在更容易 在本地歷史中進行修訂。右鍵單擊已更改的文件，然后轉(zhuǎn)到本地歷史記錄 | 顯示歷史記錄 并使用搜索字段瀏覽您的修訂。
五、可用性
1、本地化用戶界面
從這個版本開始，您可以享受中文、 韓文和 日文完全本地化的 WebStorm UI 。本地化可作為非捆綁語言包插件使用，可以從Preferences / Settings |安裝在 WebStorm 中。插件。

2、更快的工具窗口重組
現(xiàn)在可以更輕松地重新組織工具窗口。將鼠標懸停在您要移動的工具窗口的頂部，然后將其拖放到您想要的位置并將其放在 那里。如果您也想從 WebStorm 主窗口分離工具窗口，這將起作用 - 只需將其拖到 IDE 框架之外。

3、更輕松地自定義項目圖標
您知道可以為項目分配自定義圖標嗎？我們使這個過程更加簡單。在 WebStorm 的歡迎屏幕上右鍵單擊一個項目 ，然后選擇更改項目圖標...選項并上傳要與該項目關(guān)聯(lián)的 SVG 文件。

4、來自 Toolbox 應(yīng)用程序的更新通知
您將不再錯過Toolbox App 的任何重要產(chǎn)品更新 。WebStorm 會通知您是否有新版本可供下載，并為您提供升級選項——只需確保您擁有 Toolbox App 版本 1.20.8804 或更高版本。

5、改進的首選項/設(shè)置對話框
現(xiàn)在在您的 首選項/設(shè)置對話框中有一個帶有高級設(shè)置的節(jié)點。您可以在那里找到一些新的配置選項，包括在無干擾模式下設(shè)置左邊距的 功能。此外，您現(xiàn)在可以更快地在最近打開的節(jié)點之間跳轉(zhuǎn)-只需使用對話框右上角的箭頭即可。

6、自動緩存和日志清理
每次重大更新后，WebStorm 都會清理所有上次更新時間超過180天的緩存和日志目錄。系統(tǒng)設(shè)置和插件目錄將保持不變。要手動觸發(fā)此過程，請轉(zhuǎn)到幫助|在主菜單中 刪除剩余的IDE目錄...。
7、內(nèi)置終端的新功能
我們 為內(nèi)置終端添加了 三項新功能，以改善您的使用體驗。您現(xiàn)在可以 更改光標形狀并使?鍵充當元修飾符 - 在首選項/設(shè)置 | 中查找這些選項。 工具 | 終端。此外，現(xiàn)在使用 http鏈接更加方便。

webstorm怎么調(diào)整字體大小?

一、Ctrl+滾動滑輪調(diào)整字體大小
File--->Settings(Ctrl+Alt+s)--->Editor--->General--->Change font size(Zoom)……前面的方框打?qū)?。如下圖
點擊ok即可。
在編輯代碼頁面Ctrl+滾動滑輪即可調(diào)整字體大小。

二、通過改變size來調(diào)整字體大小
File--->Settings(Ctrl+Alt+s)--->Editor--->Font--->Size。如下圖：
點擊Apply適用字體大小是否合適，不合適在做調(diào)整，合適直接ok即可。如果此時代碼并沒有變大或者變小，新建一個html頁面，試著調(diào)整大小，就好了（我的就是這種情況）。

webstorm如何搭建vue項目？

1、重要的一點，想用WebStorm創(chuàng)建項目得安裝git。 安裝很簡單，官網(wǎng)找到下載安裝即可，否則可能出現(xiàn)安裝不了的情況。

2、紅色為新建的順序，綠色為node.js地址（裝好了會自動尋找），藍色為vue.js包的地址，黃色為打包所用的打包模塊。

3、填寫項目名，注意項目名中不能包含大寫字母。一直點下一步就可以了，項目結(jié)構(gòu)。

4、選中package.json 右鍵選擇 show npm scripts。

5、選擇dev雙擊 即可進行測試。開啟成功后會出現(xiàn)默認的端口，贊帖到瀏覽器中打開，出現(xiàn)下面頁面就是成功啦。這樣一個vue項目就創(chuàng)建成功了

軟件優(yōu)勢

一、智能編碼輔助
為您提供JavaScript和編譯到JavaScript語言，Node.js，HTML和CSS的智能編碼幫助。享受代碼完成，強大的導(dǎo)航功能，動態(tài)錯誤檢測以及所有這些語言的重構(gòu)。
1、現(xiàn)代框架
為Angular， React，Vue.js和Meteor提供高級編碼幫助。享受對React Native，PhoneGap，Cordova和Ionic的支持，用于移動開發(fā)，并在服務(wù)器端使用Node.js進行開發(fā)。一體化IDE！
2、智能編輯器
IDE會分析您的項目，以便為所有支持的語言提供最佳的代碼完成結(jié)果。當您鍵入并建議快速修復(fù)選項時，數(shù)以百計的內(nèi)置檢查會報告任何可能的問題。
3、導(dǎo)航和搜索
可幫助您更有效地繞過代碼，并在處理大型項目時節(jié)省時間。只需單擊一下即可跳轉(zhuǎn)到方法，函數(shù)或變量定義，或搜索用法。
二、調(diào)試，跟蹤和測試
提供了強大的內(nèi)置工具，用于調(diào)試，測試和跟蹤客戶端和Node.js應(yīng)用程序。通過最少的配置和周到的IDE集成，使用WebStorm可以更輕松地完成這些任務(wù)。
1、調(diào)試
為您的客戶端代碼（適用于Chrome）和Node.js應(yīng)用程序提供內(nèi)置調(diào)試器。放置斷點，逐步執(zhí)行代碼并計算表達式 - 所有這些都不需要離開IDE。
2、測試
由于WebStorm與Karma測試運行器，Mocha，Jest和Protractor集成，因此可以輕松執(zhí)行測試。在IDE內(nèi)部運行和調(diào)試測試，以漂亮可視的格式查看結(jié)果，并導(dǎo)航到測試代碼。
3、跟蹤和分析
具有spy-js，這是一種內(nèi)置工具，可幫助您跟蹤JavaScript代碼。探索文件如何與函數(shù)調(diào)用連接，并有效地識別任何可能的瓶頸。
三、無縫工具集成
與用于Web開發(fā)的流行命令行工具集成，無需使用命令行即可為您提供高效，簡化的開發(fā)體驗。
1、構(gòu)建工具
享受簡單的統(tǒng)一UI，直接從IDE 運行Grunt，Gulp或 npm任務(wù)。所有任務(wù)都列在特殊工具窗口中，因此只需雙擊任務(wù)名稱即可啟動它。
2、代碼質(zhì)量工具
除了數(shù)百WebStorm自己檢查的，它可以運行ESLint， JSCS，TSLint，Stylelint， JSHint或JSLint的對你的代碼，并突出顯示在飛行的任何問題，就在編輯器中。
3、項目模板
使用流行的項目模板（如Express 或Web入門套件）從歡迎屏幕啟動新項目，并通過與Yeoman的集成訪問更多項目生成器。
四、IDE功能
建立在開源IntelliJ平臺之上，我們JetBrains已經(jīng)開發(fā)和完善了超過15年。享受其提供的微調(diào)但高度可定制的體驗，以適應(yīng)您的開發(fā)工作流程。
1、VCS
提供了統(tǒng)一的UI，可與許多流行的版本控制系統(tǒng)配合使用，確保在git，GitHub，SVN，Mercurial和Perforce之間提供一致的用戶體驗。
2、當?shù)貧v史
無論您是否使用VCS，本地歷史記錄都可以成為真正的代碼保護程序。您可以隨時檢查特定文件或目錄的歷史記錄，并回滾到以前的任何版本。
3、定制
非常可定制。調(diào)整它以完全適合您的編碼風(fēng)格，從快捷方式，字體和視覺主題到工具窗口和編輯器布局。

插件推薦

1、ideaVim
此插件可以讓 webstorm 編輯器支持 vim。
2、.ignore
可以支持 .gitignore 的語法規(guī)則，并提供了一些自動將文件加入 .gitignore 中的功能。
3、eslint
語法檢查的插件
4、AceJump
用于光標的快速定位與跳轉(zhuǎn)，默認的快捷鍵是ctrl + ;，按快捷鍵之后，再按下自己想要將光標跳轉(zhuǎn)到的目標的字母，這時會出現(xiàn)很多A,B,C,D,E… 的序號，按下相應(yīng)的字母即可跳轉(zhuǎn)到相應(yīng)的地方。（區(qū)分大小寫）
點多次的話，好像對應(yīng)不同的用法，待我再研究研究。。。。
5、Key Promoter
鼠標完成某項操作時，會提示相應(yīng)的快捷鍵。
6、Markdown
支持 markdown 語法
7、AngularJS
支持 angularjs 的語法提示
8、activate-power-mode
atom 上的神器啊，抱著試一試的心態(tài)一搜，webstorm 上居然也有了，安裝之后可以在 window -> activate-power-mode 中關(guān)閉震動以及開啟彩色模式。
9、Material Theme UI
主題類的插件，可以改改界面顏色呀，文件圖標啥的，至少比默認的稍微強那么點。
10、CodeGlance
這也是強烈推薦的，用過 sublime 的同學(xué)會知道右側(cè)有一個當前文件中代碼的縮略圖，這個插件可以讓 webstorm 也具有此功能。

webstorm快捷鍵

1、Ctrl + Shift + n：打開工程中的文件，目的是打開當前工程下任意目錄的文件。
2、Ctrl + j：輸出模板
3、Ctrl + b：跳到變量申明處
4、Ctrl + Alt + T：圍繞包裹代碼(包括zencoding的Wrap with Abbreviation)
5、Ctrl + []：匹配 {}[]
6、Ctrl + F12：可以顯示當前文件的結(jié)構(gòu)
7、Ctrl + x：剪切(刪除)行，不選中，直接剪切整個行，如果選中部分內(nèi)容則剪切選中的內(nèi)容
8、Alt + left/right：標簽切換
9、Ctrl + r：替換
10、Ctrl + Shift + up：行移動
11、Shift + Alt + up：塊移動(if(){},while(){}語句塊的移動)
12、Ctrl + d：行復(fù)制
13、Ctrl + Shift + ]/[：選中塊代碼
14、Ctrl + /：單行注釋
15、Ctrl + Shift + /：塊注釋
16、Ctrl + Shift + i：顯示當前CSS選擇器或者JS函數(shù)的詳細信息
17、Ctrl + '-/+'：可以折疊項目中的任何代碼塊，它不是選中折疊，而是自動識別折疊。
18、Ctrl + '.'：折疊選中的代碼的代碼。