首选项配置+Eslint+prettier+Vetur

最新推荐文章于 2025-02-28 09:07:50 发布

Beam007

最新推荐文章于 2025-02-28 09:07:50 发布

阅读量1.1k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/112832455

版权

本文详细介绍了在Vue项目中如何配置Eslint、Prettier和Vetur，包括扩展安装、首选项设置、Eslint与Prettier的配置，以及不同文件类型的格式化效果，特别提到了jsx语法的处理和解决自动格式化问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0、需要安装如下扩展

在这里插入图片描述
首选项配置里面有使用到，需要以上四个格式化工具配合使用。
需要注意的是，eslint启用后如果出现import有下划线等错误，需要注意右下角有没有禁用：

点击开启即可。
Eslint下划线报错信息：
ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog
参考文章：
https://blog.youkuaiyun.com/qq_42381128/article/details/109438147

1、设置首选项

文件-首选项-设置配置如下：（即setting.json文件）

{
  // 每次保存自动格式化
  "editor.formatOnSave": true,
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // vue文件默认格式化方式vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // vetur格式化配置
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.options.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    }
  },

最低0.47元/天解锁文章