webstorm安装、使用：常用快捷键，node语法提示，git拉取代码，typescript设置等

朴灿烈づ我的快乐病毒、 2023-02-21 04:46 0阅读 0赞

# 图标 #

![在这里插入图片描述][20200628153254429.png]

# 费用 #

收费

# 官网下载 #

一、下载地址：https://www.jetbrains.com/webstorm/download

# 安装 #

一、webstorm拖到application中

# 设置 #

一、左侧项目目录结构，字体改变  
appearance, override default fonts by (not recommended)，修改size  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]  
二、terminal的console字体改变  
editor, console Font，修改Size  
![在这里插入图片描述][2020062815300095.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 1]  
三、快捷键设置  
1、切换标签页改成control + tab(next), control + shift + tab(previous)，这样就和浏览器切换标签页一样了  
（1）设置，Keymap  
①搜索switcher，如果快捷键为control + tab, 去掉快捷键  
②搜索Select Opposite Diff pane，如果快捷键为control + tab ,去掉快捷键  
③搜索Slect Position in Opposite Diff Pane, 如果快捷键为control + shift + tab, 去掉快捷键  
④搜索Select Next Tab， 快捷键改成control + tab  
⑤搜索Select Previous Tab ，快捷键改成 control + shift + tab  
2、关闭当前选项卡，改成command + tab，本来是command + f4  
（2）设置, Keymap  
①搜索Extend Selection， 如果快捷键为command + w ，去掉快捷键  
② 搜索close， 添加command + w  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 2]  
3、选择一个单词，改成control + w  
① 搜索Extend Selection， 改成control + w  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 3]  
四、打开webstorm，报错：invalid vcs root mapping（The directory <Proj…EAworkespace/prorecom is registered as a Git root, but no Git repositories were found there.）  
解决：  
设置，version control，把报错的记录（会报红）删除

## git设置 ##

1、如果从gitlab上拉取代码，是git + ssh校验，则SSH executeable需要设置成Native。不然拉取代码时，操作vcs - checkout from version control - git -test时会报错fail  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 4]

## node语法提示 ##

一、设置，输入nodejs，选择node.js and npm，在coding assistance选项选择enable  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 5]  
二、如果方法1不行，搜索javascript，选择Libraries, 点击Download…, 然后选择node, download下载。最后在Libraries中给@types/node打钩。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 8]  
三、如果方法2中，download列表找不到node，则用以下方案  
1、`npm i @types/node -g`  
2、下载后的文件在/usr/local/lib/node\_modules/@types  
3、Libraries，点击add, 自己定义个名字TypeNode, 选择Directories时，发现选择不到/usr/local中的文件，所以把@types文件复制到其他自己可以选择的文件中。  
4、Libraries中，给TypeNode打钩。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 10]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 11]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 12]

# git 拉取代码 #

一、vcs - checkout from version control - git， 得到的是master分支  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 13]  
二、git fetch 后 git pull指定的分支  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 14]

# TypeScript配置 #

一、报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70_pic_center]  
1、setting报错解决  
（1）错误原因：node来源改了，ts没有编译成js，所以webstorm会报错。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70_pic_center 1]  
（2）解决：node改成正确的地址，修改成运行编译  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70_pic_center 2]  
修改完之后setting不会报错了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70_pic_center 3]  
2、export type \{\} 报错  
更新webstorm到最新版本，我的是2017版，改成2020版就不会报错了。

# 常用快捷键 #

一、常用

/*让某段标签被其他标签包裹*/
    选中<p>被包裹</p>
    按住command + alt + t，
    选择surround with in html/jsp
    输入需要的标签div，就得到<div><p>被包裹</p></div>
      
    alt + f12       // 打开terminal
      
    a{click me}     // 自动补全文字click me
    lorem               // lorem10 就会生成10个没有意义的单词
    m10-20              // margin:10px 20px
    command + shift + m             // 找到标签的开头或结尾，快速找到匹配的大括号
    command + alt + 左右箭头     // 前进或后退，回到上次光标定位的位置。
    command + b                             // 快速打开光标处的类或方法
    command + alt + b               // Go to implementation(s) 跳转方法实现处
    shift + f6                              // 标签,变量重命名，变量引用到的地方都会改变
    f2                                              // 定位到错误的地方（标红色下划线的地方)
    alt + enter                             // 就会出现对错误地方的修改建议。
    command + f1                            // 打开project面板
    alt + f12                               // 打开terminal
    command + alt + enter,      // 在上面增加一行。
    shift + enter                       // 在下面增加一行。
    command + +或者-                  // 能让代码全部折叠或展开
    alt + shift + 上下箭头      // 整行移动代码

二、不常用

setting - emmet - css - auto insert css vendor prefixs, 相应属性后面的勾打上，能为属性自动添加前缀
    bdrs:10                     // 生成-webkit-border-radius：10px; border-radius:10px 等。
    webstorm搜索keymap,能选择eclipse, visual studio等的快捷键。
    在标签上按住f1，就会给出标签相应的描述。
    command + shift + v， 双击     // 在历史剪切板中选择文字。
    alt + 上下箭头                           // 整行选择, (aSuncat:我电脑上无效)
    command + e                                 // 上次使用的文件
    css颜色选择的色块上点击，打开色轮/色板修改颜色

# 常见问题 #

一、**scanning files to index 或者一直indexing**  
1、解决：node\_modules - 右击 - mark derectory as - excluded  
2、原因：node\_modules文件太大，创建索引需要大量时间。将它从创建索引列表删除，就不会一直indexing。  
注意：这样全局搜索时，文件也会被排除在外。  
（1）不同于setting - file types - ignore files and folders里加上node\_modules，这样的ignore会导致项目找不到依赖。  
3、备注：  
网上有人说到解决方法File -> Invalidate Caches / Restart，其实是个大坑，其含义是删除本地文件缓存，然后在下次启动时重建。所以这样并不能解决一直indexing的问题。  
二、报错：**argument for @NotNull parameter ‘project’ of com/illuminated/intellij/jsonSchema/ sfdxJsonSchemaProviderFactory get Provider must not be null.**  
会导入项目导入不进去  
1、解决：webstorm的设置，plugins, illuminated cloud 2 点击uninstall卸载。  
2、原因：我的webstorm是2017版本的，不支持illuminated cloud 2  
三、git commit 的时候，code analysis时报错：**unterminated statement**  
unterminated statement：未结束的声明  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 15]  
解决：webstorm设置，editor-inspections-unterminated statement，去掉小勾勾  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 16]

[20200628153254429.png]: https://img-blog.csdnimg.cn/20200628153254429.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200628152455870.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[2020062815300095.png]: https://img-blog.csdnimg.cn/2020062815300095.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200628152904412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200628152720941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200628152730782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200629153910547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200717161129470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200717161306154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200717161359216.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200717161433140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/202007171622030.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200717162319124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2020071716290479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/2020071716251874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200630102937512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200630103110881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201022105112520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201022105203672.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201022105302301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/2020102210541930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200628152615996.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200628152627233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70