更漂亮自相矛盾

Question

我是一个使用制表符而不是 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 不是那么流行，但至少应该有一个像样的配置。每次 google 搜索都会让我看到 Nuxt 的通用配置文档。

Answer 1

有很多变量可能导致此问题，试试这些：

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

如评论中所述，在 .prettierrc 中添加 tabWidth:4 也可以修复它！

Link to Prettier docs

还可以查看您的 VSCode Workspace/User 设置，看看是否在那里设置了 tabWidth。

Answer 2

我要用头撞墙

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

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

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

为什么？

编辑： 进入命令列表 (F1)，Developer: Reload window 似乎在不关闭和打开的情况下执行操作。

~~注意：这也会关闭并重新打开所有 Console/Terminal 个实例。~~

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

更漂亮自相矛盾

Prettier contradicting itself

eslint

vue.js

visual-studio-code

nuxt.js

prettier