WebStorm2022中文版

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

WebStorm2022中文版安裝教程

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

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

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

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

WebStorm2022新功能

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

2、保存時(shí)的操作
你喜歡在保存時(shí)執(zhí)行某些操作嗎？WebStorm 2021.2 現(xiàn)在正確 支持此工作流程！我們重新設(shè)計(jì)了所有現(xiàn)有功能，將其集中在一處，并通過一些新選項(xiàng)對其進(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 符號時(shí)添加缺少的導(dǎo)入語句嗎？它現(xiàn)在也可以對 CommonJS 模塊執(zhí)行相同的操作——可以在代碼完成時(shí)插入require導(dǎo)入。

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

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

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

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

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

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

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

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

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

6、自動(dòng)緩存和日志清理
每次重大更新后，WebStorm 都會(huì)清理所有上次更新時(shí)間超過180天的緩存和日志目錄。系統(tǒng)設(shè)置和插件目錄將保持不變。要手動(dòng)觸發(fā)此過程，請轉(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ū)础Ｈ缦聢D
點(diǎn)擊ok即可。
在編輯代碼頁面Ctrl+滾動(dòng)滑輪即可調(diào)整字體大小。

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

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

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

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

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

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

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

軟件優(yōu)勢

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

插件推薦

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

webstorm快捷鍵

1、Ctrl + Shift + n：打開工程中的文件，目的是打開當(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(){}語句塊的移動(dòng))
12、Ctrl + d：行復(fù)制
13、Ctrl + Shift + ]/[：選中塊代碼
14、Ctrl + /：單行注釋
15、Ctrl + Shift + /：塊注釋
16、Ctrl + Shift + i：顯示當(dāng)前CSS選擇器或者JS函數(shù)的詳細(xì)信息
17、Ctrl + '-/+'：可以折疊項(xiàng)目中的任何代碼塊，它不是選中折疊，而是自動(dòng)識別折疊。
18、Ctrl + '.'：折疊選中的代碼的代碼。