WebStorm 发布2021.3重大更新新功能介绍

WebStorm 已经发布了 2021.3 的重大更新版本，并且增加了许多强大的新功能，本文将详细介绍这些新功能以及如何使用它们。

1. 在 JS/TS 模板文字中使用虚拟变量

新版本的 WebStorm 已经支持在 JavaScript 和 TypeScript 的模板文字中使用虚拟变量。这样可以使代码更加简洁和易读。

示例一：

const name = 'Vue';

console.log(`Hello, ${name}`);

在模板字符串中，使用 ${} 将变量嵌入字符串，用 ${*} 将虚拟变量嵌入字符串。

console.log(`Hello, ${name}${1+1}`);

2. 自定义类型导航的文件路径形式

WebStorm 可以通过 TypeScript 的类型导航功能快速定位到类型定义文件。新版本中，用户可以自定义类型导航的文件路径形式，这样可以更加直观和方便地查找到类型定义文件。

示例二：

在 tsconfig.json 文件中添加以下配置：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

假设有一个 App.vue 文件，需要查找其类型定义文件，可直接在 App.vue 文件中按 Ctrl+Shift+T，然后输入 @/components，WebStorm就会自动查找 src/components/App.vue.d.ts 文件。

3. 在 CSS 中提取变量和函数

新版本的 WebStorm 支持从 CSS 中提取变量和函数，这可以让样式更加灵活和易于维护。

示例三：

在 CSS 文件中定义变量和函数：

:root {
  --main-color: #333;
}

@function lighten($color, $amount) {
  $color-hsl: hue($color), saturation($color), lightness($color) + $amount;
  @return hsl($color-hsl);
}

.btn {
  color: var(--main-color);
  background: lighten(var(--main-color), 10%);
}

变量和函数可以跨文件使用，这有助于提高代码的复用性和可维护性。

4. 更直观的 Git 更改显示

WebStorm 新版本中，Git 更改记录的显示更加直观，可以更加快速和方便地查看和比较修改记录。

示例四：

在 Git 中， diff 是一种常用的比较修改记录的方式， WebStorm 可以自动检测并展示修改的文件，用户只需在 Git 界面中选择需要查看的修改记录，就可以查看文件的详细修改情况。

5. 细粒度的自定义 Live Template

WebStorm 新版本中，用户可以针对更具体的语言特性进行自定义 Live Template，这样可以提高代码编写速度和准确度。

示例五：

假设需要在 TypeScript 代码中快速生成一个 interface，可以使用自定义的 Live Template，这样只需要输入少量的代码，即可快速生成完整的 interface。

it

按下 Tab 键，WebStorm 就会自动将文本修改成以下内容：

interface ITest {
  $0
}

其中 $0 是一个占位符，表示光标停留的位置。

以上就是 WebStorm 2021.3 新功能的详细介绍，希望本文对您有所帮助。