WEBSTORM：TypeScript 改進(jìn)，更多運(yùn)行和調(diào)試場(chǎng)景，雙控制臺(tái)，更多 Git 改進(jìn)

WEBSTORM最新版，震撼來(lái)襲

WebStorm 2018.1新增了與漂亮，部分Git提交的集成，對(duì)Vue.js和React Native的更好支持以及完全重新設(shè)計(jì)的文檔。

JavaScript & TypeScript

新的文檔UI

滿足新的，更緊湊和輕便的文檔彈出窗口！

它使用更清晰和一致的格式來(lái)呈現(xiàn)JavaScript和TypeScript中關(guān)于方法參數(shù)，類型和返回類型的可用信息。 它還使用JSDoc評(píng)論中的Markdown。

TypeScript 改進(jìn)

除了支持最新的TypeScript 2.7功能之外，此更新還改進(jìn)了實(shí)施成員操作，并為未解決的屬性添加了帶有類型保護(hù)快速修復(fù)的新環(huán)繞聲。

WebStorm現(xiàn)在還可識(shí)別除tsconfig.json以外的其他名稱的TypeScript配置文件。

一起重命名類和文件

現(xiàn)在，如果您為一個(gè)類運(yùn)行重構(gòu) - 重命名，WebStorm還會(huì)建議重命名文件及其用法，如果它與該類具有相同的名稱。

如果您按下類別，界面或類型的名稱上的Alt-Enter，您將看到一個(gè)新的意圖，建議將文件重命名為該名稱。

代碼樣式

用Prettier重新格式化

有了新的用 Prettier重新格式化的操作 (Alt-Shift-Cmd/Ctrl-P), 您可以使用Prettier把選中的代碼，文件或整個(gè)目錄格式化。

要注意的是，應(yīng)將Prettier作為您的項(xiàng)目依賴項(xiàng)或全局安裝在您的計(jì)算機(jī)上。

架構(gòu)

創(chuàng)建新的 Vue 項(xiàng)目

你現(xiàn)在可以在WebStorm用Vue CLI創(chuàng)建新的 Vue項(xiàng)目

運(yùn)行npm install -g vue-cli即可安裝，然后在 IDE的歡迎屏幕上點(diǎn)擊“創(chuàng)建新項(xiàng)目 – Vue.js”，回答你想在新項(xiàng)目中使用的模板和工具的問(wèn)題。

提取Vue組件

從已有的Vue組件中創(chuàng)建一個(gè)新的Vue組件,，不需復(fù)制或粘貼 – 選擇模板的這部分使用 Refactor – Extract或 按住 Alt-Enter選擇Extract Vue 組件。

WebStorm將創(chuàng)建一個(gè)新的單文件組件，為其添加一個(gè)導(dǎo)入，并將所有數(shù)據(jù)和方法與道具一起傳遞給它。

工具

調(diào)試 React Native app

通過(guò)更新的React Native配置，WebStorm現(xiàn)在支持更多的運(yùn)行和調(diào)試場(chǎng)景：您現(xiàn)在可以單獨(dú)配置bundler的啟動(dòng)方式，并將調(diào)試器附加到已經(jīng)在設(shè)備上構(gòu)建并啟動(dòng)的應(yīng)用程序。

此外，您現(xiàn)在可以在IDE中調(diào)試使用Exporight的應(yīng)用程序。

配置包管理器

在WebStorm中配置包管理器變得更加容易 - 在Node.js和npmpreferences中，您可以在npm和Yarn之間進(jìn)行選擇，然后使用它來(lái)安裝依賴關(guān)系并運(yùn)行腳本。

如果你用yarn.lock文件打開一個(gè)新項(xiàng)目，如果安裝了WebStorm，它將使用Yarn。

新的Node.js調(diào)試器控制臺(tái)

Node.js調(diào)試器現(xiàn)在有兩個(gè)控制臺(tái)選項(xiàng)卡 - 控制臺(tái)選項(xiàng)卡，它顯示節(jié)點(diǎn)進(jìn)程本身的輸出以及可執(zhí)行JavaScript的新調(diào)試器控制臺(tái)，請(qǐng)參閱console.log消息，然后跳轉(zhuǎn)到console.log所在的位置調(diào)用。

版本控制

部分在Git中提交

通過(guò)對(duì)部分Git提交的支持，您現(xiàn)在可以僅提交文件中的選定更改。 使用Commit Changesdialog的差異視圖中的復(fù)選框選擇要提交的代碼塊。

您還可以使用編輯器裝訂線上的操作將更改的代碼行添加到新的更改列表中，然后提交更改列表。

更多 Git 改進(jìn)

在提交細(xì)節(jié)中，您現(xiàn)在可以單擊提交哈希來(lái)跳轉(zhuǎn)到日志中的提交。

當(dāng)你進(jìn)行rebase時(shí)，現(xiàn)在有新的Abort Rebase，Continue Rebase和Skip Committions在Git Branches彈出窗口中可用。

樣式表

完成并進(jìn)入類的定義

Cmd / Ctrl-單擊HTML中的類名現(xiàn)在將建議不僅導(dǎo)航到此HTML文件中鏈接的已編譯CSS文件中的聲明，而且還導(dǎo)航到Sass，SCSS或Less源。

在HTML中，如果鏈接的CSS文件中沒有匹配的符號(hào)，則代碼完成將建議所有樣式表中的類和id。

其他改進(jìn):

• 如果您正在遷移到webpack      4，WebStorm現(xiàn)在可以檢查并提供webpack配置文件中選項(xiàng)名稱的完成。

• 與測(cè)試類似，您現(xiàn)在可以在編輯器中使用圖標(biāo)直接運(yùn)行npm腳本。

• 將HTML代碼復(fù)制到JSX文件時(shí)，WebStorm將自動(dòng)使用React特定的屬性替換類和事件處理程序。

• package.json中的新檢查會(huì)在您安裝的軟件包版本與指定范圍不匹配時(shí)發(fā)出警告。

• 更好地完成SVG屬性和CSS文件中的值。

• 您現(xiàn)在可以使用JetBrains帳戶在多臺(tái)機(jī)器上同步IDE設(shè)置。

• 支持ECMAScript提議：模板字符串中的轉(zhuǎn)義序列，RegExp      lookbehind斷言和命名捕獲的組以及類字段。

• 改進(jìn)了代碼完成，并使用import（）定義動(dòng)態(tài)導(dǎo)入。