webstorm里直接调用命令行

最后更新于:2022-04-01 03:32:27

写代码写到一半要切换窗口出去敲命令行?webstorm的external tools可以帮你省下一点时间 举例说明,比如我要直接使用npm: ctrl+alt+s打开setting菜单,找到external tools 点+号,在tool setting里填空: program -> 外部命令所在位置,填入npm的完整路径 parameters -> 参数,这里设为 $Prompt$运行命令时表示弹个窗口让你输入 Working Directory -> 在哪个目录下运行这条命令,输入$ProjectFileDir$表示在当前项目的根目录下运行。 点右边的insert macro可以看到更多的选项,除了macro的说明,webstorm还会告诉你对应macro在当前环境下是个什么值的,不怕看不懂e文了。 ![1](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5c8b510120.png) 最后给这个命令起个名字,叫npm保存完事,在顶部菜单找到tools就可以看到刚保存的npm。点击它就会弹出个窗口,输入install express试试吧。 ![2015-08-08/55c5c8ee5c975](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5c8ee5c975.png) 输入NPM 命令 比如 ls ![2015-08-08/55c5c908d3b45](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5c908d3b45.png) ![2015-08-08/55c5c9173901a](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5c9173901a.png) 执行成功了!
';

从Git@OCS克隆项目进行开发

最后更新于:2022-04-01 03:32:25

#### **从Git@OSC克隆项目** * * * * * ![2015-08-08/55c5be25e1814](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5be25e1814.png) 运行WebStorm,选择` Check out from Version Control->Git` ![2015-08-08/55c5be901704a](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5be901704a.png) Git仓库URL输入我们之前创建的git(里面已经有了项目代码):https://git.oschina.net/caomenglong/ExpressDemo.git 点击 `Clone` ![2015-08-08/55c5bedeae814](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5bedeae814.png) 输入Git密码,点击OK 继续。 ![2015-08-08/55c5bf03f3a62](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5bf03f3a62.png) 点击Yes 将会打开项目。 ![2015-08-08/55c5bf3479dee](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5bf3479dee.png) 至此项目克隆成功,可以进行开发了。
';

将项目发布到Git@OSC

最后更新于:2022-04-01 03:32:23

Git 是我们常用的代码版本管理工具。 我们协作开发使用的是 OSChina 提供的 git 免费服务。 这篇文章将要讲解,如何使用WebStorm 将项目发布到 Git@OSC 我已经在OSC建立了一个空白的git项目` 项目创建后进入管理清空项目`。 https://git.oschina.net/caomenglong/ExpressDemo.git ![2015-08-08/55c5bb692a4f3](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5bb692a4f3.png) 我将带领大家把项目代码利用WebStorm 发布进去。 * * * * * #### **本地Git代码仓库建立** 首先需要启用项目的版本管理功能 点击VCS 启用版本控制 ![2015-08-08/55c5b33c7aee2](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b33c7aee2.png) ![2015-08-08/55c5b38868d14](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b38868d14.png) IDE底部显示本地Git代码仓库建立完毕 ![2015-08-08/55c5b39e53b3b](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b39e53b3b.png) 这时就代表这个项目已经可以使用Git版本控制了。我们再点击VCS就可以看见Git菜单了。 ![2015-08-08/55c5b44639879](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b44639879.png) 首先我们先右击项目 选择`Git->add`,将项目中的文件 加入到git add 中等待本地提交。 ![2015-08-08/55c5b493ebb92](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b493ebb92.png) add 后文件都会由`橙色`变成 `绿色` ![2015-08-08/55c5b4ba7bd02](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b4ba7bd02.png) 下一步本地提交代码,右击项目,选择 `Git->Commit` ![2015-08-08/55c5b531ea0fc](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b531ea0fc.png) ![2015-08-08/55c5b6858e6cc](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b6858e6cc.png) 点击Commit是会出现 `Performing Code Analysis `提示,有时候会很慢,这个功能是它对代码进行分析,查找错误,并提醒你是否修改。 每次提交前都要查询一次,很麻烦,可以关闭该功能。 ![2015-08-08/55c5b7c77c972](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b7c77c972.png) 取消`Performing Code Analysis `复选框即可。 ![2015-08-08/55c5b82627851](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b82627851.png) ![2015-08-08/55c5b833a479f](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b833a479f.png) ![2015-08-08/55c5b84906318](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b84906318.png) 这时本地提交成功,可以看见颜色 从 `绿色` 变成 了 `黑色` ![2015-08-08/55c5b85c912a0](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b85c912a0.png) * * * * * ### **将代码push到远程 git 仓库** 代码Pull 远程前,必须先要进行本地Commit完毕。 ![2015-08-08/55c5b95a961cb](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b95a961cb.png) 右击项目 `Git-> Repository -> Push` ![2015-08-08/55c5b9d064fc6](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b9d064fc6.png) 点击` Define remote` 设置一个远程Git 仓库 ![2015-08-08/55c5ba0bebb91](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5ba0bebb91.png) URL 输入 之前准备的 Git https://git.oschina.net/caomenglong/ExpressDemo.git ![2015-08-08/55c5ba7c3a018](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5ba7c3a018.png) 输入 Git@OSC 账号密码。 ![2015-08-08/55c5bab96416a](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5bab96416a.png) 再输入二次密码 ![2015-08-08/55c5baddb7786](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5baddb7786.png) 远程Git设置成功,点击Push 就可以了! ![2015-08-08/55c5bb4c717e3](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5bb4c717e3.png) ![2015-08-08/55c5bb9e6d065](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5bb9e6d065.png) `Push successful ` 代码Push成功! ![2015-08-08/55c5bbe30e2aa](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5bbe30e2aa.png) 到这里我们就完成了 项目代码发布到Git中了! 感谢观看
';

