WebStorm2022中文版

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

WebStorm2022中文版安裝教程

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

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

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

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

WebStorm2022新功能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

webstorm如何搭建vue項(xiàng)目？

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

2、紅色為新建的順序，綠色為node.js地址（裝好了會(huì)自動(dòng)尋找），藍(lán)色為vue.js包的地址，黃色為打包所用的打包模塊。

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

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

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

軟件優(yōu)勢(shì)

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

插件推薦

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

webstorm快捷鍵

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