新手向：Nodejs - WebStorm里直接调用命令行

新手向：Nodejs - WebStorm里直接调用命令行

写代码写到一半要切换窗口出去敲命令行？webstorm的external tools可以帮你省下一点时间
举例说明，比如我要直接使用npm：
ctrl+alt+s打开setting菜单，找到external tools 点+号，在tool setting里填空： program -> 外部命令所在位置，填入npm的完整路径 parameters -> 参数，这里设为 $Prompt$运行命令时表示弹个窗口让你输入 Working Directory -> 在哪个目录下运行这条命令，输入$ProjectFileDir$表示在当前项目的根目录下运行。 点右边的insert macro可以看到更多的选项，除了macro的说明，webstorm还会告诉你对应macro在当前环境下是个什么值的，不怕看不懂e文了。 1 最后给这个命令起个名字，叫npm保存完事，在顶部菜单找到tools就可以看到刚保存的npm。点击它就会弹出个窗口，输入install express试试吧。 2 3


7 回复

新手向：Nodejs - WebStorm里直接调用命令行

在开发过程中，我们常常需要在命令行中执行一些操作，例如安装依赖包、启动服务器等。如果你经常在WebStorm中编写Node.js代码，那么使用WebStorm的外部工具（External Tools）功能可以让你更高效地完成这些任务。

如何设置外部工具

  1. 打开设置：

    • 按 Ctrl + Alt + S 打开设置菜单。
    • 在左侧导航栏中找到并展开 Tools，然后选择 External Tools。

  2. 添加新的外部工具：

    • 点击右上角的 + 号，添加一个新的外部工具配置。

  3. 配置外部工具：

    配置项 描述
    Program 外部命令所在位置，例如 npm 的完整路径。
    Parameters 命令参数，可以使用宏来动态插入变量。
    Working Directory 命令运行的目录，可以使用 $ProjectFileDir$ 来指定项目根目录。

示例配置

假设我们要在WebStorm中直接使用 npm install 命令，可以按以下步骤进行配置：

  1. Program:

    • 输入 npm 或者 npm.cmd（Windows系统）的完整路径。例如：C:\Program Files\nodejs\npm.cmd

  2. Parameters:

    • 这里我们可以设置命令参数，例如 $Prompt$ 表示弹出一个窗口让用户输入命令。你也可以直接填写具体的命令，如 install express。

  3. Working Directory:

    • 输入 $ProjectFileDir$ 表示在当前项目的根目录下运行命令。

其他可用的宏

在配置 Parameters 和 Working Directory 时，可以使用WebStorm提供的各种宏来简化设置。例如：

  • $ProjectFileDir$: 当前项目的根目录。
  • $FilePath$: 当前文件的完整路径。
  • $FileName$: 当前文件名。
  • $Prompt$: 弹出一个窗口让用户输入。

使用外部工具

配置完成后，你可以在顶部菜单找到 Tools，在其中看到你刚刚创建的外部工具。点击它，WebStorm会弹出一个窗口让你输入命令，或者直接运行你预设的命令。

示例截图

通过以上步骤，你可以在WebStorm中更方便地调用命令行工具，从而提高开发效率。希望这些步骤对你有所帮助！


这个好哇~ 感谢分享

mark

不错，谢了

好赞啊。。我用的是intellij IDEA

现在早就支持了，不用这么麻烦了

在WebStorm中配置外部工具（External Tools）可以帮助你在IDE内部直接调用命令行，这样就不需要频繁地切换窗口来执行命令。以下是如何配置npm命令以便在WebStorm中直接使用它的步骤：

  1. 打开WebStorm设置（Ctrl + Alt + S 或者 Cmd + , for Mac）。
  2. 导航到Tools > External Tools，然后点击右上角的加号（+）添加一个新的工具。
  3. 在新出现的窗口中填写如下信息：
    • Name: 给这个工具起一个名称，例如npm。
    • Program: 填写npm可执行文件的路径。如果你不确定路径，可以在终端或命令提示符中运行which npm（Linux/Mac）或where npm（Windows）来查找路径。
    • Parameters: 可以留空或者输入特定参数。如果希望每次运行时都弹出窗口输入参数，可以设置为$Prompt$。
    • Working directory: 这是命令执行的工作目录。输入$ProjectFileDir$将使命令在项目的根目录下运行。
  4. 点击右侧的Insert Macro按钮查看更多可用变量，并选择合适的变量设置工作目录。

完成这些步骤后，你就可以通过顶部菜单的Tools > npm来直接执行npm命令了。例如，你可以输入install express来安装Express框架。

这种方法不仅提高了效率，还能帮助保持开发环境的整洁和集中。

回到顶部