WebStorm 使用 ESLint 自动格式化代码

### 配置 Vue 3 项目在 WebStorm 中使用 ESLint #### 设置 WebStorm 的 ESLint 支持 为了使 WebStorm 能够识别并应用 ESLint 规则到 Vue 3 项目中，需调整 IDE 的设置： 通过 `File > Settings` 打开全局配置界面，在左侧菜单依次展开至 `Languages & Frameworks > JavaScript > Code Quality Tools > ESLint`[^1]。这里应确认启用了 `Automatic ESLint configuration` 这一项，这允许 WebStorm 自动加载项目内定义的 ESLint 设定。 #### 安装必要的依赖包 确保项目已安装了合适的 ESLint 插件和支持工具。对于 Vue 3 来说，通常需要有如下 npm 包： ```bash npm install --save-dev eslint eslint-plugin-vue @vue/eslint-config-prettier ``` 这些命令会在开发环境中加入 ESLint 及其针对 Vue 组件的支持插件，还有与 Prettier 结合使用的配置文件来保持代码风格一致性[^3]。 #### 创建或更新 `.eslintrc.js` 文件 如果还没有创建过此文件，则应在项目的根目录下建立它，并填入适合 Vue 3 和所期望编码标准的内容。一个基本的例子可能是这样的： ```javascript module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:vue/vue3-essential', '@vue/prettier' ], parserOptions: { ecmaVersion: 12, sourceType: 'module' }, rules: {} }; ``` 这段脚本设定了环境变量、继承了一些预设规则集以及指明了解析器选项[^4]。 #### 同步 WebStorm 和 ESLint 完成上述更改之后，返回 WebStorm 并重新启动该应用程序或是手动触发同步操作以让新的 ESLint 配置生效。此时应当能看到编辑器依据指定的标准给出提示信息和警告标记[^5]。 #### 测试自动格式化功能 尝试编写一段不符合当前 ESLint 或者 Prettier 规范的小片段代码；接着按下空格键再执行快捷键组合 Ctrl+S (Windows/Linux) 或 Command+S (Mac)，观察是否能够按照预期修正这些问题。