更漂亮的自相矛盾

如何解决更漂亮的自相矛盾

我是一个使用制表符而不是 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 的通用配置文档。

解决方法

我要撞墙了。

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

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

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

为什么？

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

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

,

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

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

正如评论中提到的，在 .prettierrc 中添加 tabWidth:4 也能解决这个问题！”

Link to Prettier docs

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