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

图标

费用

收费

官网下载

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

安装

一、webstorm拖到application中

设置

一、左侧项目目录结构，字体改变
appearance, override default fonts by (not recommended)，修改size

二、terminal的console字体改变
editor, console Font，修改Size


三、快捷键设置
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

3、选择一个单词，改成control + w
① 搜索Extend Selection， 改成control + w

四、打开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

node语法提示

一、设置，输入nodejs，选择node.js and npm，在coding assistance选项选择enable

二、如果方法1不行，搜索javascript，选择Libraries, 点击Download…, 然后选择node, download下载。最后在Libraries中给@types/node打钩。



三、如果方法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打钩。

git 拉取代码

一、vcs - checkout from version control - git， 得到的是master分支

二、git fetch 后 git pull指定的分支

TypeScript配置

一、报错

1、setting报错解决
（1）错误原因：node来源改了，ts没有编译成js，所以webstorm会报错。

（2）解决：node改成正确的地址，修改成运行编译

修改完之后setting不会报错了

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：未结束的声明

解决：webstorm设置，editor-inspections-unterminated statement，去掉小勾勾