WebStorm
開發工具
WebStorm 2019.1：用于 JavaScript 的智能意圖，改進對 Angular 的支援，更新了 CSS 和 HTML 文檔，還有新的調試控制台
⭐️WebStorm 2019.1 已經正式推出！⭐️
WebStorm 2019.1 為 JavaScript 和 TypeScript 新增智能意圖，改善了對 Angular 的支援，更新了 CSS 和 HTML 文檔，還提供更加強大的調試控制台等等！
在本文中，我們想與您分享本次 WebStorm 更新的詳細發行說明。它們是從我們幾個月前在此釋出的 EAP 博文 的基礎上編譯的。
以下是按 WebStorm 子系統分組的功能和改進：
對 JavaScript 和 TypeScript 的支援：包括解構、将 Promise 函數轉換為異步函數、将構造函數中的屬性轉換為類字段、switch 語句檢查、增加或删除導出、改進了 TypeScript 中的錯誤消息。
對樣式表的支援：更新了 CSS 文檔，并且檢查浏覽器相容性、提取 CSS 變量、在 CSS 子產品裡支援駝峰式大小寫、支援 Less 3.0 的新特性。
對 HTML 的支援：改進了 HTML 文檔。
以 Angular 開發：對 Angular 項目增加了新的檢查功能、在 Angular 項目中更輕松的導航。
以 React 開發：改進了合并屬性的補全；自定義 React Hook 的提取方法重構。
以 Vue.js 開發：改進對帶有 TypeScript 的 Vue 項目的支援。
Node.js 和 npm：npm 腳本補全、對依賴項的版本範圍工具提示、使用 Docker Compose 運作和調試 Node.js 應用、Node.js 項目模闆。
Linters 內建：改進對複雜項目中的 ESLint 和 TSLint 的支援，并支援将 TSLint 作為 TypeScript 插件。
調試：新的調試控制台。
測試：高亮顯示測試失敗的行、以 Cucumber 和 TypeScript 測試。
IDE 的改進：“最近位置 (Recent Locations)”彈出視窗、将項目儲存為模闆、標明檔案類型的軟包裝。
版本控制：從 VCS 日志的送出中 cherry-pick 檔案、傳入和傳出送出。
支援 JavaScript 和 TypeScript
JavaScript 和 TypeScript 中的解構
通過解構，您可以從數組和對象中将值分拆為變量。此功能的文法非常簡潔，當您需要在應用程式中傳遞資料時，通常會使用這種文法。
如果您還不熟悉解構，我們建議您閱讀 Exploring ES6 這本書中的精彩概述。
為了幫助您開始在代碼中使用解構，WebStorm 2019.1 新增了一組重構和意圖，可以為您的代碼引入解構。讓我們看看在處理對象和數組時如何使用它們。
如果您有一段從數組或對象中擷取多個值的代碼，現在可以使用新的以對象或數組解構替換 (Replace with object or array destructuring) 意圖 (Alt-Enter) 簡化它：
如果不會用到數組或對象中的所有值，則生成的解構将跳過元素：
如果想保留原始配置設定，可以使用引入對象或數組解構 (Introduce object or array destructuring)意圖 (Alt-Enter)，或使用提取對象或數組解構 (Extract object or array destructuring)來重構：
這個意圖在編輯 React 類元件時非常友善：
其他一些 IDE 操作現在也預設為解構。
例如，現在可使用解構快速以 Insert ‘require()’修複帶有 CommonJS 子產品的 Node.js 應用
還有一個新的 将參數轉換為對象 (Convert parameters to object) (Alt-Enter) 功能，可将函數改成解構參數：
将 Promise 轉換為 async/await
通過 IDE 中的這個新意圖，您可以将傳回 promise 和 .then() 和 .catch() 調用的函數自動改變為使用 async/await 文法的異步函數 – 不僅在 TypeScript 檔案中，也在 JavaScript 和 Flow 中。
隻需在函數名稱上按下 Alt-Enter，然後選擇 轉換為異步函數 (Convert to async function)。搞定！
WebStorm 将引入一個新變量，并且以 try-catch 代碼塊代替 Promise.catch ：
// Before:
function getProcessedData(url) {
return downloadData(url)
.then(v => {
return processDataInWorker(v);
})
.catch(e => {
alert("Please try again later");
});
}
// After
async function getProcessedData(url) {
try {
let v = await downloadData(url);
return processDataInWorker(v);
} catch (e) {
alert("Please try again later");
}
}
在本例中，WebStorm 知道 fetch 傳回一個 promise，并且建議将 download 函數轉換為異步：
// Before:
function download() {
return fetch('https://jetbrains.com').then( result => result.ok)
}
// After:
async function download() {
let result = await fetch('https://jetbrains.com');
return await result.ok;
}
Convert properties in constructor to class fields(将構造函數中的屬性轉換為類字段)
您可以用這個友善的意圖 (Alt-Enter)，以類字段替換定義在構造函數中的屬性：
// Before:
class Point {
constructor() {
this.x = 0;
this.y = 0;
}
}
// After:
class Point {
x = 0;
y = 0;
constructor() {
}
}
switch 語句的新檢查
WebStorm 2018.2 增加了一個為‘switch’生成 case 的意圖。但是，如果您編輯了代碼并且現在在 switch 語句中缺少一個新 case，該怎麼辦？或者缺少 default ？或者不會進入某些分支，該怎麼辦？
現在 IDE 可以幫助處理這些情況。我們增加了許多改進，讓以上提到的 JavaScript 和 TypeScript 中 switch 語句的問題都能輕松解決。現在，在 switch 中有了代碼補全，它根據已有資料提供 case 建議(當它是 TypeScript 枚舉或其類型是在 JSDoc 中指定為字元串值清單)。
新檢查将會确認是否覆寫了所有 case，如果遺漏了，則可以使用意圖補齊它們。
如果有空 switch 語句，IDE 将建議删除該語句。可以打開隻有預設子句的 switch 。
IDE 将為任何不會被執行的語句發出警告，并提供快速修複選項來删除它們。
另一個新檢查将幫助您避免在一個 case 中聲明變量然後在另一個 case 中使用變量的情況。
最後一個值得介紹的新檢查是，如果 switch 的參數類型不是嚴格可枚舉的并且沒有 default 子句，則會發出告警。
請注意，它的嚴重級别預設設定為「不要顯示，隻要快速修複」。意即：按下 Alt-Enter 會提供快速修複，但不會在編輯器中高亮顯示。
如果要改變嚴重性，應導航至偏好 (Preferences) | 編輯器 (Editor) | 檢查 (Inspections) | JavaScript | 通用 (General) | 沒有預設分支的 switch 語句(‘switch’ statement with no ‘default’ branch)。
Add or remove export (添加或删除導出)
使用這個新意圖 (Alt-Enter)，您可以快速為類、變量或函數增加 export 或 export default – 可以節省您的輸入時間。
删除導出 (Remove export) 操作，正如您已經猜到的那樣，可以自動删除導出語句，不過您得先確定該符号不會在其他檔案中使用。
擴充了 TypeScript 中的錯誤消息
從 TypeScript 3 開始，某些錯誤消息還有其他資訊，其中包含到相關代碼的連結，可以幫助您了解問題原因。WebStorm 現在在其錯誤工具提示中顯示這些擴充資訊，可以點選連結跳轉到代碼。
将缺失的庫加入 tsconfig.json
使用 TypeScript 時，您需要在 tsconfig.json 檔案中明确列出 TypeScript 将在編譯中包含的标準庫，例如：DOM、ES2015.Promise 等。WebStorm 可以幫助您做到這一點。在未列出的庫中定義的符号上按下 Alt-Enter，然後使用快速修複将要求的庫添加到 tsconfig.json。
TypeScript 3.3 和 3.4
我們已經将内置的 TypeScript 版本更新為 3.3。為了迎接 TypeScript 3.4 版，我們已計劃支援該版本的新文法。
支援樣式表
更新了 CSS 文檔和浏覽器相容性檢查
我們更新了 CSS 屬性和僞元素的文檔。按下 F1 即可檢視屬性及其值的簡要說明，以及有關浏覽器支援的資訊。
文檔及浏覽器相容性資料是從 MDN 加載的。通過點選文檔彈出視窗底部的連結，或按下 Shift-F1，您可以在浏覽器中快速打開完整文檔，以檢視更多詳細資訊和示例。
如果您離線工作或 IDE 無法通路 developer.mozilla.org，WebStorm 将從内置的架構文檔來補全和驗證屬性。可能與 MDN 上的不同，但依然非常有幫助。
因為 WebStorm 知道哪些浏覽器支援特定的 CSS 屬性(根據 MDN 浏覽器相容資料)，是以您可以使用這些新的相容性檢查。您可以到 偏好/設定 | 編輯器 | 檢查 – CSS，然後選擇“浏覽器相容性 (Browser compatibility)”，再選擇您的目标浏覽器的最低版本來配置檢查的功能。如果目标浏覽器不支援該屬性，您将在編輯器中看到警告。
Extract CSS (提取 CSS )變量
通過新的 Extract CSS 變量重構，現在在 .css 檔案中引入使用 var(–var-name) 文法的變量變得非常簡單。
選擇希望聲明為變量的值，按下 Alt-Cmd-V (macOS) 或 Ctrl-Alt-V (Windows 和 Linux)。或者在重構 (Refactor) 菜單選擇提取變量 (Extract Variable)。然後鍵入名稱并确定是否要在目前檔案中僅替換該值的一個用法或替換所有用法。
提得一提的是，編輯器側邊欄上的顔色預覽現在也适用于 CSS 變量。
支援駝峰式大小寫的 CSS 子產品
如果在項目中使用 CSS 子產品，JavaScript 檔案中的類代碼補全現在将建議帶有破折号的駝峰式大小寫類名：
支援 Less 3.0 功能
在 Less 檔案中，我們增加了對 Less 3.0 功能的支援，屬性作為變量。
敲入$ 作為值後，您将看到對在此範圍中使用的屬性名稱可用作變量的建議：
WebStorm 現在還支援 Less 的 if 文法。
支援 HTML
更新的 HTML 文檔
我們更新了 HTML 文檔，使其資訊更具實用性。标記的快速文檔 (Windows 和 Linux：Ctrl+Q，macOS：F1) 顯示了 MDN 的簡述，包括它與最流行的浏覽器的相容性：Chrome (+Android)、Safari (+iOS)、Firefox、IE 和 Edge。(請注意，如果沒有可用資訊或所有浏覽器都支援該标簽，則不會顯示相關資訊。)
屬性文檔也會顯示來自 MDN 的資料：
如果您想了解有關标記的更多資訊以及如何使用它的示例，那麼可以按下 Shift+F1 或點選連結，完整的 MDN 參考将在浏覽器中打開，供您查閱詳細資訊。
Pug 的改進
我們修複了一系列在 Pug (以前的 Jade)檔案中使用 JavaScript 的相關問題：在 Pug 的腳本标記内支援箭頭函數，現在也可以正确支援模闆字元串。
以 Angular 開發
Angular 項目的新檢查
我們為 Angular 應用程式增加了 17 個新檢查，将在您編輯代碼時檢測應用中特定于 Angular 的錯誤。這些檢查将取代在 IDE 中與 TypeScript 服務并行運作的 Angular 語言伺服器的內建。我們的目标是通過更多檢查和快速修複，讓您在編輯 TypeScript 和 Angular 模闆檔案時提供更好的體驗。
下面是幾個示例：
新檢查建議可以将元件添加到子產品中：
此檢查警告您同時使用了 template 和 templateUrl 屬性，并建議删除其中一個：
在這裡，檢查會警告您結構指令的使用錯誤：
要檢視并配置完整的檢查清單，請轉到偏好/設定 | 編輯器 | 檢查– Angular。
在 Angular 項目中導航更輕松
我們知道，在處理 Angular 項目時，總是必須在不同的元件檔案(如 TypeScript、模闆和樣式檔案)之間切換。有很多方法可以做到這點：可以使用導覽列、項目視圖、轉到檔案 (Go to File) 或 Angular CLI 快速切換 (Angular CLI QuickSwitch) 插件…
我們決定再增加一個 – 使用相關符号 (Related Symbol)… 彈出視窗。當您在其中一個 Angular 元件檔案中時，在 macOS 系統按下 Ctrl-Cmd-Up、在 Windows 和 Linux 系統按下Ctrl+Alt+Home 可檢視其它相關檔案的清單。接下來可以使用箭頭鍵選擇所需檔案，然後按 Enter 鍵将其打開。
在彈出視窗中，您還可以使用與每種檔案類型關聯的數字：1.有元件類的 TypeScript 檔案；2.模闆； 3.測試；和 4.樣式。
是以，先按 Ctrl-Cmd-Up / Ctrl+Alt+Home 然後按下 1，會将您帶到 TypeScript 之間檔案。在 TypeScript 檔案中，相關符号彈出視窗還将列出導入到此檔案的所有符号(也就是名稱)。
以 React 開發
改進了屬性補全
WebStorm 現在為使用延展操作符合并的 React 屬性提供了更好的代碼補全。
提取方法 (Extract Method) 現在适用于自定義 React Hook
在 React 最新穩定版裡包含了 React Hook。我們立即收到的一個功能建議是建立自定義 React hook 的重構 – 而 Extract Method 重構非常适合這項工作！
我們已經實作了一些改進，即允許 Extract Method 用于本地函數并使用解構作為傳回值。
請依照這樣的工作流程：
選擇要提取的代碼。
使用 Refactor this… (macOS：Ctrl-T，Windows 和 Linux：Ctrl+Shift+Alt+T)或 Extract Method (Alt-Cmd-M / Ctrl+Alt+M)。
選擇提取函數所定義的範圍。
為其命名。
以 Vue.js 開發
改進對帶有 TypeScript 的 Vue 項目的支援
我們為所有 Vue 和 TypeScript 粉絲帶來了好消息！對于任何在 .vue 檔案中使用了 TypeScript 代碼，WebStorm 現在內建了 TypeScript 語言服務及自身的 TypeScript 支援提供更好的支援。這意味着您現在可以獲得更準确的類型檢查和類型資訊，并将能夠使用該服務提供的快速修複。目前檔案中的所有 TypeScript 錯誤都将列在 IDE 視窗底部的 TypeScript 工具視窗中。
Node.js 和 npm
npm 腳本的補全
在向 package.json 檔案中新增腳本時，WebStorm 現在會提供關于可用指令的建議。您可以看到已安裝的包(從 node_modules/.bin 檔案夾)提供的指令清單：
敲入 node 後，IDE 将提供您可以運作的檔案夾和檔案的補全。敲入 npm run 後，您将看到在目前檔案中定義的任務清單。在任務名稱上按下 Cmd/Ctrl-click 後，會将帶您到同一檔案中的定義：
依賴項的版本範圍工具提示
與 package.json 檔案相關的另一項改進是運作 npm install 或 yarn install 時，新的工具提示可以顯示安裝的版本範圍。 按下Cmd/Ctrl 并将滑鼠懸停在版本上以檢視資訊。
使用 Docker Compose 來運作和調試 Node.js 應用
如果您使用 Docker 來測試 Node.js 應用程式，您現在可以使用 Docker Compose 檔案中描述的配置從 IDE 輕松地運作和調試應用。
請注意，隻有在 Docker Compose 檔案的指令字段中使用 node 或 npm 來運作應用程式時，所述步驟才有效，例如：command: node ./src/app.js
使用運作 (Run) 菜單中的編輯配置 (Edit Configurations)… 操作建立 Node.js 運作/調試配置。
點選 Node.js 解釋器字段旁邊的 … 圖示，然後點選 + 并選擇增加遠端 (Add Remote…)
在打開的對話框中，選擇 Docker Compose。
如果您未曾在 WebStorm 中用過 Docker，則需要配置 Docker 連接配接 – 點選新 (New)… 圖示，接着按這份文檔所述，根據您的作業系統選擇連接配接選項。
設定到 Docker Compose 檔案的路徑，然後選擇要運作的服務。
在 Node.js 運作/調試配置中，如果您希望 WebStorm 使用在 Docker Compose 檔案中指定的指令，則将 JavaScript 檔案字段留白。如果要覆寫它，可以使用配置中的字段(JavaScript 檔案、node 和應用參數…)。
儲存配置。
現在，您可以使用該配置來運作或調試您的應用 – IDE 将使用 docker-compose up 指令把應用部署到 Docker 容器，如果運作在調試模式下，則将調試标志傳遞給 Node.js 并附加到調試過程。
如果您不使用 Docker Compose，或者想進一步了解 WebStorm 對将 Docker 用于 Node.js 的支援，請參閱部落格 WebStorm 和 Docker 快速指南 (“Quick tour of WebStorm and Docker”)。
簡單 Node.js 項目模闆
為了更容易開始簡單 Node.js 應用，我們新增一個名為 “Node.js” 的模闆。當您在 IDE 的歡迎界面點選 建立項目 (Create New Project) 時，可以選擇這項。
這個項目生成器運作 npm init 指令，該指令增加一個 package.json 檔案并且啟用 Node.js 核心 API 的代碼補全。
內建 Linter
改進了在複雜項目中對 ESLint 和 TSLint 的支援
我們重新設計了與 ESLint 和 TSLint 的內建，以改進它在 monorepos 中的工作方式(包括被lerna 和 yarn 工作空間管理的項目)，和具有多個 linter 配置的項目。
過去，WebStorm 在每個項目中隻能運作一個 linter 的服務。是以，如果在項目的不同部分使用不同配置、不同版本的 linter，隻會運作一個 ESLint 或 TSLint 程序，進而導緻忽略某些配置或某些插件工作不正确。
現在，IDE 将為每個 package.json 啟動一個單獨的程序，該程序将 linter(ESLint 或 TSLint)列為依賴項，并且它将處理它下面的所有内容，就像它被 .bin/eslint **/*.js 調用一樣(以 ESLint 為例)。
所有新項目都預設啟用此行為。
要在現有項目中切換到新模式，請轉到偏好/設定 (Preferences/Settings) | 語言和架構 (Languages and Frameworks) | JavaScript | 代碼品質工具 (Code Quality Tools) | ESLint 或TypeScript | TSLint，然後選擇自動 ESLint/TSLint 配置 (Automatic ESLint/TSLint configuration)。
如果需要運作全局安裝的 linter、向其傳遞其他選項或添加自定義規則目錄，則可以通過手動配置 (Manual configuration)的方式配置所有附加選項。
支援 TSLint 作為 TypeScript 插件
如果在 .vue 檔案中使用 TypeScript，并且想要在腳本标記内部使用 TSLint 來 lint 代碼，現在可以将 typescript-tslint-plugin 插件用于 TypeScript。
通過這個功能 TSLint 檢查成為 TypeScript 語言服務的一部分，您将能夠在 IDE 工具視窗裡 TypeScript 錯誤旁邊看到所有 TSLint 錯誤，當然還可以在編輯器中看到。
可以按下 Alt-Enter 後提供的意圖來修複和抑制 TSLint 錯誤和警告。
使用的步驟是：首先，通過 npm install typescript-tslint-plugin 安裝該插件，然後在項目的tsconfig.json 檔案中啟用它：
{
"compilerOptions": {
"plugins": [
{ "name": "typescript-tslint-plugin" }
]
}
}
順便說一句，如果已啟用需要類型資訊的 TSLint 規則(比如 “deprecation” 或 “prefer-readonly”)，您可能也想使用 typescript-tslint-plugin – 這樣，這些類型的錯誤将在您敲入時在編輯器中突出顯示。
調試
新的調試器控制台
我們已經在 JavaScript 和 Node.js 調試工具視窗中完全重新實作了調試器控制台。此控制台顯示堆棧跟蹤以及代碼中記錄的所有内容(例如，使用 console.log() )。可以使用此互動式控制台來評估任意 JavaScript 語句 – 隻需在控制台面闆底部的輸入中敲入它們即可。
以下是我們推出的一些新特性和改進。您可以在 WebStorm 2019.1 EAP 中調試這個示範檔案，檢視所有這些功能的實際效果。
現在可以使用樹形視圖很好地顯示對象。
堆棧跟蹤現在預設以折疊的方式顯示。
現在以不同圖示和背景色顯示警告 (console.warn())、錯誤 (console.error()) 和資訊 (console.info()) 消息，以便于注意。
可以使用控制台面闆左側的過濾器圖示篩選任何類型的日志消息。
現在可以看到使用 CSS 樣式和 %c 标記設定的日志消息。
使用 console.group() 和 console.groupEnd() 分組日志消息，并且以樹形顯示。
如果使用 console.groupCollapsed()，預設折疊輸出。
測試
高亮顯示測試失敗的行
如果在 WebStorm 中運作測試而且有的失敗了，現在可以直接在編輯器中檢視問題發生的位置。IDE 将使用堆棧跟蹤中的資訊并且高亮顯示失敗的代碼。懸停在上時，您将從測試運作程式看到錯誤消息。您可以立即開始調試測試。
這個功能适用于 Jest、Karma、Mocha 和 Protractor。
以 Cucumber 和 TypeScript 測試
如果使用 Cucumber 和 TypeScript，您将注意到 WebStorm 2019.1 的一些重大改進。首先，您現在可以從 .feature 檔案中的步驟跳到其在 TypeScript 檔案中的定義。其次，您可以使用快速修複(在高亮顯示的步驟上按下 Alt-Enter)生成缺失的定義。
請注意，目前 WebStorm 僅支援用正規表達式編寫的步驟定義。
如果要在 IDE 中運作這類測試，請使用 Cucumber.js 運作/調試配置，并且将編譯 TypeScript (Compile TypeScript)添加為啟動前 (Before launch)任務(如果沒有為編譯 TS 設定任何其他建構步驟)：這樣，在運作 Cucumber 之前，IDE 将使用標明的 tsconfig.json 檔案運作 TypeScript 編譯器。
如果要調試這些測試，别忘了在 tsconfig.json 檔案中啟用源映射 (“sourceMap”: true )。
IDE 改進
新的 UI 皮膚
現在 WebStorm 支援更豐富多彩的 UI 皮膚，這些皮膚是以插件的方式提供。可以選擇深紫色、灰色和淺青色皮膚，也可以自定義。
最近的位置
WebStorm 2019.1 新增一種項目導航方式 – 最近的位置 (Recent Locations) 彈出視窗。其打開方式為，macOS：Cmd-Shift-E，Windows 和 Linux：Ctrl+Shift+E。
它顯示了您最近在編輯器中打開的檔案和代碼行清單(使用 “Go to” 操作導航到定義或用法，或者隻是從項目視圖打開檔案)。
彈出視窗打開後，敲入以篩選結果，并且找到所需代碼(搜尋适用于代碼和檔案名)。當然，也可以使用向上和向下箭頭選擇所需位置。
如果隻想檢視已更改的代碼片段，則選擇僅顯示改變 “Show only changed” 的複選框。
将項目另存為模闆
您是否想把某個項目作為其他新項目的模闆？現在，通過工具 (Tool) 菜單的新操作 另存為模闆 (Save as a Template)，您可以建立自定義項目模闆。如果要使用模闆，點選 IDE 歡迎界面的建立項目 (Create New Project)，随後隻需從清單中選擇模闆即可。
在 .idea檔案夾中的所有項目設定都将被儲存到模闆中。是以，如果您希望新項目具有一些預定義的運作/調試配置，請在儲存模闆之前勾選配置中的共享複選框。
所選檔案類型的軟包裝
您現在可以在編輯器中為特定檔案類型啟用軟包裝。要做到這點，請打開偏好/設定 | 編輯器 | 一般，在軟包裝檔案 “Soft-wrap files” 字段指定檔案類型：
通過軟包裝，IDE 将在編輯器中顯示包含的長行，而不會實際添加換行符。
拖動以添加多個遊标
如果要在多行上相同位置添加光标，現在需要按 Alt-Shift(而不是 Alt)，然後按住滑鼠鍵并向上或向下拖動光标。可以改變 偏好/設定 | 鍵盤映射 (Keymap) 中的組合鍵：搜尋添加矩形選擇 (Add rectangular selection) 操作。
版本控制
從 VCS 日志的送出中 cherry-pick 檔案
現在，您可以直接從 VCS 日志的上下文菜單中 cherry-pick 送出内的檔案：
傳入和傳出送出
IDE 現在可以指出分支 (Branches) 彈出視窗中的各分支的傳入和傳出送出是否可用。要檢視該資訊，請打開偏好/設定 | 版本控制 (Version Control) | Git，并且啟用新選項，在分支彈出視窗中标記有傳入/傳出送出的分支 (Mark Branches that have incoming/outgoing commits in the Branches popup)。
已忽略檔案和檔案夾的檔案狀态
在項目視圖中，現在使用橄榄綠表示忽略的檔案和檔案夾，以便更容易将它們與其他檔案區分開來。可以在偏好/設定 | 版本控制 | 檔案狀态顔色 (File Status Color) 中修改顔色。
您的 WebStorm 團隊