简单的格式化配置ESLint 配合 Prettier
要让编辑器（例如 VS Code）自动处理多余的空格、自动格式化代码（如将 <div></div> 转换为 <div />），你可以安装和配置以下工具：
1. Prettier（推荐）
Prettier 是一款流行的代码格式化工具，支持多种语言和格式化规则。它可以自动处理多余的空格、代码缩进、以及将空标签转换为自闭合标签。
安装 Prettier 插件
• 如果你使用 VS Code，可以在扩展市场中搜索并安装 Prettier - Code formatter 插件。
安装 Prettier 依赖
在项目中安装 Prettier：
npm install --save-dev prettier
配置 Prettier
在项目根目录下创建一个 prettier.config.js 或 .prettierrc 文件：
// prettier.config.js
module.exports = {
semi: false, // 不使用分号
singleQuote: true, // 使用单引号
trailingComma: 'es5', // 对象或数组的最后一个元素后加逗号
bracketSpacing: true, // 对象字面量中的括号之间空格
jsxBracketSameLine: false, // JSX 标签的 `>` 单独一行
printWidth: 80, // 每行代码的最大长度
endOfLine: 'auto', // 处理不同系统的换行符
htmlWhitespaceSensitivity: 'ignore', // 忽略 HTML 中的空格敏感性
}
这会根据你的需求自动处理格式问题，比如多余的空格。
设置 Prettier 为默认格式化工具
在 VS Code 中的 settings.json 中添加：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.jsxSingleQuote": true,
"prettier.semi": false
}
• editor.formatOnSave: 设置为 true，每次保存文件时都会自动格式化代码。
• editor.defaultFormatter: 让 Prettier 成为默认的格式化工具。
2. ESLint 配合 Prettier
如果你的项目中已经使用 ESLint 进行代码质量检查，可以使用 eslint-config-prettier 让 ESLint 与 Prettier 配合工作，避免两者之间的冲突。
安装依赖
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
配置 ESLint
在 .eslintrc.js 中添加以下内容：
module.exports = {
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'plugin:prettier/recommended'
],
rules: {
'prettier/prettier': [
'error',
{
singleQuote: true,
semi: false,
},
],
},
};
配置解释
• plugin:prettier/recommended：集成 Prettier 的规则，确保 ESLint 与 Prettier 和谐共存。
• prettier/prettier：覆盖 Prettier 规则，让 ESLint 根据 Prettier 的配置进行格式化。