上一篇文章说到了 webstorm 的主题与配色,这次来说说 webstorm 的配置。

1、配置分类

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

2、配置查找

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

img.png

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

3、全局配置

3.1、插件配置

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

img.png

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

img.png

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

img.png

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

3.2、SVN、github配置

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

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

img.png

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

img.png

打开历史记录,里面的修改记录非常的详细:

img.png

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

3.3、文件模板配置

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

img.png

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

img.png

如上图,选择的是 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 等

打开新建菜单:

img.png

选择 CMD JS FIle(即刚刚添加的文件模板),输入文件名(不需要输入扩展名)回车:

img.png

4、项目配置

4.1、SVN、Git 配置

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

img.png

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

img.png

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

img.png

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

img.png

建议点击 cancel 即可。

4.2、项目文件夹标记配置

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

img.png

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

4.3、项目代码检查

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

img.png

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

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

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

img.png

4.5、项目脚本库

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

img.png

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

5、参考链接