• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    Webstorm怎么配置? Webstorm入门之软件配置教程

    发布者: 怀卉1097 | 发布时间: 2025-6-20 18:33| 查看数: 24| 评论数: 0|帖子模式

    之前我们介绍过Webstorm 的主题与配色和字体的设置方法,这次来说说 Webstorm 的配置。
    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 命令行软件。
    SVN windows

    • 客户端:https://mac.github.com/github windows
    • 客户端:https://windows.github.com/

    在更新项目和提交项目的时候,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 那样极致、快捷。

    来源:https://www.jb51.net/softjc/982740.html
    免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    ×

    最新评论

    浏览过的版块

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表