windows下webstorm配置git,node.js,npm及webstorm的界面配色

折腾了好几个小时,终于成功在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账号,如图
windows下webstorm配置git,node.js,npm及webstorm的界面配色_第1张图片
1.png
2)配置git路径,如图

windows下webstorm配置git,node.js,npm及webstorm的界面配色_第2张图片
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中选择你自己的下载路径,如下图:

windows下webstorm配置git,node.js,npm及webstorm的界面配色_第3张图片
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也能用了!试一下!

windows下webstorm配置git,node.js,npm及webstorm的界面配色_第4张图片
7.png

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

三、其他问题合集

1. npm中jasmine的安装

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

windows下webstorm配置git,node.js,npm及webstorm的界面配色_第5张图片
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

windows下webstorm配置git,node.js,npm及webstorm的界面配色_第6张图片
9.png

测试通过,耶~

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

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

windows下webstorm配置git,node.js,npm及webstorm的界面配色_第7张图片
10.png

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

3.webstorm中配色

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

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

11.png

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

windows下webstorm配置git,node.js,npm及webstorm的界面配色_第8张图片
12.png

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

完美~~~

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

你可能感兴趣的