【前端】vscode 相关插件

最新推荐文章于 2026-03-20 09:20:05 发布

原创最新推荐文章于 2026-03-20 09:20:05 发布 · 392 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

大鹏展翅

GEO检测

本文介绍了如何在Vue项目中集成ESLint进行代码检查，Prettier进行代码格式化，并通过全局配置实现保存时自动格式化。还提到了如何处理Vetur和Prettier之间的冲突。

AI 驱动代码审查实战

Claude code-review 插件深度解析，把 AI 智能审查接进 CI/CD 流水线

一键订阅

一插件：

01、ESLint

用来识别并检查ECMAScript/JavaScript 代码的工具
在这里插入图片描述

02、Prettier

用来格式化代码，如.js、.vue、css等都可以进行格式化
在这里插入图片描述

03、Vetur

用来识别并高亮vue语法
在这里插入图片描述

04、EditorConfig

用来设置vscode的编程行为
在这里插入图片描述

二、安装依赖

01、安装 ESlint 的依赖

npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint

eslint ：ESlint 的核心代码
babel-eslint：eslint和babel的整合包
eslint-plugin-vue @vue/cli-plugin-eslint：eslint和vue的整合包

02、安装 Prettier 依赖

适应vue3以下：

npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

prettier：Prettier的核心代码
eslint-plugin-prettier：将prettier作为ESLint规范来使用
eslint-config-prettier：解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效
prettier-eslint-cli：prettier-eslint-cli 允许你对多个文件用 prettier-eslint 进行格式化

适用vue3：

 npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

三、全局配置：

更改配置，使其在保存时会进行自动格式化：

settings.json补充

{
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "vetur.format.defaultFormatter.html": "prettier",
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}