当我用过sublime, webstorm, vscode 等编辑器之后我发现还是webstorm 最好用,其强大的功能使我对它备受青睐.
下载网址:
点击获取webstorm激活方式
![c9061f04dd6f1b3f5f21798e716c7e3a.png](https://img-blog.csdnimg.cn/img_convert/c9061f04dd6f1b3f5f21798e716c7e3a.png)
色彩区分详细,快速跳转定义。直接集成typescript,代码构建时提示,跳转定义方便快速
![1f86ce1140a92ac75138149796b4a48c.png](https://img-blog.csdnimg.cn/img_convert/1f86ce1140a92ac75138149796b4a48c.png)
自定义设置, 可根据自身需要设置不同的代码编写规范。集成版本控制,快速提交,对比历史,不同版本切换简单正确。
ctrl+shift+A快速查找并使用编辑器所有功能(必记)
ctrl+shift+F12最大区域显示代码(会隐藏其他的功能界面模块)
webstorm设置技巧
ctrl+shift+R 按全局查找替换,在替换前review一下,以避免出错
ctrl+R 当前页面查找替换
按两下shilf 可搜索文件
ctrl + q 退出 (mac command + q)
- 如何更改主题(字体&配色):
File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址 - 如何让webstorm启动的时候不打开工程文件:
File -> Settings->General去掉Reopen last project on startup. - 如何完美显示中文:
File -> Settings->Appearance中勾选Override default fonts by (not recommended),设置Name:NSimSun,Size:12 - 如何显示行号:
File -> Settings->Editor,”Show line numbers”打上勾,就显示行号了 - 如何代码自动换行:
File -> settings -> Editor “Use Soft Wraps in editor” 打上钩,代码就自动换行了 - 如何点击光标,显示在本行末尾:
File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。 - 如何修改快键键:
File -> Settings->Keymap,然后双击要修改快捷的功能会有提示框出来,按提示操作 - 换成自己熟悉编辑器的快键键:
File ->Settings->Keymap,支持像Visual Studio、Eclipse、NetBeans这样的主流IDE。 - javascript类库提示。
File -> settings -> Javascript -> Libraries -> 然后在列表里选择自己经常用到的javascript类库,最后Download and Install就ok了. - 在开发js时发现,需要ctrl + return 才能选候选项:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改为 “Always” - js提示比较迟缓
File -> Code Completion -> Autopopup in 下 1000改为0 - git配置:
File -> settings -> Editor -> github,进去改github的账户,如果没有git则不需要. - 插件安装:
File ->plugins,然后就选择给力的插件们再安装.(“css-X-fire”插件,用于当使用firebug修改css属性时,编辑器内的css代码也会发生变化。) - 以后更新
webstorm使用心得
- 收藏夹功能:
当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单 - 面包屑导航:
除了左侧的工程页面,可以选择目录之外,在顶部菜单下有一个类似网站面包屑导航一样的目录也可以实现相同功。点击每个目录就会有下拉菜单显示其下的子目录,很实用. - 构造器界面:
注释符合格式的话就会出现。如果是js文件则是js类的函数和对象;css文件的话则是这个css文件的概括;html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性. - todo界面:
给代码加todo注释就会出现这个界面 - 双栏代码界面:
右击代码选项卡上的文件,然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏) - 本地历史功能:
找回代码的好办法
WebStorm集成git使用
webstorm中只集成了git的常用操作,并不能完全替代命令行工具。在界面的右下角可以查看处于哪个git分支。也可以在上面点击切换或者新建分支。
- 查看当前代码与版本库代码的差异:
右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。