windows下webstorm配置git,node.js,np

折腾了好几个小时，终于成功在webstorm中安装了git的环境，只不过windows下操作命令行还是有很大的局限的，但是暂且先用着，过段时间再安装linux的环境吧。在这里把整个流程记录下来，方便自己和他人查阅，会省很多功夫。

本文前提：
windows环境：测试系统windows7
webstorm环境：webstorm 2017.1

详细步骤：

一、git的安装和配置

1. 第一步：安装git
注意：因为windows下默认是没有git的（mac下是有的），因此需要自己安装。
下载链接：git官网
一路next就可以了，默认下载路径是C:/Program Files，演示下载路径是D:/Program Files，根据自己情况来。
2.第二步：在webstorm中配置git
打开webstorm->File->Settings->searth 输入git

1)先配置github账号，如图

1.png

2）配置git路径，如图

2.png
git.exe在你的Git目录下的bin目录下面，直接选择即可
点击apply->ok 配置完成

3）测试git

命令行键入：git --version 查看git版本号

3.png

鼓掌！！完成这些后你就在你的webstorm中成功配置git啦，你可以试试git的一些指令，可以clone下一个项目试一试可否上传到你的github。亲测是可以的，网上看到一些还要配置其他东西才能和你的github连接，但我试了一下，这些步骤完成后就可以push你的项目到github了，暂时没发现什么问题，如果有问题的话再补充。下面来说安装node.js。

二、node.js的安装和配置及npm的初始化

第一步：安装node.js
下载链接：node.js
同样，一路next，新手默认的选项卡就可满足，建议将node.js和git放在同一目录下，默认路径还是C:/Program Files，演示下载路径是D:/Program Files

安装完成后可以cmd+r 弹出命令提示符，测试自己的node.js，这里就不测试了，直接下面在webstorm中测试。

第二步：在webstorm中配置node.js
其实大体步骤和git是一样的，这里依然是打开webstorm->File->Settings->searth 输入node.js，到达Node.js and NPM这里。在右边Node interpreter中选择你自己的下载路径，如下图：

4.png

我这里是已经配置好的，新配置的话路径下面会有一个Coding Assistance看到么有，选择“enable”（感谢评论中认真的小伙伴补充的）即可和上图一样，然后再apply->OK就行啦。到这里你的node.js（包括npm）就彻底装好了，node.js里默认是自带npm的，所以不用单独下载。

第三步：测试node.js
在你的terminal中输入node，正式进入Node.js的世界吧，第一条指令当然是“hello world!”

5.png

好啦，到这里node,js就能用啦！鼓掌！下面来看npm~

Tip:按两下 ctrl+c 可以退出node.js输入界面

第四步：初始化npm

安装并配置好node.js后，npm暂时还不能用，在第一次使用的时候还需要进行初始化的步骤，如下：

在terminal中输入 npm install
等它ok以后再查看下它的版本号，用npm -v命令（能查看的到就说明安装成功，否则的话再对照以上步骤查看哪里出错了），如下图：

6.png

好了，现在npm也能用了！试一下！

7.png

Tip:这里想要用npm test测试所有文件的话，还需要安装单个文件测试的命令jasmine，下面会说。

三、其他问题合集

1. npm中jasmine的安装

1）查看你的jasmine版本
你安装好npm后，你安装的项目目录下会出现node_modules这个目录，打开它，找到与jasmine相关的目录，如下图：

8.png

• jasmine全局安装 npm install jasmine -g (jasmine -v 可查看是否安装成功)
• jasmine-node 全局安装 npm install jasmine-node -g (jasmine-node --version 可查看是否安装成功)

Tip:根据情况选择安装，安装好后可以测试单独文件了，也可以用命令npm. test测试全部文件了，注意：安装了jasmine的测试命令是jasmine，安装jasmine-node的测试命令式jasmine-node

9.png

测试通过，耶~

2.windows下如何使用tab键自动补全

windows真的比较坑，什么都得自己配置~~以下来源于知乎上的一个问题（链接）

10.png

如上操作就可以用tab键自动补全啦~~

3.webstorm中配色

新版本的webstorm中的默认白色布局一点不酷炫，想要有那种专属于程序员的酷炫背景，怎么办呢？

总的来说，也是可以settings改变的，但是可选的太少了，下面的两个网址是专门做配色界面的，亲测都可用，只是买家秀和卖家秀稍微有点不同罢了~~
下载链接一：color themes
下载链接二：phpstorm-themes
把下载好的文件（color themes的文件需要解压，只留下xml文件即可），放入下图路径：

11.png

接下来，在你的webstorm中打开settings，进入colors&fonts这里修改，在右侧Scheme下拉选项中可以选择你的界面样式，自己下载的样式默认在最后面，如下图：

12.png

配置好之后，重启一下webstorm就一切都好啦~~~

完美~~~

有问题欢迎补充交流，新手全凭自己从头到尾做了一遍记录下来自己的问题~~如有不足，请多指教。