图标
费用
收费
官网下载
一、下载地址: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,去掉小勾勾