精华内容
下载资源
问答
  • 资源名称:Javascript开发工具WebStorm教程用户界面简介 中文WORD版   内容简介: 本文档主要讲述的是Javascript开发工具WebStorm教程:用户界面简介;WebStorm是一款优秀的...
  • 概述:WebStorm是一款优秀的JavascriptIDE,在本文...JavaScript开发工具WebStorm教程:用户界面简介JavaScript开发工具WebStorm教程:WebStorm工具窗口JavaScript开发工具WebStorm教程:配置个人文件编码JavaScript
    概述:WebStorm是一款优秀的JavascriptIDE,在本文中将简要介绍一下WebStorm的用户界面,帮助用户通过自己的工作环境找到合适的工作方式。

        WebStorm是一款优秀的Javascript IDE,在本文中将简要介绍一下WebStorm的用户界面,帮助用户通过自己的工作环境找到合适的工作方式。

        当用户第一次运行WebStorm或者没有打开项目,在WebStorm显示的欢迎屏幕上,可以快速访问的主要入口点。当打开了一个项目的时候,WebStorm会显示主窗口,该窗口有六个逻辑领域,分别是菜单 、工具栏 、导航栏、状态栏 、编辑器、WebStorm 工具窗口,如下图所示,图中已用红色的标签标示:

    JavaScript开发工具WebStorm教程:用户界面简介

    欢迎界面

        在WebStorm显示的欢迎界面上,这时还没有项目打开。从这个屏幕上,你可以快速访问WebStorm的主要起始点。当你在WebStorm唯一实例中关闭当前项目时,就会出现欢迎界面。如果说你正在运行多个项目的话,关闭一个项目将会导致关闭项目运行的WebStorm窗口,除了最后一个。

    JavaScript开发工具WebStorm教程:用户界面简介

    菜单和工具栏

        WebStorm的菜单和工具栏可以执行多种命令,在里面包含了影响整个项目或极大部分的命令,此外上下文敏感的弹出式菜单,帮助用户更好的执行命令,这个是特定于一个项目的,就像源文件、类等。几乎每个命令都有一个关联的键盘快捷键,可以更快的访问命令。

    JavaScript开发工具WebStorm教程:用户界面简介

    导航栏

        导航栏是一个快速的项目视图替代,使用这个工具可以导航项目和打开用于编辑的文件。

    JavaScript开发工具WebStorm教程:用户界面简介

    状态栏

        WebStorm的状态栏主要是显示当前IDE的状态,如下:

    JavaScript开发工具WebStorm教程:用户界面简介

    本文地址:http://www.evget.com/article/2013/6/24/19100.html

    展开全文
  • [ 工具 ] - WebStorm教程

    2018-03-04 17:11:06
    致谢原作者:本文转载于:http://blog.csdn.net/ZGhekuiwu/article/details/54382145WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具:任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类...

    致谢原作者:本文转载于:http://blog.csdn.net/ZGhekuiwu/article/details/54382145

    WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具:

    1. 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的 * 的。
      好处:省去了ctrl + s之后,在结合Firefox的vim,基本不动鼠标就可以看到结果页面了。 
      坏处:没有以前的 * 标识,万一键盘误操作也会被立即存储。

    2. 任何一个编辑器只要文件关闭了就没有历史记录了,但是webstorm有。 vcs->Local History -> Show History(快捷键:ALT+~ -〉7)
      好处:只要webstorm不关闭,你的文件随时可以返回到之前的操作(这也是为啥在 webstorm 里ctrl+y是删除一行的原因了)。
      坏处:webstorm关闭重启后这些历史记录就没有了;还有一个坏处就是由此带来的内存消耗也必然比较大。

    3. 任何一个编辑器,除了服务器svn之外,没有本地版本,但是webstorm提供一个本地文件修改历史记录(快捷键:ALT+SHIFT+c,Mac中 ALT+Option+c)。也可以 Ctrl + E 弹出最近打开的文件。
      好处:相当于本地svn。 
      坏处:内存消耗也必然比较大。

    4. 集成了zencoding,HTML5,ftp,即时编辑(chrome),自动完成,基于Mozilla的JavaScript调试器,JSLint、Less支持、CoffeeScript支持、Node.js、单元测试、集成Git和svn版本控制等特性。

    5. 在编写CSS中,会智能的提示各种文件以及图片的路径,就不用再去确认这个文件是否存在了。

    其他的特性就介绍了,想了解更多可以去webstrom官网继续寻找。看完了这么介绍以及那么多给力的特性,是不是有种冲动马上试一试这款传说中的前端神器啊?嗯。

    首先在官方下载页下载webstrom后,点击安装,然后一直下一步,最后会出现需要注册码界面,因为webstrom是商业的IDE,而天朝的屌丝前端当然没那么钱去买那么昂贵的神器了,不用担心,我们可以用WebStorm的密钥来学习使用这款前端神器。嘿嘿~~~~

    安装成功后,肯定会有些不适,就像我一样觉得这配色真的太戳了。还有一些设置也不是我也要的。那么以下我就列出我习惯的设置。

    webstorm设置技巧

    • 如何更改主题(字体&配色):
      File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址

    • 如何让webstorm启动的时候不打开工程文件:
      File -> Settings->General去掉Reopen last project on startup.

    • 如何完美显示中文:
      File -> Settings->Appearance中勾选Override default fonts by (not recommended),设置Name:NSimSun,Size:12

    • 如何显示行号:
      File -> Settings->Editor,”Show line numbers”打上勾,就显示行号了

    • 如何代码自动换行:
      File -> settings -> Editor “Use Soft Wraps in editor” 打上钩,代码就自动换行了

    • 如何点击光标,显示在本行末尾:
      File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。

    • 如何修改快键键:
      File -> Settings->Keymap,然后双击要修改快捷的功能会有提示框出来,按提示操作

    • 换成自己熟悉编辑器的快键键:
      File ->Settings->Keymap,支持像Visual Studio、Eclipse、NetBeans这样的主流IDE。

    • javascript类库提示。 
      File -> settings -> Javascript -> Libraries -> 然后在列表里选择自己经常用到的javascript类库,最后Download and Install就ok了.

    • 在开发js时发现,需要ctrl + return 才能选候选项: 
      File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改为 “Always”

    • js提示比较迟缓
      File -> Code Completion -> Autopopup in 下 1000改为0

    • git配置:
      File -> settings -> Editor -> github,进去改github的账户,如果没有git则不需要.

    • 插件安装:
      File ->plugins,然后就选择给力的插件们再安装.(“css-X-fire”插件,用于当使用firebug修改css属性时,编辑器内的css代码也会发生变化。)

    • 以后更新

    webstorm使用心得

    • 收藏夹功能:
      当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单

    • 面包屑导航:
      除了左侧的工程页面,可以选择目录之外,在顶部菜单下有一个类似网站面包屑导航一样的目录也可以实现相同功。点击每个目录就会有下拉菜单显示其下的子目录,很实用.

    • 构造器界面:
      注释符合格式的话就会出现。如果是js文件则是js类的函数和对象;css文件的话则是这个css文件的概括;html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性.

    • todo界面:
      给代码加todo注释就会出现这个界面

    • 双栏代码界面:
      右击代码选项卡上的文件,然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏)

    • 本地历史功能:
      找回代码的好办法

    WebStorm集成git使用

    webstorm中只集成了git的常用操作,并不能完全替代命令行工具。在界面的右下角可以查看处于哪个git分支。也可以在上面点击切换或者新建分支。

    • 查看当前代码与版本库代码的差异:
      右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。

    webstorm快捷键说明

    Editing编辑相关快捷键

    • Ctrl + Space:
      Basic code completion (the name of any class, method or variable) 基本代码完成(任何类、函数或者变量名称),改为Alt+S

    • Ctrl + Shift + Enter:
      Complete statement 补全当前语句

    • Ctrl + P:
      Parameter info (within method call arguments) 参数信息 包括方法调用参数

    • Ctrl + mouse over code
      Brief Info 简单信息

    • Ctrl + F1
      Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息

    • Alt + Insert
      Generate code…(Getters, Setters, Constructors)新建一个文件或者生成代码,…构造函数,可以创建类里面任何字段的getter与setter方法

    • Ctrl + O
      Override methods 重载方法

    • Ctrl + I
      Implement methods 实现方法

    • Ctrl + Alt + T
      Surround with…(if, else, try, catch, for, etc)用 * 来围绕选中的代码行,( * 包括 if 、 while 、 try catch 等)

    • Ctrl + /
      Comment/uncomment with line comment 行注释/取消行注释

    • Ctrl + Shift + /
      Comment/uncomment with block comment 块注释/取消块注释

    • Ctrl + W
      Select successively increasing code blocks 选择代码块,一般是增量选择

    • Ctrl + Shift + W
      Decrease current selection to previous state 上个快捷键的回退,减量选择代码

    • Alt + Q
      Context info 上下文信息

    • Alt + Enter
      Show intention actions and quick-fixes 意图行动,快速见效

    • Ctrl + Alt + L
      Reformat code 根据模板格式对代码格式化

    • Tab/ Shift + Tab
      Indent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理

    • Ctrl + X or Shift + Delete
      Cut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板

    • Ctrl + C or Ctrl + Insert
      Copy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板

    • Ctrl + V or Shift + Insert
      Paste from clipboard 粘贴剪切板上的内容

    • Ctrl + Shift + V
      Paste from recent buffers 粘贴缓冲器中最新的内容

    • Ctrl + D
      Duplicate current line or selected block 复制当前行或者所选代码块

    • Ctrl + Y
      Delete line at caret 删除光标所在位置行

    • Ctrl + Shift + J
      Smart line join(HTML and JavaScript only)加入智能行 (HTML 和JavaScript)

    • Ctrl + Enter
      Smart line split(HTML and JavaScript only)分离智能行 (HTML 和JavaScript)

    • Shift + Enter
      Start new line 另起一行

    • Ctrl + Shift + U
      Toggle case for word at caret or selected block 光标所在位置大小写转换

    • Ctrl + Shift + ]/[
      Select till code block end/start 选择直到代码块结束/开始

    • Ctrl + Delete
      Delete to word end 删除文字结束

    • Ctrl + Backspace
      Delete to word start 删除文字开始

    • Ctrl + NumPad+/-
      Expand/collapse code block 扩展/缩减代码块

    • Ctrl + Shift+ NumPad+
      Expand all 扩张所有

    • Ctrl + Shift+ NumPad-
      Collapse 缩减所有

    • Ctrl + F4
      Close active editor tab 关闭活跃编辑标签

    Search/replace搜索/替代相关快捷键

    • Ctrl + F 
      Find 当前文件内快速查找代码

    • Ctrl + Shift + F 
      Find in path 指定文件内寻找路径

    • F3 
      Find next 查找下一个

    • Shift + F3 
      Find previous 查找上一个

    • Ctrl + R 
      Replace 当前文件内代码替代

    • Ctrl + Shift + R 
      Replace in path 指定文件内代码批量替代

    Usage Search搜索相关快捷键

    • Alt + F7/Ctrl + F7 
      Find usages/Find usages in file 找到使用/在文件找到使用

    • Ctrl + Shift + F7 
      Highlight usages in file文件中精彩使用

    • Ctrl + Alt + F7 
      Show usages 显示使用

    Running运行

    • Alt + Shift + F10 
      Select configuration and run 选择构架,运行

    • Alt + Shift + F9 
      Select configuration and debug 选择构架,修补漏洞

    • Shift + F10 
      Run 运行

    • Shift + F9 
      Debug 修补漏洞

    • Ctrl + Shift + F10 
      Run context configuration from editor 从编辑运行内容构架

    • Ctrl + Shift + X 
      Run command line 运行命令行

    Debugging Debugging相关快捷键

    • F8 
      Step over 不进入函数

    • F7 
      Step into 单步执行

    • Shift + F7 
      Smart step into 智能单步执行

    • Shift + F8 
      Step out 跳出

    • Alt + F9 
      Run to cursor 运行到光标处

    • Alt+ F8 
      Evaluate expression 评估表达

    • F9 
      Resume program 重新开始程序

    • Ctrl + F8 
      Toggle breakpoint 切换断点

    • Ctrl + Shift + F8 
      View breakpoints 查看断点

    Navigation 定位相关快捷键

    • Ctrl + N 
      Go to class跳转到指定类

    • Ctrl + Shift + N 
      Go to file 通过文件名快速查找工程内的文件

    • Ctrl + Alt +Shift + N 
      Go to symbol 通过一个字符查找函数位置

    • Alt + Right/ left 
      Go to next/ previous editor tab 进入下一个/ 上一个编辑器选项

    • F12 
      Go back to previous tool window 进入上一个工具窗口

    • Esc 
      Go to editor(from tool window) 从工具窗口进入编辑器

    • Shift + Esc 
      Hide active or last active window 隐藏活动窗口

    • Ctrl + Shift + F4 
      Close active run/message/find/…tab 关闭活动….标签

    • Ctrl + G 
      Go to line 跳转到第几行

    • Ctrl + E 
      Recent files popup 弹出最近打开的文件

    • Ctrl + Alt + Left/Right 
      Navigate back/forward 导航前进/后退

    • Ctrl + Shift + Backspace 
      Navigate to last edit location 向最近编辑定位导航

    • Alt + F1 
      Select current file or symbol in any view 查找当前选中的代码或文件在其他界面模块的位置

    • Ctrl + B or Ctrl + Click 
      Go to declaration跳转到定义处

    • Ctrl + Alt + B 
      Go to implementation(s) 跳转方法实现处

    • Ctrl + Shift + B 
      Go to type declaration 跳转方法定义处

    • Ctrl + Shift + I 
      Open quick definition lookup 打开定义快速查找

    • Ctrl + U 
      Go to super-method/super-class 跳转方法/超阶级

    • Alt + Up/Down 
      Go to previous/next method 在方法间快速移动定位

    • Ctrl + ]/[ 
      Move to code block end/start 跳转到编码块结束/开始

    • Ctrl + F12 
      File structure popup 文件结构弹出

    • Ctrl + H 
      Type hierarchy 类型层次

    • Ctrl + Alt + H 
      Call hierarchy 调用层次结构

    • F2/ Shift + F2 
      Next/previous highlighted error 跳转到后一个/前一个错误,高亮错误或警告快速定位,使用这个快捷键可以快捷在出错的语句之间进行跳转。

    • F4/Ctrl + Enter 
      Edit source/ View source 编辑源代码/查看源代码

    • Alt + Home 
      Show navigation bar 显示导航栏

    • F11 
      Toggle bookmark 切换标记

    • Ctrl + F11 
      Toggle bookmark with mnemonic 采用记忆切换标记

    • Ctrl + #[0-9] 
      Go to numbered bookmark 跳转到带编号的标记

    • Shift + F11 
      Show bookmark 显示标记

    Refactoring 重构相关快捷键

    • F5
      Copy 拷贝

    • F6 
      Move 移动

    • Alt + Delete 
      Safe Delete 安全删除

    • Shift + F6 
      Rename 重新命名

    • Ctrl + Alt + N 
      Inline Variable 嵌入变量

    • Ctrl + Alt + M 
      Extract Method( Javascript only) 提取函数

    • Ctrl + Alt + V 
      Introduce Variable 引入变量

    • Ctrl + Alt + F 
      Introduce Field 引入域

    • Ctrl + Alt + C 
      Introduce Constant 引入常量

    VCS/Local History 版本控制系统/ 本地历史相关快捷键

    • Alt + BackQuote( ) 
      ‘VCS’quick popup 快速弹出 VCS

    • Ctrl + K 
      Commit project to VCS 提交项目至VCS

    • Ctrl + T 
      Update project from VCS 从VCS 更新项目

    • Alt + Shift + C 
      View recent changes 查看最新改变

    General 常用的相关快捷键

    • Ctrl + Shift +A 
      Find action 查找并调用编辑器的功能

    • Alt + #[0-9] 
      Open corresponding tool window 快速切换打开界面模块

    • Ctrl + Alt + F11 
      Toggle full screen mode 切换全屏模式

    • Ctrl + Shift + F12 
      Toggle maximizing editor 切换最大化编辑器

    • Alt + Shift + F 
      Add to Favorites 将当前文件添至收藏夹

    • Alt + Shift + I 
      Inspect current file with current profile 使用当前属性检查当前文件

    • Ctrl + BackQuote( ) 
      Quick switch current scheme 快速转换现有组合

    • Ctrl + Alt + S 
      Open setting dialog 打开设置对话框

    • Ctrl + Tab 
      Switch between tabs and tool window 标签和工具窗的转换(与windows快捷键冲突)


    展开全文
  • WebStorm是一款优秀的Javascript IDE,下面是WebStorm的用户界面和使用教程。 当用户第一次运行WebStorm或者没有打开项目,在WebStorm显示的欢迎屏幕上,可以快速访问的主要入口点。当打开了一个项目的时 候,...

       WebStorm是一款优秀的Javascript IDE,下面是WebStorm的用户界面和使用教程。

        当用户第一次运行WebStorm或者没有打开项目,在WebStorm显示的欢迎屏幕上,可以快速访问的主要入口点。当打开了一个项目的时 候,WebStorm会显示主窗口,该窗口有六个逻辑领域,分别是菜单 、工具栏 、导航栏、状态栏 、编辑器、WebStorm 工具窗口,如下图所示,图中已用红色的标签标示:

    JavaScript开发工具WebStorm教程:用户界面简介

    下面是搜集的一些WebStorm的使用教程
      JavaScript开发工具WebStorm教程:创建和优化导入
     JavaScript开发工具WebStorm教程:IntelliLang使用示例
     JavaScript开发工具WebStorm教程:配置个人文件编码
     JavaScript开发工具WebStorm教程:WebStorm工具窗口
      JavaScript开发工具WebStorm教程:用户界面简介
     JavaScript开发工具WebStorm教程:如何调试WebStorm
     Web前端开发工具WebStorm 6.0正式版中文更新说明

    >>WebStorm 6 下载

    转载于:https://www.cnblogs.com/123max/p/3183911.html

    展开全文
  • WebStorm教程--生成文件关系图

    千次阅读 2018-01-05 10:36:02
    本人现在用的webstorm版本是2017.3.3;最近发现一个很强大的功能:Diagrams.利用这个功能,可以快速的生成指定文件夹下面的结构关系图;帮助我们阅读代码; 具体操作如下:在Project面板中邮件点击任一文件夹或文件,在...

    本人现在用的webstorm版本是2017.3.3;最近发现一个很强大的功能:Diagrams.利用这个功能,可以快速的生成指定文件夹下面的结构关系图;帮助我们阅读代码;

    具体操作如下:在Project面板中邮件点击任一文件夹或文件,在倒数第二个选项中依次点击Diagrams →show Diagram,如下图,然后就是等待状态;等待加载完成就可以看了



    点击上面的每个框选中,等鼠标指针编程十字的时候,就可以拖动改变模块的位置了;

    工具栏 菜单如下:

    从左到右依次为:切换视图,放大,缩小,恢复默认比例;适合当前窗口,使用当前布局,保存,导出(导出支持常见的图片格式);打印等


    tips : 如果项目视图比较负责,图片显示比较密集,可以按住Alt键可以使用放大镜功能.

    展开全文
  •  对于使用的不用的操作系统对WebStorm更改一下设置,能够在更大的程度上提升效率。 >> Windows 系统设置 >> *NIX 系统设置 >> Mac操作系统设置   Unicode文本的管理设置 在WebStorm允许定义非ascii...
  • WebStorm可以对XSLT很好的支持,包括完成、文件关联、映射、以及错误高亮显示等,本文主要来看一下它的完成和关联功能。 Code Completion  WebStorm中Code Completion是一个重要的功能,插件提供了完成关键字、...
  • 通常情况下,有两种处理文件编码的方法,一种是转换,一种是重载,具体如下: 转换:编辑器中内同用不同的编码进行存储。...WebStorm提供了下列更改编码的主要方法: 对不包含编码信息的目录和
  • WebStorm使用教程

    万次阅读 2019-05-21 16:40:39
    WebStorm使用教程 Webstorm安装、破解、使用 webstorm的安装及基本配置 WebStorm安装与使用 webstorm的安装及基本配置 WebStorm安装教程 webstorm详细安装教程 Webstorm 超实用教程 Webstorm安装和配置 webstorm2019...
  • WebStorm汉化教程

    千次阅读 2020-09-08 10:55:37
    我是第一次下载WebStorm,想在百度上寻找汉化方法,没想到没有教程,然后我想,既然它和idea是一家的,那么idea的汉化方法应该有用。 1、先打开WebStorm,打开File中的settings 2、然后选择plugins,在右边选中...
  • WebStorm安装教程

    2020-03-11 14:18:00
    WebStorm官网地址:http://www.jetbrains.com/webstorm/ 去官网下载最新版本进行安装. 下载之后进行安装 启动软件
  • WebStorm汉化教程-附件资源
  • Webstorm基础教程

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

    2018-04-02 21:26:51
    WebStorm软件安装教程: 建议官网下载,打开官方网址:https://www.jetbrains.com/webstorm/,选择windows,点击“Download”。 下载路径您老随意。 选择“license server”,然后输入:http://idea.imsxm.com/,...
  • webstorm使用教程

    2017-12-12 17:22:00
    Webstorm 超实用配置教程 原文来自:http://www.jianshu.com/p/4ce97b360c13 一、下载安装包 Webstorm 2017.1.4 百度云盘下载地址:https://pan.baidu.com/s/1kVqoPJh 二、安装过程(包含输入注册码永久使用) ...
  • WebStorm 破解教程

    2019-01-28 16:12:14
    其实JetBrains的公司全系列都可用的此种方式...打开WebStorm的安装目录(不知道的可以右键看属性 - >打开文件所在的位置)   接下来编辑这个文件webstorm64.exe.vmoptions 保存之后双击打开桌面的web...
  • webstorm安装教程

    2019-02-24 19:12:09
    安装教程可参考https://blog.csdn.net/Lj02290326gs/article/details/82418826 大致步骤是: 第一步:.... ...破解为长期有效的webstrom/IDEA license ...复制下方activation code,直接粘贴在webstorm的activation co...
  • Webstorm使用教程

    千次阅读 2017-10-27 09:55:52
    Webstrom使用Mark一个实用的... 下载主题文件后,然后再webstorm里面,file->important setting引入文件安装即可。我的webstorm版本是2017.1.4.顺便贴一下我的配色方案: 粉色!! 2、设置好以后,再设置字体,file->
  • Webstorm 安装教程

    千次阅读 2018-10-26 23:59:12
    Webstorm是专用于web开发的号称最好的的编辑器,界面美观大方,有黑、白和经典三大主题可选,使用起来整体感觉良好,破解也不是很麻烦。 一、安装 1.去官网下载正版安装包(建议所有软件都去官网下载安装包,这样...
  • webstorm激活教程

    2018-09-19 21:24:00
    虽然webStorm,phpStorm以及jetbrains系列的很好用,但是每隔一段时间就需要激活一下,这样太费劲了,今天军哥给大家推荐一个永久激活的办法 此教程适用于jetbrains 的所有系列的软件 1.下载安装软件,去官网...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 701
精华内容 280
关键字:

webstorm教程