Vue3——项目配置eslint+prettier

一、安装依赖

pnpm add -D eslint prettier eslint-plugin-vue vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier typescript-eslint

二、创建或修改 eslint.config.cjs

// eslint.config.cjs
const vuePlugin = require('eslint-plugin-vue');
const js = require('@eslint/js');
const tseslint = require('typescript-eslint');
const pluginPrettier = require('eslint-plugin-prettier');module.exports = [// 基础规则（替代 'eslint:recommended'）js.configs.recommended,// TypeScript 规则（替代 '@typescript-eslint/eslint-plugin' 推荐规则）...tseslint.configs.recommended,// Vue 规则{// 全局通用规则（适用于所有文件）files: ['**/*.{vue,ts,tsx,js,jsx,cjs,mjs,mts,cts}'],// 新增 ignores 字段ignores: ['**/dist','**/node_modules','**/public','**/build','**/.vite','**/.eslintrc.js','**/*.min.*'],plugins: {vue: vuePlugin},languageOptions: {parser: require('vue-eslint-parser'),parserOptions: {ecmaVersion: 2020,sourceType: 'module',parser: require('@typescript-eslint/parser'), // 支持 Vue 中的 <script setup>vueFeatures: {filters: true,defaultLegacyBehavior: false}}},rules: {'no-undef': 'off','vue/no-unused-components': 'off','vue/multi-word-component-names': 'off','vue/require-default-prop': 'off','@typescript-eslint/no-require-imports': 'off','@typescript-eslint/no-unused-vars': 'warn','vue/v-on-style': ['warn', 'shorthand'],'vue/v-bind-style': ['warn', 'shorthand'],'vue/no-spaces-around-equal-signs-in-attribute': 'error'}},// 使用 Prettier 推荐配置{files: ['**/*.{vue,ts,tsx,js,jsx,cjs,mjs,mts,cts}'],plugins: {prettier: pluginPrettier},rules: {'prettier/prettier': ['error']}},// 自定义通用规则{rules: {'prefer-const': 'warn','no-console': ['warn', { allow: ['warn', 'error'] }],'no-debugger': 'error'}}
];

三、创建 .prettierrc 配置文件

{"printWidth": 100,"tabWidth": 2,"useTabs": false,"semi": true,"singleQuote": true,"quoteProps": "as-needed","jsxSingleQuote": false,"trailingComma": "none","bracketSpacing": true,"bracketSameLine": false,"arrowParens": "avoid","requirePragma": false,"insertPragma": false,"proseWrap": "preserve","htmlWhitespaceSensitivity": "css","vueIndentScriptAndStyle": false,"endOfLine": "auto","rangeStart": 0
}

四、添加 .prettierignore 忽略文件（可选）

/dist/*
/low-code-platform/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
stats.html

五、更新 package.json 添加脚本

{"scripts": {"lint": "eslint . --ext .ts,.vue,.js","lint:fix": "eslint . --ext .ts,.vue,.js --fix","format": "prettier --write .","format:check": "prettier --check ."}
}

六、VS Code 设置（推荐）

{"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode","[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}

七、验证是否有效

pnpm run lint
pnpm run lint:fix
pnpm run format
pnpm run format:check

八、安装vscode的插件