webstrom eslint插件

### 安装和配置 ESLint 插件

#### 配置环境准备
为了使 WebStorm 能够识别并利用 ESLint 对 JavaScript 文件进行静态分析，需先确保本地已安装 Node.js 和 npm 或 yarn。这一步骤是必要的因为 ESLint 及其相关依赖包通过这些工具来管理。

#### 安装 ESLint
可以通过命令行全局或局部安装 ESLint：

npm install eslint --save-dev

或者使用 Yarn:

yarn add eslint --dev

此操作会在项目的 `node_modules` 下载并保存 ESLint 工具及其默认规则集[^1]。

#### 启用 ESLint 支持于 WebStorm
进入 WebStorm 设置界面，路径如下所示：
- Windows/Linux: `File -> Settings`
- macOS: `WebStorm -> Preferences`

导航至 `Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint` 并勾选 `Enable` 选项前的方框以激活内置支持功能[^4]。

#### 自动化代码检测流程集成
为了让开发过程更加顺畅，建议将 ESLint 整合进构建链路里。比如，在基于 Webpack 构建的应用程序中加入 `eslint-loader` 来实现在编译阶段执行语法检查的任务[^2]:

module.exports = {
    module: {
        rules: [
            // ... other loaders ...
            {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader'
            }
        ]
    },
};

#### 解决冲突与优化体验
当同时启用 Prettier 进行代码格式化时，可能会遇到两者之间存在竞争的情况。为了避免这种情况发生，可以在项目根目录创建 `.eslintrc.json` 文件指定兼容性的预设，并考虑引入 `eslint-config-prettier` 关闭可能引起冲突的 ESLint 规则[^3].