webstorm 配置Eslint

1：WebStorm 设置

1：启用 ESLint：

打开 WebStorm 设置 (File > Settings 或 Ctrl+Alt+S)

导航到 Languages & Frameworks > JavaScript > Code Quality Tools > ESLint

勾选 “Enable”

2：配置 ESLint：

选择 “Automatic ESLint configuration”（推荐）让 WebStorm 自动检测

或者手动指定：

ESLint package：指向项目中的 node_modules/eslint

Configuration file：选择你的配置文件（如 .eslintrc.js）

3：配置自动修复：

在 Settings > Editor > Code Style > JavaScript

点击 “Set from…” 按钮并选择 “ESLint”

4：配置自动修复快捷键：

打开 Settings > Keymap

搜索 “Fix ESLint Problems”

添加快捷键（如 Alt+F）

2：配置的是.eslintrc.cjs文件（使用的可可以是webstorm是2022-2025之间版本，这个都是eslintv9以下的）

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    // '@vue/typescript/recommended',
    // 'plugin:prettier/recommended',
  ],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    parser: '@typescript-eslint/parser', // 使用 TypeScript 的 ESLint 解析器
  },
  rules: {
    'no-var': 'error',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    //
    // 'prettier/prettier': ['error', {}, { usePrettierrc: true }], // 使用项目中的 .prettierrc 配置文件
    'linebreak-style': 'off', // 禁用 ESLint 的换行风格规则，让 Prettier 控制
    quotes: 'off', // 禁用 ESLint 的引号规则，让 Prettier 控制
    'max-len': 'off', //禁用 ESLint 的 max-len 规则
  },
  plugins: [
    'vue', // ESLint Vue.js 插件的标识符，必须放在最后面使用 extends 引入规则集时才需要添加此项。否则可以省略。
    // 'prettier', // 使用 prettier 插件来关闭所有不必要的规则。确保它在 extends 数组的最后面。
  ],
}

2-1：package.json（版本直接的关系很严谨）

{
  "name": "test-01",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@types/node": "^22.15.30",
    "@vitejs/plugin-vue": "^5.2.3",
    "eslint": "^8.56.0",
    "eslint-plugin-vue": "^9.33.0",
    "globals": "^16.2.0",
    "prettier": "^3.5.3",
    "typescript-eslint": "^8.33.1",
    "vite": "^6.2.4",
    "vite-plugin-vue-devtools": "^7.7.2"
  }
}

2-2：自动生成配置文件命令 npx eslint --init，要注意有没有更改到eslint的版本，如果修改到了版本，那就是这个命令会造成eslint配置和版本很多不匹配的问题，所以还是自己手动生成eslint的配置文件，或者自己知道eslint的版本和插件一个一个安装，提示，配置eslint的版本是一个难点

 npx eslint --init

3：配置的是eslint.config.js文件（使用的必须是webstorm2025版本，，使用的是命令npm init @eslint/config@latest初始化官网，果使用以下版本会出现各种提示错误，这个都是eslintv9的）

import js from '@eslint/js'
import globals from 'globals'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],
    rules: {
      'no-var': 'error',
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'vue/multi-word-component-names': 'off',
    },
    plugins: { js },
    extends: ['js/recommended'],
  },
  { files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'], languageOptions: { globals: globals.browser } },
  tseslint.configs.recommended,
  pluginVue.configs['flat/essential'],
  { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },
])

3-1：package.json（版本直接的关系很严谨）

{
  "name": "test-01",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.28.0",
    "@types/node": "^22.15.30",
    "@vitejs/plugin-vue": "^5.2.3",
    "eslint": "^9.28.0",
    "eslint-plugin-vue": "^10.2.0",
    "globals": "^16.2.0",
    "prettier": "^3.5.3",
    "typescript-eslint": "^8.33.1",
    "vite": "^6.2.4",
    "vite-plugin-vue-devtools": "^7.7.2"
  }
}

.eslintignore

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
/node_modules/*
/dist*
/src/main.ts

注意事项

确保项目中有 package.json 文件
如果使用 TypeScript，需要安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin
对于大型项目，可以添加 .eslintignore 文件来忽略某些文件或目录