WebStorm

WebStorm是一款由 JetBrains 开发的功能强大的 JavaScript 集成开发环境（IDE），主要用于 Web 开发，支持所有主流的前端框架，如 React、Angular 和 Vue 等，能为这些框架的开发提供高效的代码辅助和特定功能支持。具有强大的 “Code Completion”（代码自动补全）工具，可根据代码上下文推断可能的代码，并提供快速访问。

使用教程

WebStorm怎么设置

强大的调试工具：可以轻松地调试 JavaScript 代码，帮助开发者快速定位和解决代码中的问题。

版本控制集成：支持 Git、GitHub、SVN 等主流版本控制工具，方便团队协作和代码管理。

主题和配色方案自定义：开发者可以使用自己喜欢的主题和配色方案，打造个性化的开发环境。

多平台支持：支持 Windows、Mac 和 Linux 等操作系统，满足不同开发者的使用需求。

丰富的插件生态：可以轻松地集成第三方插件和工具，以扩展其功能，满足开发者的各种特殊需求。

强大的搜索功能：能够快速查找文件、函数、变量等，提高开发过程中的查找和导航效率。

代码风格检查和自动修复：有助于提高代码的质量和可维护性，保持代码风格的一致性。

资源管理器：具有强大的资源管理器，可以轻松地管理依赖项。

“Scratch” 文件功能：可让开发人员在不需要创建新文件的情况下快速编写新代码。

软件版本：WebStorm 会不断更新迭代，带来新的功能、性能优化和对新技术的支持。比如对新的 JavaScript 语言特性的支持更好，或者在代码分析和提示的准确性上有所提升 。

以下是一些 WebStorm 的使用攻略：

安装与配置：

下载与安装：从 JetBrains 官方网站或其他可靠来源下载 WebStorm 安装程序，然后按照提示进行安装，选择合适的安装路径等 。

激活：如果是付费版本，需要使用购买的许可证进行激活；如果是试用版，可以在安装完成后选择试用。也有一些破解方法，但不建议使用非官方授权的途径。

初始设置：打开软件后，根据个人喜好进行一些初始设置，如主题、字体、行号显示等。可以通过 “File”->“Settings”（在 Mac 上是 “WebStorm”->“Preferences”）来进入设置界面 。

项目创建与管理：

创建项目：点击 “File”->“New”->“Project”，选择项目类型（如 JavaScript 项目、Node.js 项目等）和项目位置，然后点击 “Create” 创建新项目 。

导入项目：如果已有项目代码，可以点击 “File”->“Open”，选择项目文件夹导入。也可以从其他版本控制系统（如 Git）中克隆项目到本地。

项目结构管理：在左侧的项目导航栏中，可以查看和管理项目的文件和文件夹结构。可以对文件进行新建、删除、重命名、复制、粘贴等操作 。

代码编写与编辑：

智能代码补全：在编写代码时，WebStorm 会自动根据上下文提供代码补全建议，按下 Tab 键或回车键即可快速插入补全的代码。可以通过 “File”->“Settings”->“Editor”->“Code Completion” 来设置代码补全的相关选项，如补全的触发时机、是否显示参数信息等 。

代码格式化：按下 Ctrl+Alt+L（在 Mac 上是 Command+Option+L）可以快速格式化代码，使其符合一定的代码风格规范。也可以在设置中自定义代码格式化的规则 。

代码重构：WebStorm 支持多种代码重构操作，如重命名变量、函数、类等，提取方法、变量等。选中要重构的代码，然后按下 Shift+F6（在 Mac 上是 Option+Command+R），根据提示进行操作即可 。

注释和文档生成：可以使用 “//” 或 “//” 来添加单行或多行注释。WebStorm 还支持使用 JSDoc 注释来为代码提供文档，在函数或类的上方输入 “/”，然后按下 Enter 键，WebStorm 会自动生成基本的 JSDoc 注释模板，开发者可以根据需要填写相应的参数和描述信息 。

调试与测试：

设置调试配置：点击右上角的调试按钮（绿色虫子图标）旁边的下拉箭头，选择 “Edit Configurations”，在弹出的窗口中添加或选择调试配置，如 JavaScript Debug、Node.js Debug 等，并设置相应的参数，如要调试的文件、断点等。

打断点：在代码中需要调试的行号左侧点击，即可设置断点。当程序运行到断点处时，会暂停执行，开发者可以查看变量的值、执行流程等。

