关于vue项目使用esLint保存后出现的问题解决办法

.prettierrc.js文件
在vue项目开发的过程中，我们不可避免的要使用esLint代码格式化工具的使用，这不仅使我们写出来的代码更加规范，而且会让我们养成良好的编程习惯，使写出来的代码更加简洁漂亮，官方也提倡我们在开发的过程中使用它。

问题背景：

1. 由于vue项目中有些地方必须使用单引号，但是在我们Ctrl + Alt + f 格式化代码的时候会将单引号自动的转成双引号，这个时候esLint就会报出许多的错误，手动改的话又浪费时间。

2. 在我们Ctrl + Alt + f 格式化代码的时候会出现在每一行的末尾添加上;顿号，这时esLint又会报出许多的错误，让我们开发起来很不方便。

3. 当然，不止这两个问题，还有其他很多问题，但是这两个最常见，同时也能解决一大部分问题。

有关以上两个问题的解决办法，在网上找了好久，终于功夫不负有心人，下面就来说说怎么解决它：

• 首先：
  我们在项目的根目录下新建一个文件，文件名叫.prettierrc
• 然后：
  我们只需要在文件中增加两行配置就可以有效的解决以上两个问题了

配置1：

{
  // 取消格式化代码后, 每行的末尾自动添加 ";"
  "semi": false,
}

配置2：

{
  // 取消格式化代码后，单引号转变成双引号
  "singleQuote": true
}

注意: 要遵循json格式

最全配置，如下：

module.exports = {
  // 缩进字节数
  tabWidth: 2,
  // 使用单引号代替双引号
  singleQuote: true,
  // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  trailingComma: 'none',
  // 句尾添加分号
  semi: true,
  // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  proseWrap: 'always',
  //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  arrowParens: 'avoid',
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  bracketSpacing: true,
  // 在jsx中把'>' 是否单独放一行
  jsxBracketSameLine: false,
  // 缩进不使用tab，使用空格
  useTabs: false,
  // 不让prettier使用eslint的代码格式进行校验
  eslintIntegration: true,
  overrides: [
    {
      files: '.prettierrc',
      options: {
        parser: 'json'
      }
    }
  ],
  endOfLine: 'auto'
}