一、安装与配置
1、WebStorm 的官网为 https://www.jetbrains.com/webstorm/ ,在该网站下载并安装 WebStorm。
// 下载 & 安装 WebStorm:https://www.jetbrains.com/webstorm/download/#section=windows
2、安装 Node.js,如果已经安装可以跳过此步骤,具体可以查看附录中的 Node.js 使用教程。
// 下载 & 安装 Node.js: https://nodejs.org/zh-cn/
3、选择编辑器主题和字体,选择一个适合自己的编辑器主题和字体进行配置。
// 打开 WebStorm -> File -> Settings -> Editor -> Color Scheme 和 Font
二、创建项目并书写代码
1、创建一个新的项目,打开 WebStorm,选择 "Create New Project",选择对应的项目类型。
// 打开 WebStorm -> Create New Project -> 选择对应的项目类型
2、书写代码。在新项目文件下新建文件,使用快捷键(例如:Ctrl + N 或者 Command + N)创建对应的文件。
// 快捷键新建文件:Ctrl + N 或者 Command + N
3、使用 WebStorm 的自动补全和代码导航工具提高开发效率。
// 自动补全:输入关键字,按下 Tab 或者 Space 来直接补全语法。代码导航:CTRL + LEFT 或者 CTRL + RIGHT,可以跳转到代码中对应的位置。
三、调试与运行
1、配置运行环境,在导航栏选择 "Edit Configurations",选择对应的运行环境。
// 打开 WebStorm -> Edit Configurations -> 选择对应运行环境
2、开启调试模式,在代码中设置断点,使用快捷键调用 Debug 模式。
// 打开 Debug 模式:Ctrl + Alt + D 或者 Command + Shift + D,在代码中设置断点。
3、开始运行调试模式,在运行调试模式下,可以单步调试代码,并查看程序的执行情况。
// 在 Debug 模式下点击 Run 或者使用默认快捷键 Shift + F9 开始运行。
四、版本控制与发布
1、安装 Git,Git 是一个版本控制工具,它能够帮助我们记录代码的版本变化,以及协同开发的功能。
// 下载 & 安装 Git:https://git-scm.com/download/
2、绑定 Git 仓库,在 WebStorm 中绑定 Git 仓库,可以快速提交与管理代码。
// 打开 WebStorm -> Settings -> Version Control -> 配置 Git 仓库
3、发布代码,发布代码可以使用常见的方式,例如:SCP、FTP、SFTP 等方式进行发布。
// 使用 SCP 进行代码发布:
scp -r /path/to/local/files user@host:/path/to/remote/files
五、其他功能与使用技巧
1、使用快捷键,提高开发效率。例如:Ctrl + Shift + F -> 代码中搜索,Ctrl + Shift + R -> 代码中替换。
// Ctrl + Shift + F: 代码中搜索
// Ctrl + Shift + R: 代码中替换
2、自定义快捷键,将常用的操作绑定到自己喜欢的快捷键上。
// 打开 WebStorm -> File -> Settings -> Keymap -> 配置快捷键
3、使用插件,WebStorm 支持大量插件,可以根据自己的习惯进行选择和使用。
// 打开 WebStorm -> File -> Settings -> Plugins -> 配置插件
附:Node.js 使用教程
1、下载并安装 Node.js。
// 下载 & 安装 Node.js:https://nodejs.org/zh-cn/
2、使用 NPM 安装依赖,可以使用以下命令进行安装。
// 安装依赖命令示例:npm install express
3、在项目中使用依赖
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('Hello World');
});
app.listen(3000);