webstorm使用教程（个人学习日志）

时间：2024-05-22 13:06:47
  • The smartest JavaScript IDE

  • Powerful IDE for the modern JavaScript development

  •   Webstorm被许多从业前端工作者奉为“神器”，其强大的文本编辑和功能支持为前端开发工作节省了不少功夫。以下是个人的学习日志，其中有些部分源于其他博客或者论坛会附上说明，全文仅供参考，随时更新。


  •  Webstorm下载及**


  • 打开后直接点击“DOWNLOAD”即可，安装过程一直“next”路灯，想要自定义路径在选择路径的时候注意一下就好。下载后打开可以发现这是未***，因为我觉得英文用着也挺好就不纠结是否汉化了。但是这是只有30天试用版，在安装最后会出现这样一个对话框（要是跳过了在help->register中打开即可）：

  • 将网址 http://idea.imsxm.com/ 复制到license server address 中点击“Activate”**，稍等一会即可。

安装nodejs以及express

  官网下载网址：https://nodejs.org/en/download/
webstorm使用教程（个人学习日志）
进入下载界面后选择合适系统的版本下载，安装过程也是无脑“next”。安装成功之后以管理员身份打开命令行窗口测试一下是否安装成 功，输入 node -v，显示nodejs版本号。
然后安装express。输入命令： npm install -g express  等待自动安装即可。
补充说明一下：

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
  • 其中，npm 的包安装分为本地安装（local）、全局安装（global）两种，命令的区别就是带不带“-g”。

配置Webstorm

点击“File -> New -> Project ”选择新建“Nodejs Express App”工程：

Location：选择工程文件所在路径；

Node interpreter：选择Nodejs安装路径下的node.exe ；

然后系统会自动检测到版本号，Option（选项）的template和CSS默认 Jade 和 Plain CSS 不需要修改。

稍等一会儿，项目创建成功。

点击“Run -> Run”或快捷键“Alt + Shift + F10” 运行，在浏览器输入“ 127.0.0.1/3000 ”敲回车即可看到结果。


配置主题

Webstorm的主题可以在官网或者一些开源网站（github）找到自己喜欢的。
 点击“ File -> setting ”，如下所示：
webstorm使用教程（个人学习日志）

选择“Appearence” ，将“Theme”设置为“Darcula”。

然后选择 “Editor -> Colors&Fonts " ，设置"Scheme" 为 “Monokai“（类似于Sublime常用的主题）。如果不想要自带的主题，可以将下载后的.xml文件放到

“ ..\user \ webstorm \ config \ colors”文件夹里重启webstorm设置。如果没有"coclos"这个文件夹可以新建一个，
webstorm使用教程（个人学习日志）

相关文章