vue脚手架级别的开发中，尤其刚搭建的系统，经常出现保存不一致，导致eslint报错的问题；
这里记录一下问题修改；
创建工程时候 eslitnt单独文件保存。
.eslintrc.js
在.eslintrc.js中的extends 添加一个对应版本的 prettier
如 ‘plugin:prettier/recommended’

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    'plugin:prettier/recommended'
  ],

创建单独的prettier文件 .prettierrc，保证其内部规则与eslint保持一致。不过基本配置如下：

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "none"
}

prettier.config.js

module.exports = {
  printWidth: 120,
  // tab缩进大小,默认为2
  tabWidth: 2,
  // 使用tab缩进，默认false
  useTabs: false,
  // 使用分号, 默认true
  semi: true,
  // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 行尾逗号,默认none,可选 none|es5|all
  // es5 包括es5中的数组、对象
  // all 包括函数对象等所有可选
  trailingComma: 'none',
  // 对象中的空格 默认true
  // true: { foo: bar }
  // false: {foo: bar}
  bracketSpacing: true,
  // JSX标签闭合位置 默认false
  // false: <div
  //          className=""
  //          style={{}}
  //       >
  // true: <div
  //          className=""
  //          style={{}} >
  jsxBracketSameLine: false,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: 'avoid',
  proseWrap: 'never',
  endOfLine: 'lf'
};

最后在vscode编辑器里边，右键 选择使用…格式化文档，选择配置默认格式化程序，在选中Prettier
这样保存结果跟prettier一致，也不会跟eslint有冲突了；