vue添加eslint

### 如何在 Vue 项目中添加 ESLint 支持 #### 使用 Vue CLI 创建新项目时集成 ESLint 对于尚未创建的项目，可以通过 Vue CLI 工具来快速建立带有 ESLint 的开发环境。启动终端执行 `vue create project-name` 命令，在交互过程中选择 Linter / Formatter 配置选项，按照提示完成安装[^2]。 ```bash vue create my-vue-app ``` 当被询问关于Linter/Formatter工具的选择时，可以选择合适的预设方案，比如 Airbnb 或 Standard 规则集。 #### 向现有 Vue 项目添加 ESLint 如果已有现成的 Vue 应用程序，则需手动向其引入 ESLint 功能： 1. 安装必要的 npm 包： 执行如下命令以获取所需依赖项，包括核心 linter 和针对 Vue 文件的支持插件。 ```bash npm install eslint eslint-plugin-vue @vue/cli-plugin-eslint --save-dev ``` 2. 初始化 ESLint 设置： 运行下面这条指令来自动生成 `.eslintrc.js` 文件以及初始化基本配置。 ```bash npx eslint --init ``` 3. 更新 Webpack 构建链路（仅限于基于 webpack 的构建体系）： 如果使用的是旧版本 Vue CLI，默认情况下会启用 lint-on-save 行为。为了确保编辑器能够实时检测并修正潜在问题，建议保留此功能；如果不希望如此频繁触发校验过程，可以在项目的根目录下的 `vue.config.js` 中调整相应参数[^4]。 4. （可选）配置 IDE 插件支持： 对于 Visual Studio Code 用户来说，安装官方提供的 ESLint 插件能极大提升编码体验，实现实时语法高亮与错误提醒等功能。 5. 自定义规则 (按需操作)： 开发者可以根据团队内部约定或个人偏好进一步定制化 ESLint 检查准则，具体做法是在`.eslintrc.*`文件内编写特定规则描述。 6. 测试 ESLint 整合效果： 修改源码中的某些部分故意制造一些违反既定风格指南的情况，运行 `npm run lint` 查看是否正确报告了违规事项。 7. 将 ESLint 检测纳入 Git 提交流程： 利用 husky 及 lint-staged 等工具实现每次提交前自动执行静态分析任务，从而保障入库代码质量始终处于良好状态[^1]。 8. 关闭 ESLint 检查 (不推荐作为长期策略)： 若暂时不需要严格的代码审查机制，可通过设置 `lintOnSave=false` 来暂停该特性的工作，但这通常不是理想的解决办法[^3]。