webstorm入门

一：

1、引子

前端开发工具webstorm，为什么说它是前端开发工具，而不是前端开发编辑器呢？它具备的功能，不只只是编辑器这么简单，还包含了任务管理、历史管理、版本管理、工程管理、代码检查、代码调试等功能，当然它也有丰富的扩展，能满足前端开发的大部分要求。官方网站称之为是The smartest JavaScript IDE，下面几篇文章会慢慢的说到它的强大之处，你会觉得他是世界上最好的 javascript 开发工具确实是不为过。

2、主题

在使用 webstorm 的时候，推荐使用黑色的主题，看起来更加的纯净，也会让使用者更加的专注书写代码。打开菜单配置选项：

在 IDE Settings > Appearance 的右边菜单里，选择 Theme > Darcula主题即可。IDE Settings 指的是 webstorm 的全局配置。

3、配色

从 Sublime text 3 转过来的朋友，对默认的配色 monokia 想必非常的喜欢，在 webstorm 里你依然可以继续使用它，不过默认是没有这个配色的，需要从下载添加进去。

打开https://github.com/OtaK/jetbrains-monokai-sublime 链接，然后点击右边的下载ZIP文件即可。解压之后，会得到一个Monokai-Sublime.jar文件，这个文件就是配色的打包文件，可以使用 webstorm 导入即可。打开菜单：

选择 Import Settings，然后选择刚才下载的Monokai-Sublime.jar文件，然后最后导入即可。

最后来张主题和配色的预览图，是不是觉得非常漂亮。

4、参考链接

• 官网：http://www.jetbrains.com/webstorm/
• monokia：https://github.com/OtaK/jetbrains-monokai-sublime

二：

1、配置分类

webstorm 的配置分为项目配置和全局配置，在打开一个项目的时候，会在项目根目录生成.idea的隐藏文件夹，这个文件夹里保存的就是项目配置，而全局配置保存在文档目录，全局配置都可以导出。

2、配置查找

webstorm 的配置非常的多，想要查找某个方面的配置，打开设置搜索关键词即可。如：

这样查找的配置，然后再点开其中需要的，进去配置即可。

3、全局配置

3.1、插件配置

webstorm 虽然功能丰富，但也提供了很多插件提供下载，以扩展我们的日常使用。遗憾的是 webstorm 并没有原生支持 markdown 的颜色高亮，这需要使用插件来完成。这里以 markdown 插件为例，介绍如何下载安装插件，并配置。

如上图，首先打开的是已经安装到本地的插件列表，勾选右边的选项表示启用该插件。如果在本地没有相关 markdown 的插件，可以点击下边的浏览来访问在线的插件列表。

在打开之后搜索 markdown，点击右边的安装即可：

某些插件安装之后，需要重启 webstorm 之后才可以使用。

3.2、SVN、github配置

webstorm 非常友好的支持这些版本控制服务，如常用的 SVN 和 github。windows 下需要事先安装 SVN 客户端（下载地址见参考链接），Git 的话安装 github 官网的可视客户端（下载链接见参考链接）即可。关于 SVN 和 github 的账号设置，放在下面的项目配置里说。

webstorm 支持的版本控制功能有很多：

除了常用的 SVN 和 Git 之外，它还提供了本地历史管理，可以查看一段历史区间的代码修改记录。

打开历史记录，里面的修改记录非常的详细：

这些东西是一些编辑软件无法直接做到的，通过这些历史记录可以非常方便的还原到历史记录点，这对项目开发非常的便利。为什么要在这里着重的提到这些，那是因为这些东西确实是帮助到我了。

3.3、文件模板配置

文件模板即新建文件的时候可以初始化一个预先定义好的文件内容，比如常见的HTML、CSS、JS文件等。这些文件模板在IDE Settings》File and Code Templates 里添加和修改，如图：

webstorm 预先定义了几个文件，然后我们可以自由添加和修改：

如上图，选择的是 CMD JS FIle，右边是文件内容，红色高亮的为文件模板的变量，webstorm 提供的文件模板变量有：

• ${PROJECT_NAME} 项目名称
• ${NAME} 文件名不包括文件后缀
• ${USER} 当前电脑登录用户
• ${DATE} 日期
• ${TIME} 时间
• ${YEAR} 年
• ${MONTH} 月
• ${DAY} 日
• ${HOUR} 时
• ${MINUTE} 分
• ${PRODUCT_NAME} 文件名包括文件后缀
• ${MONTH_NAME_SHORT} 英文短格式月份，如Jan、Feb 等
• ${MONTH_NAME_FULL} 英文长格式月份，如January、February 等

打开新建菜单：

选择 CMD JS FIle（即刚刚添加的文件模板），输入文件名（不需要输入扩展名）回车：

4、项目配置

4.1、SVN、Git 配置

SVN 使用的是命令行工具，因此在 windows 下需要额外安装 svn 命令行软件（下载地址见参考链接）。

在更新项目和提交项目的时候，webstorm 会提示你输入 SVN 的用户名和密码，当然首先得把项目克隆下来，然后用 webstorm 打开。

配置 github 的时候，如上图，填上用户名和密码，点击测试即可。测试成功会弹出提示：

在点击确定之后，会弹出输入保存用户名和密码的数据进行密码保护的确认：

建议点击 cancel 即可。

4.2、项目文件夹标记配置

在开发的时候，常常资源等信息并不是指向根目录，在书写资源路径的时候提示是不正确的，这时候就需要配置文件夹功能了。打开Project Settings > Directories 里打开：

绿色的为测试目录，红色的为排除目录，蓝色的为资源根目录。

4.3、项目代码检查

打开Project Settings > JavaScript > Code Quality Tolls > JSHint 启用，默认配置即可。然后在末尾添加全局变量，以通过代码检查：

4.4、CSS预处理语言的预编译、JS 实时压缩

有了 webstorm，基本不需要 grunt、gulp 等前端开发辅助工具了，webstorm 内置的文件监听，可以完成常用的功能，如 CSS 预处理语言的预编译、JS 的实时压缩等。

打开Project Settings > FIle Watchers，然后点击下边的加号开始新建即可：

4.5、项目脚本库

项目在开发的时候，可以配置项目已经用到的脚本库，可以方便的在编程的时候提示，加快开发速度和代码质量检测。内置的有HTML5、NodeJS 等，如果不存在的也可以手动添加。在 Project Settings > JavaScript > Libraries 里打开：

这里介绍的配置虽然是前端开发中常用的，但也只是 webstorm 里配置的冰山一角，在使用过程中会收获更多。值得说的是，在使用 webstorm 之后，再也回不去文本编辑器的时代了。文本编辑的功能有限，无法完整管理项目，当然它的作用就是文本编辑器。而 webstorm 是前端开发工具，文本编辑它兼顾，但不能做到像 Sublime 那样极致、快捷。

转载出处: