如何在vscode中配置vue项目以使用eslint？

本文共计1597个文字，预计阅读时间需要7分钟。

前言：在VSCode的Vue项目中，关于代码检查和格式化，会遇到各种各样的问题，例如：

1. 不清楚安装的扩展功能，导致安装了重复的功能。

2.右键格式化文档时，不是按照ESLint规则来格式化。

前言

在vscode的vue项目中，关于代码检查和格式化，遇到各种各样的问题，比如：

• 不清楚安装的拓展的功能，导致安装了重复功能的拓展
• 右键格式化文档的时候，不是按eslint的规则来格式化，导致需要我再次手动调整
• 保存时不能自动修复代码

以下通过自己的实践，进行了相应配置，目前可以实现：

• 仅安装2个推荐的拓展
• 右键格式化文档按照eslint规则，不会产生错误
• 保存时自动修复代码

vscode 拓展安装

eslint 拓展

该拓展本身不带任何插件，当前项目要使用该拓展，需要安装相应的npm包（全局安装或当前项目安装）

对于 vue 项目，通常在 vscode 中做如下设置:

//保存时自动修复代码 "eslint.autoFixOnSave": true, "eslint.options": { // 应检查代码的文件扩展名数组 "extensions": [ ".js", ".vue" ] }, // 配置要验证的语言标识和自动修复选项，比前面两个配置的结合更为细粒度话。