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 文件来忽略某些文件或目录