webstorm、vscode、HBuilder配置eslint检查

要在WebStorm、VSCode或HBuilder中配置ESLint检查，你需要按以下步骤操作：

1. 安装ESLint：

   在项目的根目录下运行以下命令来安装ESLint：

   
   
   
   npm install eslint --save-dev

2. 初始化ESLint配置文件：

   
   
   
   npx eslint --init

   按照提示选择配置，比如环境、特性等。

3. 安装所需的插件和规则：

   根据选择的环境和特性，ESLint会提示你安装相应的插件。例如，如果你选择了React，它会提示你安装eslint-plugin-react。

   
   
   
   npm install eslint-plugin-react --save-dev

4. 配置VSCode、WebStorm或HBuilder：

   • VSCode:

     在VSCode中，你需要在项目的.vscode文件夹下或根目录下创建一个settings.json文件，并配置ESLint插件。

     
     
     
     {
       "eslint.enable": true,
       "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true
       }
     }

   • WebStorm:

     在WebStorm中，你可以通过Preferences/Settings -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint进行配置，并启用ESLint。

   • HBuilder:

     目前HBuilder不原生支持ESLint，但可以通过插件或外部工具配合使用。

5. 保存时自动格式化：

   在package.json文件中的scripts部分，添加以下命令来在保存时自动格式化代码：

   
   
   
   "scripts": {
     "lint": "eslint --fix src"
   }

   然后运行：

   
   
   
   npm run lint

6. 运行ESLint检查：

   你可以通过以下命令手动运行ESLint检查：

   
   
   
   npx eslint src

以上步骤适用于大多数现代编辑器和IDE，具体配置可能略有差异，但基本原理相同。