自相矛盾的漂亮

Question

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

我的.prettierrc 文件：

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

还有 my.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: {},
}

我还将它添加到我的 settings.json 在 VsCode

（编辑以反映 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 的通用配置文档。

Answer 1

我要用头撞墙。

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

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

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

只是为什么？

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

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

不再。 您可以安全地重新加载而不会丢失终端。

Answer 2

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

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

正如评论中提到的，添加 tabWidth:4 in.prettierrc 也可以解决它！”

链接到更漂亮的文档

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