Got it, let's break this down step by step so you can get the vue-script-indent rule working seamlessly with your existing setup.

Step 1: Update Your VS Code settings.json #

First, you need to tell ESLint to validate Vue files (right now your config only checks JavaScript). Here's your modified settings.json with the necessary tweak:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "vue"], // Added "vue" to enable ESLint for Vue files
  "vetur.useWorkspaceDependencies": true,
  "vetur.validation.style": false,
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.html": "prettier",
  "[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "octref.vetur"
  },
  "eslint.format.enable": true
}

Adding "vue" to the eslint.validate array ensures ESLint scans the script sections of your Vue files, which is required for the vue-script-indent rule to take effect.

Step 2: Configure the vue-script-indent Rule in Your ESLint Config #

The vue-script-indent rule is part of eslint-plugin-vue, so first make sure this plugin is installed in your project:

npm install eslint-plugin-vue --save-dev
# Or for yarn users:
yarn add eslint-plugin-vue --dev

Next, open your ESLint config file (usually .eslintrc.js or .eslintrc.json in your project root) and add the rule. Here's an example setup for .eslintrc.js:

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended', // Use 'plugin:vue/recommended' if you're on Vue 2
    'eslint:recommended'
  ],
  rules: {
    // Define your indentation preferences here
    'vue/script-indent': [
      'error',
      2, // Number of spaces per indent (adjust to your preference)
      {
        baseIndent: 0, // Match the indent level of your <script> tag (0 if it's at root level)
        switchCase: 1, // Indent switch case statements by 1 level
        ignores: [] // Leave empty unless you need to exclude specific code blocks
      }
    ]
  },
  parserOptions: {
    ecmaVersion: 'latest'
  }
};

Tweak the numbers and options to match your team's style guide—for example, change 2 to 4 if you prefer tab-style indentation (though most projects use spaces here).

Step 3: Test It Out #

Save your updated settings and ESLint config, then open a Vue file with inconsistent script indentation. When you save the file, ESLint should automatically fix any indentation issues that violate your new rule. If you see errors in the editor, double-check that eslint-plugin-vue is installed correctly and your rule options are set properly.

Quick note: Since you're using Vetur for formatting, keep an eye out for conflicts between Vetur's JS formatter (prettier-eslint) and ESLint's indent rule. The source.fixAll.eslint setting should take priority on save, but if you run into issues, you can disable Vetur's JS formatting and let ESLint handle all script formatting entirely.

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