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