万万没想到开箱即用的 webstorm 也有需要适配vscode+插件的一天，最近用 webstorm 发现部分 eslint 跟 prettier 没有应用项目中的配置，需要修改一些配置项，内容如下
一、适配 eslint
配置位于 File->settings->Language & Frameworks->JavaScript->Code Quality->Eslint，需要打开Run eslint --fix on save
二、适配 prettier
注意使用的是 Javascript 还是 Typescript, 如果项目用的是 Javascript 修改的是 Javascript的配置，如果项目用的是 Typescript 修改的是 Typescript 的配置
我改了半天 Javascript 就是没生效，恍然意识到项目是 Typescript 的
webstrom 是自带的 prettier，需要修改一些与 Airbnb 规范 有出入的地方
以下的配置适用于右键-reformat code 的情况
1 对象前后空格
File->settings->Code Style->JavaScript->Spaces->Within
import {Components} from 'react'
=>
import { Components } from 'react'
2 对象换行
3 句末添加分号
三、适配项目中的 eslint / pretitter 配置 - 简便版
那么问题来了，我的项目中配置了 prettier.config.mjs ，怎么让 webstorm 适配这个配置呢。答案是需要进行自定义配置。
该方法更为简便，由评论区提出
eslint 右键 .eslintrc.cjs 配置，选择 Apply ESLint Code Style Rules
prettier 右键 prettier.config.mjs 配置，选择 Apply Prettier Code Style Rules
选择 setting -> Tools -> Actions on Save, 勾选 Run eslint --fix 和 Run Prettier 即可
四、适配项目中的 eslint / pretitter 配置 - 插件版
如果webstorm的版本比较低的话可能不支持简便版本，可以试试插件版本的方法，效果是一样的
1 安装file Watchers插件
打开setting，在plugin下安装file Watchers插件
2 安装 file Watchers
点击 Tools/File Watchers, 点击 + ，再点击<custom>
3 编写eslint运行时自动修复
如图进行项目的配置，以下为 eslint --fix $FileName$ 的配置，就是在项目编写过程中运行这个配置使得 eslint 的提示能够出现, Name 随便取, File type 选择 Javascript，Program 选择自己项目中node_module\.bin\eslint, Arguments 填写 --fix $FileName$，勾选 Trigger the wacher regardless of syntas errors, 点击保存就可以了
4 编写prettier运行时自动修复
如图进行项目的配置，以下为 prettier --write $FileName$ 的配置，就是在项目编写过程中运行这个配置使得 prettier 的提示能够出现, Name 随便取, File type 选择 Javascript，Program 选择自己项目中node_module\.bin\eslint, Arguments 填写 --write $FileName$，勾选 Trigger the wacher regardless of syntas errors, 点击保存就可以了
如果想要每次运行时所有项目都格式化，可以把指令改为 prettier --write .，相应的Arguments 填写 --write .