创建Node.js Express 项目

最后更新于:2022-04-01 03:32:20

打开WebStorm 选择创建新项目 ![2015-08-08/55c5ac33a959a](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5ac33a959a.png) 点击Create 后,会使用Express-generator 自动创建项目. 创建过程中会出现选择Node.js 源码压缩包 ![2015-08-08/55c5adbfdcc0e](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5adbfdcc0e.png) 网络会下载比较慢。我已经下载好了存放与 \\\192.168.1.218\tools ![2015-08-08/55c5ae2306ddf](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5ae2306ddf.png) 复制 `node-v0.12.7.tar.gz` 到本地硬盘,Nodejs安装目录中 ![2015-08-08/55c5ae93913d2](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5ae93913d2.png) 下面开始设置 ![2015-08-08/55c5ae5d5bf2f](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5ae5d5bf2f.png) ![2015-08-08/55c5ae6ce6572](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5ae6ce6572.png) ![2015-08-08/55c5aead69d2b](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5aead69d2b.png) ![2015-08-08/55c5af14c1c6b](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5af14c1c6b.png) 可以看见 项目已经创建成功,并且帮我们自动安装了相关 `modules ` 下面就是项目的目录结构。 ![2015-08-08/55c5b030b78d8](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b030b78d8.png) 启动项目 点击 `启动按钮`。 ![2015-08-08/55c5b057cfa10](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b057cfa10.png) 控制台提示 项目运行成功端口3000 ![2015-08-08/55c5b0889bdd0](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b0889bdd0.png) 打开浏览器访问 http://127.0.0.1:3000/ ![2015-08-08/55c5b0eabfdc4](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5b0eabfdc4.png) 到这里我们的Express 项目就创建成功了!
';

安装WebStorm

最后更新于:2022-04-01 03:32:18

WebStorm是作为JS开发IDE存在的,并且支持流行的Node.js以及JQuery等js框架。而Node.js简单说就是一个JS类库并且配备有Google的V8 js引擎来解析和执行js脚本。 那WebStorm+Node.js这样一个组合,用来开发基于Node.js平台的应用是最方便不过的了,并且可以知道WebStorm这个IDE环境对js的支持是灰常强大的,有智能提示、断点调试、查看源码等等功能。 WebStorm 下载 http://www.jetbrains.com/webstorm/ 局域网下载地址 \\\192.168.1.218\tools ![2015-08-08/55c5a62fd364e](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a62fd364e.png) 复制到自己的电脑,双击开始安装。 ![2015-08-08/55c5a669b21cc](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a669b21cc.png) ![2015-08-08/55c5a6751e29d](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a6751e29d.png) ![2015-08-08/55c5a68119df6](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a68119df6.png) ![2015-08-08/55c5a6a35f19b](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a6a35f19b.png) ![2015-08-08/55c5a6ac97eff](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a6ac97eff.png) ![2015-08-08/55c5a6b7a282a](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a6b7a282a.png) ![2015-08-08/55c5a72c3bce3](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a72c3bce3.png) 到这里 WebStorm 就安装完毕了。 ![2015-08-08/55c5a74e3413e](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a74e3413e.png) 在桌面可以找到软件,我们双击启动它。 ![2015-08-08/55c5a7e08d286](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a7e08d286.png) 需要输入授权码 ![2015-08-08/55c5a816af968](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a816af968.png) 仅供测试使用 UserName:`William ` ~~~ ===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA INauvJkeVJBuE5bqLEznccE4tet6tr RiyoMxDK8oDY93tx!ipPyGmqYYeWxS ===== LICENSE END ===== ~~~ ![2015-08-08/55c5a865b3a0f](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a865b3a0f.png) ![2015-08-08/55c5a8bd874ac](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a8bd874ac.png) 根据的习惯选择键盘布局,一般默认即可。我选择了`NetBeans` 快捷键布局。 ![2015-08-08/55c5a925af01f](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-08_55c5a925af01f.png) 下面就可以正常使用了哦!
';