webstorm配置eslint一键格式化代码

在WebStorm中配置ESLint以实现一键格式化代码，你需要按照以下步骤操作：

1. 确保已经安装了ESLint。如果没有安装，可以通过npm安装：

   
   
   
   npm install eslint --save-dev

2. 安装一个ESLint插件，例如eslint-plugin-prettier和prettier，以便使用Prettier规则进行格式化：

   
   
   
   npm install eslint-plugin-prettier prettier --save-dev

3. 在项目根目录中创建一个.eslintrc.js或.eslintrc.json文件，并配置ESLint以使用prettier插件。例如：

   
   
   
   {
     "plugins": ["prettier"],
     "extends": ["plugin:prettier/recommended"]
   }

4. 在WebStorm中配置ESLint插件：

   • 打开WebStorm的设置或偏好设置。
   • 进入Languages & Frameworks > JavaScript > Code Quality Tools > ESLint。
   • 勾选Enable以启用ESLint。
   • 在ESLint package字段中，选择你的项目中的eslint包。
   • 在Configuration file字段中，选择你的.eslintrc配置文件。

5. 配置保存时自动格式化：

   • 返回到Languages & Frameworks > JavaScript。
   • 在Code Quality Tools下，选择Reformat code的On save选项。

完成以上配置后，当你在WebStorm中保存文件时，ESLint将使用Prettier进行代码格式化。如果你想要手动格式化代码，可以使用快捷键：

• 在Windows/Linux上：Ctrl + Alt + L
• 在macOS上：Option + Command + L

确保WebStorm中的ESLint插件已启用，这样你就可以在需要的时候进行代码格式化了。