WebStorm(JS開(kāi)發(fā)工具)

WebStorm官方版是一款由JetBrains開(kāi)發(fā)的專業(yè)的IDE（集成開(kāi)發(fā)環(huán)境），主要用于Web和前端開(kāi)發(fā)。它提供了豐富的功能和工具，幫助開(kāi)發(fā)人員提升工作效率和代碼質(zhì)量。WebStorm支持多種流行的前端技術(shù)，如HTML、CSS、JavaScript、TypeScript和框架如React、Angular和Vue.js等。它具有智能代碼補(bǔ)全、語(yǔ)法檢查、調(diào)試工具、版本控制集成等功能，可以幫助開(kāi)發(fā)人員快速編寫(xiě)、調(diào)試和部署網(wǎng)頁(yè)和Web應(yīng)用程序。此外，WebStorm官方版還提供了強(qiáng)大的代碼導(dǎo)航和重構(gòu)工具，使開(kāi)發(fā)人員能夠輕松地管理大型項(xiàng)目?？傊琖ebStorm是一個(gè)強(qiáng)大且易于使用的工具，適用于任何規(guī)模的Web開(kāi)發(fā)項(xiàng)目。開(kāi)發(fā)人員一定不能錯(cuò)過(guò)了，快來(lái)下載體驗(yàn)吧！

WebStorm新功能

1、Java、Type 和 CSS：

改進(jìn)了 Java 和 Type 的錯(cuò)誤格式、快速修復(fù)和實(shí)時(shí)模板的自動(dòng)導(dǎo)入、CSS 嵌套支持、將顏色轉(zhuǎn)換為 lch 和 oklch 等。

2、框架和技術(shù)：

Vue 語(yǔ)言服務(wù)器支持以及對(duì)提供/注入和定義模型的支持、對(duì) Next.js 中 App Router 的更好支持、React hooks 的新實(shí)時(shí)模板、SolidJS 和 Preact 改進(jìn)等。

3、新 UI：

改進(jìn)了主工具欄自定義、彩色項(xiàng)目標(biāo)題、帶有淺色標(biāo)題的淺色主題、重新設(shè)計(jì)的漢堡菜單等。

4、集成開(kāi)發(fā)工具：

AI Assistant 預(yù)覽、GitLab 集成、提交特定代碼行的選項(xiàng)、Docker 改進(jìn)、HTTP 客戶端改進(jìn)等。

5、用戶體驗(yàn)：

“Search Everywhere”中的文本搜索、“項(xiàng)目”視圖中按修改時(shí)間對(duì)文件進(jìn)行排序、“設(shè)置”中的建議插件等等。

6、插件開(kāi)發(fā)：

為插件開(kāi)發(fā)人員提供 LSP 支持。

WebStorm官方版使用教程

一、【webstorm怎么運(yùn)行代碼？】

1、在WebStorm中打開(kāi)需要運(yùn)行的工程；

2、在需要運(yùn)行的文件上，右鍵單擊；

3、在彈出的菜單中，點(diǎn)擊“Run ‘readwords.js’”；

4、點(diǎn)擊后，結(jié)果如下：

5、在WebStorm中查看函數(shù)的源代碼/詳細(xì)信息的方法：ctrl+shift+i。

二、【webstorm怎么改字體大小】

1、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)整字體大小。

2、通過(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怎么創(chuàng)建項(xiàng)目？】

1、打開(kāi)WebStorm-->File-->Project；

2、出現(xiàn)new project彈出框；

3、選擇HTML5 Boilerpalte(選擇HTML5 樣板)；

4、修改對(duì)應(yīng)的名字和Version，我輸入h5_test01,version 6.0.0；

5、點(diǎn)擊Create后，WebStorm將會(huì)創(chuàng)建一個(gè)h5_test01H5項(xiàng)目。

軟件特色

1、專門(mén)針對(duì) JavaScript 打造

是否在為 JavaScript 開(kāi)發(fā)中最棘手的部分尋找值得信賴的工具？10 多年來(lái)，我們一直在優(yōu)化，使編碼體驗(yàn)更加有趣。無(wú)論您是使用 JS、TS、React、Vue、Angular、Node.js、HTML 還是各種樣式表，WebStorm 都能滿足您的需求。

2、最智能的編輯器

深刻理解您的項(xiàng)目結(jié)構(gòu)，并且可以在編寫(xiě)代碼的各個(gè)方面為您提供幫助。 它將自動(dòng)補(bǔ)全代碼、檢測(cè)錯(cuò)誤和冗余并提供修復(fù)建議，以及幫助您安全地重構(gòu)代碼。

3、內(nèi)建開(kāi)發(fā)者工具

在 IDE 中工作的好處之一是在一個(gè)地方獲得所有必要工具。使用調(diào)試和測(cè)試您的客戶端和 Node.js 應(yīng)用，并利用版本控制。充分使用 linter、構(gòu)建工具、終端和 HTTP 客戶端，這些均已經(jīng)與 IDE 集成。

4、快速導(dǎo)航和搜索

無(wú)論您的項(xiàng)目有多大，都可以更快地瀏覽代碼。查找文件、類或符號(hào)，并在一個(gè)地方查看所有匹配條目。只需點(diǎn)擊幾次，即可跳到任何函數(shù)、方法、變量、組件或類的定義，并找到其用法。

5、高效的團(tuán)隊(duì)合作

由于所有關(guān)鍵功能均預(yù)打包，您可以更快速地對(duì)新團(tuán)隊(duì)成員進(jìn)行入職培訓(xùn)。實(shí)時(shí)合作編碼，并直接在 IDE 中與他人交流。共享您的項(xiàng)目配置，包括代碼樣式設(shè)置，并高效使用 Git 和 GitHub。

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 + / : 單行注釋

15、ctrl + shift + / : 塊注釋

16、ctrl + shift + i : 顯示當(dāng)前CSS選擇器或者JS函數(shù)的詳細(xì)信息

17、ctrl + '-/+': 可以折疊項(xiàng)目中的任何代碼塊，它不是選中折疊，而是自動(dòng)識(shí)別折疊

18、ctrl + '.': 折疊選中的代碼的代碼

19、shift + esc: 當(dāng)前激活的任意小窗口最小化，也可以是alt+數(shù)字鍵，數(shù)字在小窗口有顯示

20、alt + '7': 顯示當(dāng)前的函數(shù)結(jié)構(gòu)

21、如果是*.html頁(yè)面，則在文件名下的導(dǎo)航欄某DOM結(jié)構(gòu)上右鍵，可以全選當(dāng)前DOM結(jié)構(gòu)

更新日志

v2024.3.1.1版本

此版本解決了多個(gè)持續(xù)存在的問(wèn)題并改進(jìn)了先前引入的功能。

主要改進(jìn)包括增強(qiáng)的框架組件導(dǎo)航和重命名、內(nèi)置數(shù)據(jù)庫(kù)工具和 SQL 支持，以及更出色的 AI 驅(qū)動(dòng)代碼補(bǔ)全。