【捷训Handlebars.js视频教程】004-Handlebars模板_土豆_高清视频在线观看【WebStorm】工具开发webstrom
来自&&[size=24px]WebStorm混搭nodeJS[color=rgb(51, 51, 51)][size=12.5px]& & 以less和uglify-js为例[color=rgb(51, 51, 51)][size=12.5px]& & 如何用npm在root中下载模块 [color=rgb(51, 51, 51)][size=12.5px]----------------------------------------------------------------------------------------------【[size=12px]】webstorm简单介绍[color=rgb(51, 51, 51)][size=12.5px]官网地址：[size=12px][color=rgb(51, 51, 51)][size=12.5px]参考地址：[size=12px][color=rgb(51, 51, 51)][size=12.5px]欲先善其事，必先利其器，如题。看到网上一篇介绍webstrom的文章，觉得功能确实强大，也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件，（传说淘宝内部推荐写js用webstrom）[color=rgb(51, 51, 51)][size=12.5px]我们可以理解 IDE 就是集成了很多你想要的功能，或者你不想要的功能。换句话说就是装了很多插件的 editor ，所以到目前为止，我还觉得没必要给它装什么插件。[color=rgb(51, 51, 51)][size=12.5px]那么接下来开始介绍webstrom的特色功能：[color=rgb(51, 51, 51)][size=12.5px][size=12px][color=rgb(51, 51, 51)][size=12.5px]WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具[list=1][*]任何一个编辑器都需要保存(ctrl + s)，这是所有win平台上编辑类软件的特点，但是webstorm编辑文件右上角是没有那个熟悉的 * 的。好处：省去了ctrl + s之后，在结合Firefox的vim，基本不动鼠标就可以看到结果页面了。 坏处：没有以前的 * 标识，万一键盘误操作也会被立即存储。[*]任何一个编辑器只要文件关闭了就没有历史记录了，但是webstorm有。 vcs-&Local History -& Show History（快捷键：ALT+~ -〉7）好处：只要webstorm不关闭，你的文件随时可以返回到之前的操作（这也是为啥在 webstorm 里ctrl+y是删除一行的原因了）。坏处：webstorm关闭重启后这些历史记录就没有了；还有一个坏处就是由此带来的内存消耗也必然比较大。[*]任何一个编辑器，除了服务器svn之外，没有本地版本，但是webstorm提供一个本地文件修改历史记录（快捷键：ALT+SHIFT+c，Mac中 ALT＋Option＋c）。也可以 Ctrl + E 弹出最近打开的文件。好处：相当于本地svn。 坏处：内存消耗也必然比较大。[*]集成了zencoding，html5，ftp，即时编辑（chrome）,自动完成,基于Mozilla的JavaScript调试器，JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn版本控制等特性。[*]在编写CSS中，会智能的提示各种文件以及图片的路径，就不用再去确认这个文件是否存在了。[/list][color=rgb(51, 51, 51)][size=12.5px]其他的特性就介绍了，想了解更多可以去[size=12px]继续寻找。看完了这么介绍以及那么多给力的特性，是不是有种冲动马上试一试这款传说中的前端神器啊？嗯。[color=rgb(51, 51, 51)][size=12.5px]首先在[size=12px]下载webstrom后，点击安装，然后一直下一步，最后会出现需要注册码界面，因为webstrom是商业的IDE，而天朝的屌丝前端当然没那么钱去买那么昂贵的神器了，不用担心，我们可以用[size=12px]来学习使用这款前端神器。嘿嘿~~~~[color=rgb(51, 51, 51)][size=12.5px]安装成功后，肯定会有些不适，就像我一样觉得这配色真的太戳了。还有一些设置也不是我也要的。那么以下我就列出我习惯的设置。webstorm设置技巧[list][*]如何更改主题（字体&配色）:File -& settings -& Editor -& colors&fonts -& scheme name.[size=12px][*]如何让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代码也会发生变化。）[*]以后更新[/list]webstorm使用心得[list][*]收藏夹功能:当工程目录很庞大时，有些子目录很经常打开，但层级又很深，这时候可以把目录添加到收藏夹里面，添加成功后，左侧有个“Favorites”菜单[*]面包屑导航：除了左侧的工程页面，可以选择目录之外，在顶部菜单下有一个类似网站面包屑导航一样的目录也可以实现相同功。点击每个目录就会有下拉菜单显示其下的子目录，很实用.[*]构造器界面:注释符合格式的话就会出现。如果是js文件则是js类的函数和对象；css文件的话则是这个css文件的概括；html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性.[*]todo界面：给代码加todo注释就会出现这个界面[*]双栏代码界面：右击代码选项卡上的文件，然后右键 -& spilt vertically(左右两屏)或者spilt horizontally(上下两屏)[*]本地历史功能:找回代码的好办法[/list]WebStorm集成git使用[color=rgb(51, 51, 51)][size=12.5px]webstorm中只集成了git的常用操作，并不能完全替代命令行工具。在界面的右下角可以查看处于哪个git分支。也可以在上面点击切换或者新建分支。[list][*]查看当前代码与版本库代码的差异:右击代码界面任意区域，选择git -& compare with然后选择要比较的版本库。[/list]webstorm快捷键说明[color=rgb(51, 51, 51)][size=12.5px]Editing编辑相关快捷键[list][*]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 codeBrief Info 简单信息[*]Ctrl + F1Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息[*]Alt + InsertGenerate code…（Getters, Setters, Constructors）新建一个文件或者生成代码，…构造函数，可以创建类里面任何字段的getter与setter方法[*]Ctrl + OOverride methods 重载方法[*]Ctrl + IImplement methods 实现方法[*]Ctrl + Alt + TSurround 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 + WSelect successively increasing code blocks 选择代码块，一般是增量选择[*]Ctrl + Shift + WDecrease current selection to previous state 上个快捷键的回退，减量选择代码[*]Alt + QContext info 上下文信息[*]Alt + EnterShow intention actions and quick-fixes 意图行动，快速见效[*]Ctrl + Alt + LReformat code 根据模板格式对代码格式化[*]Tab/ Shift + TabIndent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理[*]Ctrl + X or Shift + DeleteCut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板[*]Ctrl + C or Ctrl + InsertCopy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板[*]Ctrl + V or Shift + InsertPaste from clipboard 粘贴剪切板上的内容[*]Ctrl + Shift + VPaste from recent buffers 粘贴缓冲器中最新的内容[*]Ctrl + DDuplicate current line or selected block 复制当前行或者所选代码块[*]Ctrl + YDelete line at caret 删除光标所在位置行[*]Ctrl + Shift + JSmart line join（HTML and JavaScript only）加入智能行 （HTML 和JavaScript）[*]Ctrl + EnterSmart line split（HTML and JavaScript only）分离智能行 （HTML 和JavaScript）[*]Shift + EnterStart new line 另起一行[*]Ctrl + Shift + UToggle case for word at caret or selected block 光标所在位置大小写转换[*]Ctrl + Shift + ]/[Select till code block end/start 选择直到代码块结束/开始[*]Ctrl + DeleteDelete to word end 删除文字结束[*]Ctrl + BackspaceDelete to word start 删除文字开始[*]Ctrl + NumPad+/-Expand/collapse code block 扩展/缩减代码块[*]Ctrl + Shift+ NumPad+Expand all 扩张所有[*]Ctrl + Shift+ NumPad-Collapse 缩减所有[*]Ctrl + F4Close active editor tab 关闭活跃编辑标签[/list][color=rgb(51, 51, 51)][size=12.5px]Search/replace搜索/替代相关快捷键[list][*]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 指定文件内代码批量替代[/list][color=rgb(51, 51, 51)][size=12.5px]Usage Search搜索相关快捷键[list][*]Alt + F7/Ctrl + F7 Find usages/Find usages in file 找到使用/在文件找到使用[*]Ctrl + Shift + F7 Highlight usages in file文件中精彩使用[*]Ctrl + Alt + F7 Show usages 显示使用[/list][color=rgb(51, 51, 51)][size=12.5px]Running运行[list][*]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 运行命令行[/list][color=rgb(51, 51, 51)][size=12.5px]Debugging Debugging相关快捷键[list][*]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 查看断点[/list][color=rgb(51, 51, 51)][size=12.5px]Navigation 定位相关快捷键[list][*]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 显示标记[/list][color=rgb(51, 51, 51)][size=12.5px]Refactoring 重构相关快捷键[list][*]F5Copy 拷贝[*]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 引入常量[/list][color=rgb(51, 51, 51)][size=12.5px]VCS/Local History 版本控制系统/ 本地历史相关快捷键[list][*]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 查看最新改变[/list][color=rgb(51, 51, 51)][size=12.5px]General 常用的相关快捷键[list][*]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快捷键冲突）[/list]
WebStorm要在Linux里面玩比较爽，git也是。。。所以可以装个虚拟机
sublime text3感觉也还行
&&& &不错的，以前一直用eclipse,现在在尝试使用webstrom，就是内存涨的太厉害了，一不小心就悲剧了。
100 总笔记数
5.7万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：webstrom node.js开发环境配置~~~问题.._百度知道
webstrom node.js开发环境配置~~~问题..
com/zhidao/wh%3D600%2C800/sign=ba19d8cb568c0303caaeb3/67dddab2b7d0a287b0..baidu求大神.hiphotos.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="http://d..baidu.纠结的很.hiphotos..com/zhidao/wh%3D600%2C800/sign=af2eddd4a441efbd202dd1/58ee3d6d55fbb2fb002aa44623dc40，谢谢了://d://d.baidu..hiphotos://d.这是怎么回事呢://d
提问者采纳
var hello = require('：var user = require('，调用是否需要在后面加后缀;user’);！&调用到了，利用ws开发调试nodejs生活将变得很轻松。ws本身对nodejs有良好的支持，[nodejs]使用神器webstorm调试nodejs还在终端敲命令，即.js.log(& User.User = User.setHello = function(){ Hello.User：var user = require(‘.setHello()、第二种。1);第一种方式跟第二种的区别在于是否覆盖了exports.exports = H 成功调用，定位到文件夹然后)。所以我们一般都是有第二种方法：function User(){}./}调用方式;);); .setName = function(){user'，可以有两种方式;hello'，只需要一个快捷键而已./? 你out了。现在我们有更好的调试nodejs方式为什么不去使用呢.User./2).User.setName();).log("。如果你想对外暴露一个类;后面的！"、第一种;
}调用方式如下：function Hello(){}您好
提问者评价
采纳的晚了，谢谢，谢谢你了哈。
其他类似问题
为您推荐：
开发环境的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁JS模板引擎Handlebars入门教程 | Hello world!小组 | 果壳网 科技有意思
125879人加入此小组
有演示有在线调试，相信对于js模板引擎有兴趣的同学会喜欢的！来源：
+ 加入我的果篮
(C)2016果壳网&&&&&京ICP备号-2&&&&&webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器_CSS教程_
webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器
来源：人气：461
webstorm+nodejs+JetBrains IDE Support+打造前端开发神器#webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器-- 工欲善其事 必先利其器##各工具介绍`webstorm`是**JetBrains**公司发布的一个web开发IDE，支持代码提示、补全、定位、与git集成等等各种功能，已经跟传统强类型语言的开发环境感觉无多大差异。`node`是一个服务端的 scrt运行环境`JetBrains IDE Support`俗称JB插件(⊙o⊙)，是一个chrome的插件。与webstorm联合使用，是沟通它俩的桥梁。各个工具独立使用可能都有人知道，但本文讲述的是把他们联合起来使用的案例。##下载安装各工具各个工具的独立安装去搜索一下即可。webstorm不是免费工具，当然，在天朝，呵呵。我机器上的是webstorm6.0.2+Node.js 0.10.17 (x64)+JetBrains IDE Support 2.0+Chrome
32.0. mJB插件安装完效果是这样的webstorm界面##关联webstorm和node在如图所示的位置中选择 **Edit Configurations**如图所示，增加一份Node.js的配置，配置好node运行程序路径，项目路径和web服务程序路径其中的**web-server.js**是`angular`的一个示例中自带的，应该有依赖，可以自己去github上克隆下来 /angular/angular-phonecat##开始使用与调试点击 **Edit Configurations**旁边的run或者debug，即可启动node，并且路径等都配置好了，不用像以前那样一个字一个字的在命令行敲。而且node的启动也很快，一秒左右即可（我的机器是4G内存），不像以前tomcat那样一大堆无聊内容。默认情况下**node是8000端口的**，chrome浏览器敲 http://localhost:8000/ 会列出工作目录下的文件（这个是web-server.js里面定义的逻辑，用其他服务程序不一定会有）。自己在webstrom中新建一个web工程即可浏览。##webstorm+nodejs+JetBrains IDE Support+chrome可能之前的调试还不算有什么亮点，但再加上JetBrains，就不一样了，在上面打开的浏览器窗口，确认地址栏右边的JB插件图标是亮的，即表示chrome和webstrom是连接着的。这时候你在webstrom中作出的任何修改（主要是HTML主文件），会立刻在浏览器中体验出来，连保存+F5刷新的动作都省下了当然客户端的JS调试还是要用浏览器的F12开发人员工具，webstrom自带的是调试服务端（node）js的功能。在开发过程中，我们经常要修改，保存，刷新。利用此套工具，综合了webstorm+nodejs+JetBrains IDE Support+angular+chrome等各部分功能，如此神器，能大大提高效率。
优质网站模板
