vue中配置Eslint的步骤

1. 安装ESLint相关依赖

# 安装ESLint核心包
npm install --save-dev eslint# 安装Vue相关插件
npm install --save-dev eslint-plugin-vue vue-eslint-parser# 安装JavaScript推荐配置
npm install --save-dev @eslint/js globals# 安装Prettier相关（用于代码格式化）
npm install --save-dev prettier eslint-plugin-prettier

2. 创建ESLint配置文件

import globals from 'globals';
import pluginJs from '@eslint/js';
import pluginVue from 'eslint-plugin-vue';
import vueParser from 'vue-eslint-parser';
import prettier from 'eslint-plugin-prettier';export default [// 全局忽略配置{ignores: ['**/*.config.js','dist/**','node_modules/**','!**/eslint.config.js',],},// JavaScript文件配置{files: ['**/*.js', '**/*.mjs'],//针对.js和.mjs文件languageOptions: {globals: globals.browser,ecmaVersion: 'latest',sourceType: 'module',},plugins: {prettier,},rules: {'prettier/prettier': 'error','no-var': 'error',// 禁止使用var'no-multiple-empty-lines': ['warn', { max: 1 }],//最多允许1个空行'no-console': 'warn',//禁止使用console'no-debugger': 'warn',//禁止使用debugger'no-unexpected-multiline': 'error',//防止意外的多行语句'no-useless-escape': 'off',//关闭对不必要转义字符的检查'no-unused-vars': 'error',//禁止未使用的变量},},// Vue文件配置{files: ['**/*.vue'],languageOptions: {globals: globals.browser,parser: vueParser,parserOptions: {ecmaVersion: 'latest',sourceType: 'module',ecmaFeatures: {jsx: true,},},},plugins: {prettier,vue: pluginVue,},rules: {'prettier/prettier': 'error','no-var': 'error','no-multiple-empty-lines': ['warn', { max: 1 }],'no-console': 'warn','no-debugger': 'warn','no-unexpected-multiline': 'error','no-useless-escape': 'off','no-unused-vars': 'error',// Vue特定规则'vue/multi-word-component-names': 'off',//关闭组件名必须时多词的要求'vue/script-setup-uses-vars': 'error',//确保<script setup>中变量被正确使用'vue/no-mutating-props': 'off','vue/attribute-hyphenation': 'off','vue/valid-v-slot': ['error',{allowModifiers: true,},],},},// 推荐配置pluginJs.configs.recommended,//将使用区推荐的有关JavaScript的ESLint规则...pluginVue.configs['flat/essential'],// 使用Vue.js的基本ESLint规则
];

3. 配置package.json脚本

{"scripts": {"lint": "eslint . --fix","lint:check": "eslint .","format": "prettier --write ."}
}

4. 创建prettier配置文件

对代码进行格式化配置

{"semi": true,// 在每个语句的末尾添加分号"singleQuote": true,// 使用单引号"tabWidth": 2,// 设置缩进的空格数为2"useTabs": false,// 使用空格缩进"printWidth": 100,//每行的最大字符数为100"trailingComma": "all"//在多行结构的最后一个元素后添加逗号
}

5. 运行后检查

# 检查代码
npm run lint:check# 检查并自动修复
npm run lint# 格式化代码
npm run format