您的位置:

WebStorm 使用教程

WebStorm 是一款由 JetBrains 公司推出的集成开发环境(IDE),它专注于提供一流的 JavaScript 开发体验,并提供了非常多的快速开发工具和便捷的快捷键。下面我们将从多个方面详细阐述 WebStorm 的使用教程。

一、安装与配置

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);