前端: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包裹的)

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使用(默认已安装)