WebStorm--项目设置

小灰灰 2022-12-10 04:00 350阅读 0赞

原文网址：[WebStorm--项目设置\_IT利刃出鞘的博客-CSDN博客][WebStorm--_IT_-CSDN]

# 库 #

**安装库**

> File=> Settings=> Languages&Frameworks=> Node.js and NPM=> 右侧“+”/“-”=> 可安装/删除 库
> 
> 也可通过完整的node和npm命令来俺咋混个。使用npm install 也是同样的效果（使用install名字要添加--save 才能自动配置packages.json，同样的uninstall也是一样）。
> 
> **package.json**
> 
> package这个json文件存放了每一个库的引用和包含关系。如果添加三方库的时候没有问题，webStorm是会自动去修改和添加package文件，智能提示和引用关系就会正常了。

**管理库**

> File=> Settings=> Languages&Frameworks=> JavaScript=> Libraries
> 
> 如果代码里有在线库，则鼠标放上去，点击“Download Library”即可。默认下载到：WS安装目录\\config\\javascript\\extLibs

# 提示文档 #

**其他网址**

> [IDEA / WebStorm / PhpStorm 添加jQuery自动提示，自动补全，提示文档\_arex\_efan的专栏-CSDN博客][IDEA _ WebStorm _ PhpStorm _jQuery_arex_efan_-CSDN]  
> [Webstorm 2019.1.3 设置jquery命令自动补全 - 云+社区 - 腾讯云][Webstorm 2019.1.3 _jquery_ - _ -]

**简介**

> WebStorm已经自带有自动提示、自动补全、提示文档了，但如果自己手动加了库，会更加详细。  
> 本处以jQuery为例进行示例，其他的包也是一样的方法。

**添加提示方法**

> **法1： 直接下载@type/jquery**
> 
> File=> Settings=> Languages & Frameworks=> JavaScript=> Libraries=> 右侧"Download"=> 找到"jquery"=> Download and Install
> 
> **法2：手动添加**
> 
> File=> Settings=> Languages & Frameworks=> JavaScript=> Libraries=> 右侧"Add"=> 按如下方式填写
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]
> 
> 3：选择自己下载的jquery库  
> 4：点击后会自动跳出"http://api.jquery.com"，确定即填入此项  
> 5：选中4后生成项，点击此下载按钮，会将文档下载到本地
> 
> 最后：需要将本地文档放到最上边。

**下边展示鼠标放到css方法上，不一样情况下的效果。**

**默认的提示**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

**直接下载@type/jquery**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]

**手动添加库与文档**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][]

# 配置Node.js #

**1.下载安装Node.js**

> 下载地址：[Node.js][]
> 
> 安装后执行node -v //会打印出版本。因为安装后会自动加入环境变量

**2. 配置WebStorm**

> File=> Settings=> Languages&FrameWorks=> Node.js and NPM=>  
> 右侧“Node intercepter”=> 选择node.js安装位置的node.exe  
> 右侧“Coding assistance for Node.js”=> 选中

# 其他 #

**提示未授权**

> 错误日志
> 
>     Page 'http://localhost:63343/xxx.html' requested without authorization, you can copy URL and open it in browser to trust it.
> 
> 解决方法
> 
> File=> Settings=> Build,Execution,Deployment=> Debugger=> Build-in Server=> 勾选“Allow unsigned requests”

[WebStorm--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/108763169
[IDEA _ WebStorm _ PhpStorm _jQuery_arex_efan_-CSDN]: https://blog.csdn.net/arex_efan/article/details/45363829
[Webstorm 2019.1.3 _jquery_ - _ -]: https://cloud.tencent.com/developer/article/1469383
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221123/2a4d04a2935b490186285f223d3ba8ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221123/d1acee17f4a140ffb6d30046b748ffb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20221123/be45cb7327eb4732b6a4a5342d2faca3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: /images/20221123/ee597b3f522747a8ad52df8836b5d9e2.png
[Node.js]: https://nodejs.org/en/