前端:VS和Webstorm开发工具比较, 哪个效率最高

前端:VS和Webstorm开发工具比较, 哪个效率最高

简介

作为1个后端, 一直在纠结到底哪个工具更好用, 效率更高, 智能提醒更强, 所以站在后端角度下分析下两个工具的使用情况, 后续不断更新.

特性比较

webstorm : 2024.3.3

vscode: 1.97.2: 2025-02-12

	webstrom	vscode
lorem功能	Y	Y
右键打开文件夹	Y(2024版本已支持)	Y
点击函数进入查看es标准源码	Y	N
补全功能-函数补全之补全括号	Y	N:不能补全括号, 是否是函数还是变量,自己区别,不易区别

插件支持

	webstrom	vscode
live-server	Y(和websorm无关, node全局安装插件, 手动命令启动, 或者node管理项目, 局部安装插件, pakcage.json配置启动脚本, 手动run启动)	Y(安装完,vscode右下角有live server安装, 点击直接启动,不要求命令启动)
prettier	Y(需配置)	Y(安装完插件自动生效,无须配置)

小特性

lorm功能

lorem 然后按下Tab，生成一个30个词语的句子

loremN 然后按下Tab（N代表数字），生成有N个词语的句子

lorem*N 然后按下Tab（N代表数字），生成N个句子(带有DIV包裹的)

loremN*M 然后按下Tab（NM代表数字），生成M个句子, 每个句子有N个字符(带有DIV包裹的)

<div>Lorem ipsum dolor.</div>
<div>Doloremque, iste, qui.</div>
<div>Dolorum, nam, temporibus!</div>
<div>Ad, deleniti voluptate.</div>
<div>Eos, fuga ipsum?</div>
<div>At quae, quibusdam.</div>

HtmlNode.class#id*N>leremN，HtmlNode 是节点名称(div、a 等)，快速生成包含网页节点的内容

>代表子节点

*N代表生成同节点的数量

右键打开文件夹

提前准备websorm路径: "D:\dev\JetBrains\WebStorm 2023.3.4\bin\webstorm64.exe"  "%V"
打开注册表编辑器， Win + R 键，输入 regedit，然后按回车键。
导航到以下路径：计算机\HKEY_CLASSES_ROOT\Directory\Background\shell
在 shell 目录下新建一个项，命名为 WebStorm( 可参考VsCode的配置, 配置相关项)

插件

live-server

• 命令行启动插件

cnpm install live-server -g

C:\Users\zatc> live-server -h
Usage: live-server [-v|--version] [-h|--help] [-q|--quiet] [--port=PORT] [--host=HOST] [--open=PATH] [--no-browser] [--browser=BROWSER] [--ignore=PATH] [--ignorePattern=RGXP] [--no-css-inject] [--entry-file=PATH] [--spa] [--mount=ROUTE:PATH] [--wait=MILLISECONDS] [--htpasswd=PATH] [--cors] [--https=PATH] [--https-module=MODULE_NAME] [--proxy=PATH] [PATH]

//指定端口启动
live-server  --port=8081

• vscode使用 , 扩展中下载

右下角点击开启和关闭, 或者鼠标右键开启和关闭.

配置插件, 可在扩展中配置

例如: 配置端口, 配置代理, 或者编写配置文件.

配置端口

//文件夹根目录下, .vscode目录下 创建settings.json
{
    "liveServer.settings.port": 5502
}

• webstorm使用

可使用命令行启动

使用node项目启动

• node配置使用

@REM 生成包package.json文件 
cnpm init -y
@REM 安装命令行,可全局安装
cnpm install live-server -g

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "live-server": "^1.2.2"
  }
}

配置启动脚本,修改package.json, 然后点击live-server 右侧(三角图标)即可执行

{
    "scripts": {
        "live-server": "live-server --port=8081"
    }
}

prettier

• vscode使用, 安装完即可使用

安装完毕右下角会有perttier

• webstorm使用(默认已安装)