如何在WebStorm中配置Vuetify迁移专用ESLint？

Hey there! Let's get your Vuetify 1.5 → 2.x migration linter up and running smoothly, both via command line and in WebStorm. Here's a step-by-step breakdown:

1. Running the Linter Manually First #

Before diving into WebStorm config, let's confirm the linter works from the command line:

• If your package.json doesn't have a lint script, add one to the scripts section:

  "scripts": {
    // ... your existing scripts
    "lint": "vue-cli-service lint"
  }
  

• Run the linter with:

  npm run lint
  

  Or if you want to target specific files:

  npx eslint ./src/components/YourOldComponent.vue --ext .vue,.js
  

  This should output any Vuetify 2.x migration issues (like deprecated classes or grid attributes) based on the rules you've set.

2. Configuring WebStorm to Use the Migration Linter #

Follow these steps to get WebStorm to pick up the Vuetify ESLint rules:

Step 1: Open ESLint Settings #

Go to File > Settings (or press Ctrl+Alt+S on Windows/Linux, Cmd+, on Mac), then navigate to Languages & Frameworks > JavaScript > Code Quality Tools > ESLint.

Step 2: Enable Automatic Configuration #

• Check the Enable box at the top.
• Select Automatic ESLint configuration. WebStorm should automatically detect your project's .eslintrc.js file and local ESLint dependencies (including the eslint-plugin-vuetify).
• If automatic detection fails, use the Manual configuration option:
  • Click the ... button next to ESLint package and select the eslint folder inside your project's node_modules.
  • Point Configuration file to your project's .eslintrc.js.

Step 3: Verify Vuetify Rules Are Loaded #

• Click the Show eslint rules button in the ESLint settings window.
• Search for rules starting with vuetify/ (like vuetify/no-deprecated-classes). If you see them listed, the plugin is correctly loaded.

Step 4: Fix Common WebStorm Issues #

If the linter still isn't working in WebStorm, try these fixes:

• Reinstall dependencies: Run npm install to ensure all packages (including eslint-plugin-vuetify) are properly installed.
• Use project-local Node.js: Go to Settings > Languages & Frameworks > Node.js and NPM, make sure the Node interpreter is set to your project's local Node.js version (not a global one).
• Refresh or restart: Click the Refresh button in the ESLint settings, or restart WebStorm to apply configuration changes.
• Check file associations: Ensure WebStorm recognizes .vue files as Vue components. Go to Settings > Editor > File Types, find Vue.js in the list, and confirm .vue is included in the registered patterns.

Once configured, you should start seeing inline warnings/errors in your .vue files for Vuetify migration issues—like deprecated classes being highlighted in red.

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