[VSCode] Prettier和ESLint单双引号冲突

“工欲善其事，必先利其器。”

用了这么久的VS Code，今天写个简单页面，又磕磕绊绊弄了1个多小时。

首先是tabSize的问题，默认好像tabSize是4。

当然不想改全局配置，最好是基于项目的配置。

首先，在项目根目录，创建一个.vscode的目录，然后再目录下创建一个settings.json的文件。

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "prettier.semi": false,
  "prettier.singleQuote": true
}

tabSize改为2，formatOnSave保存时格式化开启。

此项目是通过Vue CLI创建的前端项目，默认选了ESlint。

结果应该是Prettier和ESlint冲突，报一堆warning，一会儿“单引号”，一会儿“双引号”，晕倒了。

在.eslintrc.js的rules里增加一行quotes，值为[1, 'singal']。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    semi: ['error', 'always'],
    quotes: ['error', 'single'],
  },
}

貌似还不行！
后搜了网上的文章，还是要加一个.prettierrc.js。

module.exports = {
  singleQuote: true,
  semi: false,
}

文章上说改后要重启VS Code，貌似有用。

但是，很奇怪，为什么settings.json里配置prettier.singleQuote的没有生效？

这个问题先留着，有路过的知道可以解答一下。