去 WebStorm官方网站下载即可,可以免费试用 30 天。
WebStorm 官方报价是
2. 如果你是学生,可以获取免费教育版
3. 如果你在 GitHub 上的项目持续更新了三个月,可以申请开源免费版
将用不到的界面隐藏起来,操作方法:View => Appearance => 勾选如下
安装 Material Theme UI 主题,操作方法:File => Settings => Plugins => Marketplace => 搜索 Material Theme UI 并安装,安装完成后进入 File => Settings => Appearance & Behavior => Material Theme,仿照我下面的配置即可
改变以下选项
这里我使用默认的字体,勾选enable font ligatures
还有两处字体需要设置一下,分别是
直在 WebStorm 里查看快捷键很简单:
按两下 Shift,没错,按两下,你会得到一个搜索框,这个搜索框可以搜索任何东西
在搜索框里输入你想要的功能名称,比如 reformat (代码格式化),然后你就看到对应的操作(Action)。
Action 后面就跟着对应的快捷键不过这个方式的缺点是只能搜英文,所以可以看第二个方式:查看菜单栏,快捷键就写在菜单栏每一项 Action 的后面
在 Settings 里的 keymap 里的搜索栏搜索即可,见下图
如果修改后提示快捷键有冲突,点击 Remove 即可把其他冲突的快捷键删除。
最后,如果你忘了快捷键,就用万能快捷键 Shift Shift 来搜索即可。
WebStorm 格式化代码的功能特别强大,不过需要学习才能用得溜
在任意 JS 文件,使用 Show Reformat File Dialog 功能(快捷键你要自己用 Shift Shift 搜索一下),会弹出一个对话框
我们一般选择 Whole file 来格式化整个文件,但如果当前文件是别人的代码,你可能就要选择 Only VCS changed text,以防修改别的人代码,只格式化刚写的代码。
你可以在任何时候使用 Show Reformat File Dialog 功能重新弹出这个对话框进行修改配置。
使用 Reformat Code 功能(快捷键你要自己用 Shift Shift 搜索一下),就会立即格式化当前文件。
如果你对格式化后的文件不满意,那么
2. 可选:个人建议把 JS、CSS、SCSS、TypeScript、HTML 代码缩进全改成 2、2、2,这样代码更紧凑。建议 JS 不加分号,TS 加分号。
开启以下功能(直接在 Shift Shift 后输入对应的英文即可开启,找不到不要来问我,因为这些选项都无关紧要):
关闭以下功能(直接在 Shift Shift 后输入对应的英文即可关闭,找不到不要来问我,因为这些选项都无关紧要):
一些可能用到的功能
大概就是这些,有些根据自己的观察没加,绝大多数内容来自方方老师(方应杭)。
那就先这样掰掰。