Vue运行时Lint配置：解决npm run serve的ESLint-Prettier警告问题

我完全懂你的困扰——编辑器里明明设置好了4空格，结果构建时ESLint还跳出来找茬，这是因为项目级别的ESLint/Prettier配置才是构建工具遵守的核心规则，VSCode的本地设置只影响编辑器的实时格式化，管不了打包时的代码检查。下面一步步帮你搞定：

第一步：统一项目的Prettier配置 #

先检查项目根目录有没有.prettierrc（或.prettierrc.json）文件，没有的话直接新建一个，把你的规则写进去：

{
  "tabWidth": 4, // 强制4空格缩进，对应你遇到的缩进警告
  "semi": false  // 如果你不需要自动加分号，就设为false；需要分号的话改成true，解决第一个警告的分号要求
}

如果你的项目是把Prettier配置写在package.json里的，找到prettier字段替换成上面的内容即可。

第二步：让ESLint和Prettier规则严格对齐 #

打开项目里的.eslintrc.js（或.eslintrc.json），确保它正确继承Prettier规则，并且明确指定缩进相关配置：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier' // 核心配置：让ESLint复用Prettier的格式化规则
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 额外强制ESLint的缩进规则与Prettier一致
    'indent': ['warn', 4],
    // 直接给prettier规则传参数，确保优先级最高
    'prettier/prettier': ['warn', {
      tabWidth: 4,
      semi: false
    }]
  }
}

第三步：修复现有代码并重启服务 #

1. 先运行这条命令，让ESLint自动修复所有符合新规则的代码：

   npm run lint -- --fix
   

2. 关掉当前的npm run serve服务，重新启动，同时重启一下VSCode（避免编辑器缓存旧配置）。

为什么VSCode的设置没用？ #

VSCode里的Prettier和Vetur配置只负责你在编辑器里写代码时的实时格式化，但npm run serve时是用项目依赖里的eslint-loader调用ESLint，它只会读取项目根目录的配置文件，所以必须把项目级配置和编辑器设置统一，才能两边都不报错。

内容的提问来源于stack exchange，提问作者realtebo