自相矛盾的漂亮答案

【问题标题】：Prettier contradicting itself自相矛盾的漂亮
【发布时间】：2021-04-13 17:12:00
【问题描述】：

我是一个使用制表符而不是 2 个空格的人。我使用了 create-nuxt-app 并选择了 ESLint + Prettier。全部写在 VSCode 上。预先构建的配置在那里，没关系。当我想使用制表符而不是空格时，问题就开始了。

我的 .prettierrc 文件：

{
  "semi": true,
  "singleQuote": true,
  "useTabs": true,
  "tabWidth": 4
}

还有我的 .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {},
}

我还在 VsCode 中的 settings.json 中添加了这个

（已编辑以反映 VSCode 中的所有设置）

{
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "One Dark Pro",
    "explorer.confirmDelete": false,
    "files.autoSave": "afterDelay",
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "window.zoomLevel": 0,
    "tabnine.experimentalAutoImports": true,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

在尝试保存内容后，它甚至无法解决 Vue linting 问题，而是自行解决。这简直让我把头发都扯掉了。

网站截图：

还有一张来自 VSCode 的图片，显示当我插入一个选项卡时，它会抛出一个更漂亮的错误，导致它变成 2 个空格。我疯了。

我也知道 Nuxt.js 不是那么受欢迎，但至少应该有一个不错的配置。每次谷歌搜索都会让我看到 Nuxt 的通用配置文档。

【问题讨论】：

标签： vue.js visual-studio-code nuxt.js eslint prettier

【解决方案1】：

有很多变量可能导致这种情况，试试这些：

“我认为这是因为在用户设置中指定了 tabWidth:4。而在工作区设置中没有指定任何内容，因此它使用工作区的默认值，即 tabWidth:2

正如 cmets 中提到的，在 .prettierrc 中添加 tabWidth:4 也可以解决问题！"

Link to Prettier docs

还可以查看您的 VSCode 工作区/用户设置以查看是否在此处设置了 tabWidth。

【讨论】：

【解决方案2】：

我要把我的头撞到墙上。

每次更改更漂亮的配置时都需要重新加载 VSCode 并重新运行 npm run dev

另外，为了正确格式化，VSCode 需要以下设置：

"editor.defaultFormatter": "esbenp.prettier-vscode",

为什么？

编辑：进入命令列表 (F1)，Developer: Reload window 似乎无需关闭和打开即可完成操作。

注意：这也会关闭并重新打开所有控制台/终端实例。

【讨论】：