开始调试：设置好调试配置和断点后，点击调试按钮开始调试。在调试过程中，可以使用调试工具栏上的按钮进行单步执行、进入函数、跳出函数等操作，还可以在 “Variables”（变量）窗口中查看当前作用域内的变量值。

测试：WebStorm 支持 JavaScript 的单元测试框架，如 Jest、Mocha 等。可以在项目中创建测试文件，编写测试用例，然后使用相应的测试运行命令或工具来运行测试。

版本控制集成：

配置版本控制系统：如果使用 Git，在 “File”->“Settings”->“Version Control”->“Git” 中设置 Git 执行文件的路径。如果使用其他版本控制系统，也在相应的设置中进行配置 。

日常使用：在项目中进行代码修改后，可以在工具栏上看到版本控制的相关操作按钮，如提交（Commit）、推送（Push）、拉取（Pull）等。也可以通过右键菜单在文件或文件夹上进行相应的版本控制操作，如查看历史记录、比较差异等 。

插件使用：

插件安装：点击 “File”->“Settings”->“Plugins”，在插件市场中搜索并选择需要的插件，然后点击 “Install” 进行安装。安装完成后，根据提示重启 WebStorm 使插件生效。例如，“CSS-X-Fire” 插件可用于当使用 Firebug 修改 CSS 属性时，编辑器内的 CSS 代码也会发生变化。

插件管理：在 “Plugins” 设置页面中，可以查看已安装的插件，启用或禁用插件，以及更新插件。

其他实用功能：

收藏夹功能：当工程目录很庞大时，有些子目录经常打开但层级很深，可以把目录添加到收藏夹里面。添加成功后，左侧会有一个 “Favorites” 菜单，方便快速访问 。

面包屑导航：除了左侧的工程页面可以选择目录外，在顶部菜单下有一个类似网站面包屑导航一样的目录，点击每个目录会有下拉菜单显示其下的子目录，很实用 。

构造器界面：如果注释符合格式，在 JavaScript 文件中会出现函数和对象的构造器界面；在 CSS 文件中会显示这个 CSS 文件的概括；在 HTML 文件中则会显示节点的结构图，方便查看代码的结构性 。

TODO 界面：给代码加 TODO 注释就会出现这个界面，可用于记录需要完成的任务或待办事项 。

双栏代码界面：右击代码选项卡上的文件，然后右键选择 “Split Vertically”（左右两屏）或 “Split Horizontally”（上下两屏），可同时查看和编辑同一个文件的不同部分 。

新功能

【ide】

1.将项目另存为模板

通过“ 工具”菜单中的新操作“ 另存为模板 ” ，您现在可以使用项目作为在ide欢迎屏幕上创建新项目的基础

2.新的ui主题

您现在可以在webstorm中使用新的丰富多彩的ui主题作为插件。选择 深紫色，灰色和 青色光主题，或创建自己的主题

3.所选文件类型的软包装

您现在可以在编辑器中为特定文件类型启用软包装。为此，请打开“首选项/设置”| 编辑| 常规并在软包装文件字段中指定文件类型

4.最近的位置弹出

在最近的位置弹出（cmd的移-e / 按ctrl + shift + e）是一种新的方式 浏览各地的项目。它显示了最近在编辑器中打开的所有文件和代码行的列表。您可以开始键入以过滤结果并跳转到您需要的代码

【javascript和typescript】

1.使用javascript解构

通过解构，您可以使用非常简洁的语法将数组和对象中的值解压缩到变量中。webstorm的新重构和意图（alt-enter）可以帮助您轻松地将解构引入 javascript或typescript代码。

2.使用promise将函数转换为async / await

您可以自动更改返回promise的函数，.then()并 .catch()调用使用async / await语法的异步函数。只需在功能名称上按alt-enter，然后选择转换为异步功能。这不仅可以在typescript文件中实现，还可以在javascript和flow中实现。

【工具】

1.支持docker compose

如果使用docker测试node.js应用程序，现在可以使用docker compose文件中描述的配置从ide 轻松运行和调试应用程序。

2.依赖项的版本范围工具提示

在的package.json，按命令/ ctrl键和版本悬停的依赖关系，看看运行的时候可以安装什么版本范围 npm install或yarn install。

3.改进了对短绒的支持

