webstorm

webstorm 是一款由 JetBrains 公司开发的强大的 JavaScript 集成开发环境（IDE），专为前端开发者打造，它不仅支持 JavaScript、HTML 和 CSS 开发，还有许多实用的功能，如代码自动完成、智能代码重构、调试工具等，帮助开发者提高工作效率，webstorm 还支持流行的前端框架和库，如 React、Angular 和 Vue.js，并集成了版本控制系统，让团队协作更加流畅，这款 IDE 提供了丰富的插件和定制选项，可以根据个人需求扩展功能，是前端开发者不可或缺的利器之一。

功能分析

webstorm官方版功能如下：

一、JavaScript和TypeScript

1、使用JavaScript解构：通过解构，使用非常简洁的语法将数组和对象中的值解压缩到变量中。webstorm的新重构和意图(Alt-Enter)可以帮助您轻松地将解构引入 JavaScript或TypeScript代码。

2、使用Promise将函数转换为async / await：您可以自动更改返回Promise的函数，.then()并 .catch()调用使用async / await语法的异步函数。只需在功能名称上按Alt-Enter，然后选择转换为异步功能。这不仅可以在TypeScript文件中实现，还可以在JavaScript和Flow中实现。

二、构架

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

2、Angular项目中的导航更容易：在Angular应用程序中，您现在可以使用相关符号...弹出窗口(Ctrl-Cmd-Up / Ctrl + Alt + Home)在不同的组件文件(如TypeScript，模板，样式和测试文件)之间快速切换。在TypeScript文件中，弹出窗口还将列出导入此文件的所有符号。

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

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

5、改进了道具的完成：webstorm现在为使用扩展运算符合并的React props提供了更好的代码完成。

三、HTML和样式表

1、更新文档：CSS属性和HTML标记及属性的文档(F1)现在显示有关MDN的浏览器支持的最新描述和信息，以及指向完整MDN文章的链接。

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

3、对CSS模块的Camel案例支持：如果在项目中使用CSS模块，JavaScript文件中的类的代码完成现在将建议带有破折号的类名的驼峰版本。

4、提取CSS变量：使用新的Extract CSS变量重构，使用语法将当前.css文件中值的所有用法替换 为变量var(--var-name)。

四、测试

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

2、使用Cucumber和TypeScript进行测试：使用Cucumber和TypeScript?现在，跳到从步骤.feature文件 到它们的定义中 的.ts文件中使用速战速决(和产生缺定义Alt-Enter组合)。

安装说明

第一步：双击运行Webstorm安装程序，打开Webstorm安装包。

第二步：点击next，点击【自定义安装】按钮选择安装目录。

第三步：单击【安装】开始安装以后即可开始安装。

第四步：安装完成点击【finish】即可打开Webstorm。

更新修订

jetbrains webstorm2018.2.4

1.无效的CSS选择器的格式

2.无效的CSS属性

3.未使用的CSS类定义

4.无效的本地锚和更多…

5.缺少必需的属性

6.无效的属性或非法值

7.错误的引用文件中的链接

8.重复的属性

jetbrains webstorm2018.2.6

1.无效的CSS选择器的格式

2.无效的CSS属性

3.未使用的CSS类定义

4.无效的本地锚和更多…

5.缺少必需的属性

6.无效的属性或非法值

7.错误的引用文件中的链接

8.重复的属性

特殊特点

1、软件现在为使用扩展运算符合并的React props提供了更好的代码完成

2、使用流行的项目模板(如Express 或Web入门套件)从欢迎屏幕启动新项目，并通过与Yeoman的集成访问更多项目生成器

3、最近的位置弹出：在最近的位置弹出(Cmd的移-E / 按Ctrl + Shift + E)是一种新的方式 浏览各地的项目。它显示了最近在编辑器中打开的所有文件和代码行的列表。开始键入以过滤结果并跳转到您需要的代码

4、为您的客户端代码(适用于Chrome)和Node.js应用程序提供内置调试器。放置断点，逐步执行代码并计算表达式 - 所有这些都不需要离开IDE

使用建议

怎么运行html项目

我们打开自己的WebStrom软件，打开项目，找到任意一个.html的文件;

这里我们选择index.html;

我们直接在body里面修改一段文字

最后进行编译，然后浏览页面即可看到效果。