vue3项目 - Eslint 配置代码风格（保存格式化）

在Vue 3项目中配置ESLint以保证代码风格一致性并在保存时自动格式化，你需要按照以下步骤操作：

1. 安装必要的包：

npm install eslint eslint-plugin-vue --save-dev

2. 初始化ESLint配置文件（.eslintrc.js）：

module.exports = {
  extends: [
    // 添加 Vue 规则
    'plugin:vue/vue3-recommended',
    // 其他规则...
  ],
  rules: {
    // 自定义规则...
  }
};

3. 安装并配置Prettier：

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

在.eslintrc.js中添加插件和规则：

module.exports = {
  // ...
  extends: [
    // 添加 Prettier 规则
    'plugin:prettier/recommended'
  ],
  // 关闭 ESLint 规则，由 Prettier 处理
  rules: {
    'prettier/prettier': 'off',
    // 其他规则...
  }
};

4. 安装并配置eslint-plugin-prettier：

npm install eslint-plugin-prettier --save-dev

5. 在package.json中添加一个脚本来运行ESLint：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src"
  }
}

6. 保存时自动格式化，你可以使用编辑器插件，如VSCode中的ESLint和Vetur插件，或者通过安装npm脚本：

npm install --save-dev npm-run-all

然后在package.json中添加：

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,vue}\"",
    "watch": "npm run format && onchange 'src/**/*.{js,vue}' -- npm run format"
  }
}

运行npm run watch将启动一个监听程序，它会在你保存文件时自动格式化你的代码。

确保你的编辑器或IDE 配置了保存时运行linting工具，这样在保存文件时就会自动格式化代码。