webstorm现在可以 在一个项目中为eslint和tslint运行多个进程，以确保它们在单个项目和具有多个linter配置的项目中正常工作 。

4.完成npm脚本

将新脚本添加到package.json文件时，webstorm现在会为已安装的软件包提供的可用命令提供建议。键入后 node，ide将建议文件夹和文件名。输入后npm run，您将看到当前文件中定义的任务列表。

5.新的调试器控制台

在javascript和node.js调试工具窗口中使用新的，改进的交互式调试器控制台！它现在使用树视图显示对象，它支持使用css设置日志消息样式并使用console.group()和 对它们进行分组console.groupend()。您还可以过滤掉任何类型的日志消息。

【html和样式表】

1.css的浏览器兼容性检查

要检查目标浏览器版本是否支持您使用的所有css属性，可以在首选项中启用新的 浏览器兼容性检查。

2.对css模块的camel案例支持

如果在项目中使用css模块，javascript文件中的类的代码完成现在将建议带有破折号的类名的驼峰版本。

3.提取css变量

使用新的extract css变量重构，您可以使用语法将当前.css文件中值的所有用法替换 为变量var(--var-name)。

4.更新文档

css属性和html标记及属性的文档（f1）现在显示有关mdn的浏览器支持的最新描述和信息，以及指向完整mdn文章的链接。

【测试】

1.使用cucumber和typescript进行测试

使用cucumber和typescript？现在，您可以跳到从步骤.feature文件 到它们的定义中 的.ts文件中使用速战速决（和产生缺定义alt-enter组合）。

2.突出显示测试中的失败行

当您使用jest，karma，mocha或protractor运行测试并且某些测试失败时，您现在可以在编辑器中看到问题发生的位置。ide将使用堆栈跟踪中的信息并突出显示失败的代码。在悬停时，您将看到来自测试运行器的错误消息，您可以立即开始调试测试。

【构架】

1.改进了道具的完成

webstorm现在为使用扩展运算符合并的react props提供了更好的代码完成。

2.react钩子的提取方法

该提取方法重构现在与当地的功能和使用解构的返回值，使得它非常适合提取自定义作出反应挂钩。

3.对angular应用程序的新检查

对于angular应用程序，webstorm添加了17项新检查，可帮助您在键入时检测应用程序中的angular特定错误，并建议快速修复。这些检查在typescript和模板文件中都有效，并检查绑定，指令，组件和许多其他内容的使用。

4.angular项目中的导航更容易

在angular应用程序中，您现在可以使用相关符号...弹出窗口（ctrl-cmd-up / ctrl + alt + home）在不同的组件文件（如typescript，模板，样式和测试文件）之间快速切换。在typescript文件中，弹出窗口还将列出导入此文件的所有符号。

5.改进了对vue应用程序中typescript的支持

webstorm现在使用typescript语言服务以及对.vue文件中任何typescript代码的自己的typescript支持。这意味着您现在可以获得更准确的类型检查和类型信息，您将能够使用服务提供的快速修复程序，并在typescript工具窗口中查看当前文件中的所有typescript错误。

webstorm安装教程

1.先下载安装jetbrains webstorm 2019，安装完成先不要运行

2.接下来对软件进行注册破解，首先以记事本的方式打开hosts文件，将代码添加至hosts文件屏蔽网络联网；

hosts文件默认目录【c:windowssystem32driversetc】

0.0.0.0 account.jetbrains.com

0.0.0.0 www.jetbrains.com

3.再运行桌面上生成的webstorm 2019.1软件图标，选择do not import settings点击ok，再选&skip...&跳过；

4.弹出注册界面，选择&activation code&输入注册码即可激活。

webstorm 2019激活码如下，请复制粘贴即可：

5.至此webstorm 2019.1破解版成功激活，但还是英文界面；

6.如果想汉化成中文，可以将软件包中汉化文件resources_cn.jar复制替换。

打开安装目录下的“lib”文件夹，将原来的resources_en.jar英文版文件删除或重命名，再将webstorm 2019汉化包“resources_cn.jar”复制入内即可，默认安装路径【c:program filesjetbrainswebstorm 2019.1lib】resources_en.jar重命名是为了返回英文界面，因为有用户说汉化不是很全面，但99%汉化好了。

7.再次打开软件，webstorm 2019.1中文破解版已经成功激活，所有功能都可以免费使用。