VSCode Vue ESLint 格式化配置

skyuning

已于 2023-10-28 13:18:02 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：开发工具文章标签： vscode vue.js eslint 格式化 format

于 2021-12-28 23:53:36 首次发布

本文链接：https://blog.youkuaiyun.com/skyunlin/article/details/122183832

本文介绍了如何在VSCode中配置Vetur和ESLint插件，以实现Vue项目的代码格式化。虽然ESLint可以很好地遵循.eslintrc.js的规则，但无法格式化.vue文件中的<style>标签样式。而Vetur格式化则不完全符合ESLint规则，需要通过配置Vetur格式化规则并结合ESLint检查来手动调整代码格式。

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

Vetur、ESLint插件安装这里就不多说了，直接看vscode settings.json配置：

重要：
使用ESLint格式化，能很好的符合.eslintrc.js文件里配置的rules，但有个很大的瑕疵，就是vue文件<style>标签里的样式无法进行格式化，只能独立编写到单独的样式文件中，再在<style>标签里@import 。
看到有个相关插件 eslint-plugin-vue-scpoed-css 但是貌似不太好用，可配置项也比较少，期待后面的完善。

  // ESLint formatter
  "eslint.format.enable": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint", // 全局 formatter
  "[vue]": {
   
   
    "editor.defaultFormatter": "dbaeumer.vscode-eslint" // vue formatter
  },
  "[javascript]": {
   
   
    "editor.defaultFormatter": "dbaeumer.vscode-eslint" // js formatter
  },

使用Vetur格式化就无法自动符合.eslintrc.js里定义的规则了，只能配置Vetur的格式化规则，配合ESLint检查提示，手动调整到格式化的结果符合ESLint规则。

  // vue文件使用vetur格式化
  "[vue]": {
   
   
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.defaultFormatter.html":

最低0.47元/天解锁文章

200万优质内容无限畅学