WebStorm配置Eslint自动格式化代码

前言

这两天下载了一个Ant Design Pro 这个由支付宝写的前端admin框架:下载传送门

下载完成后,想要修改里面的内容,发现只需要一更改就会出现问题,是因为没有通过对应的eslint校验

所以想着配置一下eslint 让 它能够自动格式化代码,这样就不会出问题了

下载插件

首先需要在webstorm中下载对应的plugin插件:ctrl + alt + s,选择Plugins,然后搜索eslint,进行安装

image.png

安装完成后,我们需要重启webstorm

然后在打开设置:搜索eslint

image.png

点击OK进行保存,然后我们就需要配置一下格式化的快捷键了

我们点击keymap,然后搜搜eslint,选中Fix ESlint Problems:

image.png

右键选择:

image.png

然后键盘输入对应的快捷键,这里我使用的是和VS Code一样的快捷键:Alt + Shift + F

image.png

点击OK保存即可,下面我们来试一试实际效果,我们首先先把格式弄乱,然后在进行eslint的格式化

image.png