精华内容
下载资源
问答
  • WebStorm使用教程

    万次阅读 2019-05-21 16:40:39
    WebStorm使用教程 Webstorm安装、破解、使用 webstorm的安装及基本配置 WebStorm安装与使用 webstorm的安装及基本配置 WebStorm安装教程 webstorm详细安装教程 Webstorm 超实用教程 Webstorm安装和配置 webstorm2019...
    展开全文
  • WebStorm是一款深受广大程序员喜爱的 JavaScript 开发和Web前端开发工具,完美适应各种复杂客户端开发和Node.js的服务器端开发。 点击下载WebStorm最新试用版 设置是与资源,文件颜色,版本控制选项,代码样式等...

    WebStorm是一款深受广大程序员喜爱的 JavaScript 开发和Web前端开发工具,完美适应各种复杂客户端开发和Node.js的服务器端开发。

    点击下载WebStorm最新试用版

    设置是与资源,文件颜色,版本控制选项,代码样式等相关的首选项。

    WebStorm允许您为特定项目 或全局配置设置。

    设定类型

    全局设置适用于WebStorm特定安装或版本的所有项目。这些设置包括IDE外观(主题,配色方案,菜单和工具栏),通知设置,已安装和启用的插件集,调试器设置,代码完成等等。

    要配置你的集成开发环境,选择File | Settings for Windows and Linux or IntelliJ IDEA | Preferences for macOS,或者按Ctrl+Alt+S或点击工具栏上的Settings/Preferences按钮。或者,按Ctrl+Alt+S或点击工具栏上的 "Settings/Preferences"按钮。

    在 "Settings/Preferences"对话框中没有标记为 "用于当前项目 "图标的设置是全局性的,适用于当前 WebStorm 版本的所有现有项目。

    在“设置/首选项”对话框中标记的全局设置

    恢复默认的WebStorm设置

    还原默认的IDE设置时,WebStorm会将您的配置备份到目录中。您始终可以从此备份中恢复设置。

    备份设置并恢复默认值

    1. 在主菜单中,选择File | Manage IDE Settings | Restore Default Settings。

      或者,按Shift两次并键入 Restore default settings。
      恢复IDE默认值


    2. 在打开的确认弹出窗口中,点击恢复并重新启动。IDE将使用默认配置重新启动。 

    3. 弹出窗口提示您确认要恢复默认设置

    WebStorm恢复默认的IDE设置时,它将使用以下位置中的配置创建一个备份目录:

    从备份中应用IDE设置

    1. 在主菜单中,选择File | Manage IDE Settings | Import Settings。

    2. 在打开的对话框中,指定备份目录的路径,然后单击“Open”。

      WebStorm显示确认弹出窗口。请注意,应用备份中的设置后, 这些设置将被您当前的IDE配置覆盖。

      除了备份配置目录之外,您还可以从另一个WebStorm版本或具有先前导出设置的.zip文件中 选择配置目录。

    3. 单击“Restart”以应用备份中的设置并重新启动IDE。

    展开全文
  • webStorm 入门

    2018-11-21 10:53:59
    webStorm是远程访问,默认端口为63342,自带有服务器,但是不带有PHP解释器 首先说一下快捷键吧(快捷键是最伟大的发明之一,不接受反驳): ul>li*3+tab Ctrl+Alt+向下箭头 Alt+↑/↓ 向上/下移动当前行 ...

    webStorm是远程访问,默认端口为63342,自带有服务器,但是不带有PHP解释器


    首先说一下快捷键吧(快捷键是最伟大的发明之一,不接受反驳):

    ul>li*3+tab

    Ctrl+Alt+向下箭头

    Alt+↑/↓ 向上/下移动当前行

    Ctrl+D 删除当前行

    Ctrl+/ 注释/取消注释当前行

    Ctrl+Alt+L 格式化当前文件

    Alt+鼠标左键  进入多行编辑模式,ESC或左键退出(超级无敌实用)

    这些快捷键很熟悉吧,哈哈就是eclipse的快捷键,其实就是选择eclipse系统的快捷键包,完美

     安装很简单,不多讲。

    由于后续会一直实用,会一直更新。

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • webstorm入门

    千次阅读 2015-04-17 15:29:51
    使用 webstorm 的时候,推荐使用黑色的主题,看起来更加的纯净,也会让使用者更加的专注书写代码。打开菜单配置选项: 在 IDE Settings > Appearance 的右边菜单里,选择 Theme > Darcula主题即可。IDE...


    一:

    1、引子

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

    2、主题

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

    img.png

    在 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 导入即可。打开菜单:

    img.png

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

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

    img.png

    4、参考链接


    二:

    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 那样极致、快捷。

    转载出处:
    展开全文
  • Webstorm使用教程详解

    2017-04-25 13:57:00
    Webstorm使用教程详解 Webstorm垂直分栏、左右分栏 Webstorm 主题、背景、颜色等设置的导入导出 使用WebStorm开发web前端 网页中文乱码问题的解决方案 Webstorm 主题、背景、颜色等设置的导入导出 1、...
  • webstorm使用入门指南

    2016-09-08 10:11:00
    webstorm8.0.3中文汉化版下载:百度网盘下载:...一、webstorm的功能 1、webstorm的智能的代码补全: 支持不同浏览器的提示,还包括所有用户自定义的函数(项目中) ...
  • WebStorm使用快速入门

    2020-02-09 21:23:18
    WebStorm使用快速入门 WebStorm建立在开源IntelliJ平台之上,JetBrains已经开发和完善了超过15年。其提供了统一的UI,可与许多流行的版本控制系统配合使用,确保在git,GitHub,SVN,Mercurial和Perforce之间提供...
  • webstorm 入门指南You want to make extra money on the side, so you looked into several online business ideas and decided that creating an online store is the way to go. 您希望从一边赚更多的钱,所以您...
  • 工程和界面—Webstorm入门指南 Webstorm中的工程

    万次阅读 多人点赞 2016-09-11 23:45:15
    1.新建工程 “Quick Start”界面新建工程: ... 弹出如下界面: ...“Location”指向想要创建的工程目录(如果该...“Project Type”为工程类型,应该理解为工程模版更合适,默认为空项目,Webstorm支持html5、bootstra
  • Webstorm 超实用入门教程

    千次阅读 2017-08-13 00:39:00
    这里的意思是之前使用Webstorm ,并且配置过,Webstorm 配置信息可以起到优化性能的作用,因为它本身是个比较吃内存的东西,文件多了容易卡顿,可以通过在配置文件中得到优化,后面单独介绍优化。 剧透:...
  • webstorm软件使用快速入门+使用技巧

    千次阅读 2018-03-05 16:50:43
    原文链接:http://blog.csdn.net/kongjiea/article/details/48262851WebStorm混搭svnWebStorm混搭nodeJS 以less和uglify-js为例 如何用npm在root中下载模块 ---------------------------------------------------...
  • rename后观察iml文件名的变化 settings 常用设置 Exit 退出Webstrom 常用操作 鼠标划到编辑区的右上角,会显示出一排浏览器的图标,如果你电脑中安装了相应的浏览器,webstorm会自动关联它,在你想看当前文档的效果...
  • WebStrom档案   用途:功能强大的前端专用IDE,拥有即时编辑(chrome)、自动完成、debugger、Zen Coding、HTML5 支持、JSLint、Less支持、CoffeeScript支持、Node.JS、单元...Idea、 PhpStorm、Webstorm三...
  • 很多人第一眼喜欢上idea或Webstorm,是其拥有非常强大的自动提示功能(js中的自动提示准确率和范围远远高过其他编辑器)。 但javascript太灵活了,又是弱类型语言,提示的准确度和详细度依然是个问题(比如,一个带...
  • webstorm使用教程(个人学习日志)

    万次阅读 2017-05-10 11:09:31
    Webstorm被许多从业前端工作者奉为“神器”,其强大的文本编辑和功能支持为前端开发工作节省了不少功夫。以下是个人的学习日志,其中有些部分源于其他博客或者论坛会附上说明,全文仅供参考,随时更新。
  • 转-Webstorm 超实用教程

    2018-06-27 17:18:00
    Webstorm 启动缓慢,操作卡顿优化。 2017年10月22日(三.7) Webstorm 配置 Less 自动转译 CSS。 2017年11月2日 Webstorm 配置 File Types,使微信小程序代码高亮显示。(三.9) 2017年...
  • git入门教程(WebStorm)

    2020-05-11 14:54:02
    详细git使用教程 创建SSH Key的详细过程 初始化 git init 本地库初始化 git config (–global) user.name ‘[username]’ 设置(系统)项目级别用户名 git config (–global) user.email '[email-name]'设置...
  • 首先,必须声明一下笔者使用的软件版本: 前端开发工具:WebStorm 11.0.3 辅助插件:ext-5.0.0-gpl 以上工具包括下面的代码我已经打包上传在此处了:点击打开链接   先上代码,再废话: <!DOCTYPE ...
  • Webstorm基础教程

    千次阅读 2019-05-15 19:59:35
    说一下使用Webstorm的原因,在此之前,我一直使用的是HBuilder编辑器,最近使用小程序框架mpvue开发,由于微信开发者工具对vue不太友好,vue编写界面无法查看,大家就推荐了Webstorm。 于是,使用了大家推荐的这一款...
  • 新手必备webstorm安装教程

    千次阅读 2019-02-22 11:45:45
    接下来我们看一下webstorm的安装 1.首先下载webstrom安装包 这个安装包在网上很好找 点击.exe文件 破解为长期有效的webstrom/IDEA license server 2018 1.复制下方activation code,直接粘贴在webstorm的...
  • 【CreateJS】WebStorm+Adobe Animate CC 搭配开发HTML5,入门教程-附件资源
  • WebStorm 初步使用 & HTML5 学习报告

    万次阅读 多人点赞 2018-04-15 14:28:12
    WebStorm 初步使用WebStorm介绍WebStorm是Jetbrains公司旗下的一款JavaScript开发工具,因其界面简洁,操作方便,被广大国内JS开发者誉为“Web前端开发神器”。WebStorm具有智能代码补全、代码格式化、html提示、...
  • stylus特点 富于表现力、具有健壮性、功能丰富、动态编码 不需要写CSS的冒号、分号、大括号 和LESS、SASS功能类似,会这些的入手很快 安装 ...使用 想将assets/css目录下的所有.styl文件编译成css怎...
  • Webstorm安装及使用

    千次阅读 2019-09-03 23:17:53
    Webstorm(官网下载) 是专用于web开发的号称最好的的编辑器,界面美观大方,有黑、白和经典三大主题可选,使用起来整体感觉良好。 对于这些市面五花八门下载渠道,大家最好还是在官方网站进行工具获取并下载,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,646
精华内容 658
关键字:

webstorm入门使用教程