Unable to set tabWidth

[joshagudo]

Getting an error trying to set the tab width to 2.

Atom version = 1.18.0 prettier-atom = 0.37.0

[robwise]

@joshagudo This is a super annoying atom bug that we've been seeing a lot. Can you check your actual CSON file and manually ensure that the 2 is a number and not a string ("2")?

[joshagudo]

@robwise manually updating it from "2" still doesn't seem to apply any change (reverts back to editor tabWidth). I've ensured that when manually formatting a file the following exists in the configuration file: tabWidth: 2

[robwise]

Can you copy and paste everything under "prettier-atom" in your config.cson?

[joshagudo]

"prettier-atom":
    formatOnSaveOptions:
      enabled: true
    prettierOptions:
      jsxBracketSameLine: true
      useTabs: true
      tabWidth: 2

[robwise]

This is really leaving me scratching my head—these settings look perfectly fine.

[robwise]

This might be a long shot, but can you try the fix in this comment? https://github.com/prettier/prettier-atom/issues/169#issuecomment-305466675

[joshagudo]

@robwise unfortunately no luck even after clearing state - with tabWidth in config.cson it seems to still refer to the editor.tabLength. If this helps here is from debug:

prettier-atom: details on current install
Atom version: 1.18.0
prettier-atom version: 0.37.0
prettier version: 1.5.3
prettier-eslint version: 6.4.2
prettier-atom configuration: {
  "formatOnSaveOptions": {
    "enabled": true,
    "respectEslintignore": true,
    "showInStatusBar": false,
    "javascriptScopes": [
      "source.js",
      "source.jsx",
      "source.js.jsx",
      "source.babel",
      "source.js-semantic",
      "text.html.basic",
      "text.html.vue"
    ],
    "typescriptScopes": [
      "source.ts",
      "source.tsx",
      "source.ts.tsx"
    ],
    "cssScopes": [
      "source.css",
      "source.less",
      "source.css.less",
      "source.scss",
      "source.css.scss"
    ],
    "jsonScopes": [
      "source.json"
    ],
    "graphQlScopes": [
      "source.graphql"
    ],
    "excludedGlobs": [],
    "whitelistedGlobs": [],
    "isDisabledIfNotInPackageJson": false
  },
  "prettierOptions": {
    "jsxBracketSameLine": true,
    "useTabs": true,
    "singleQuote": false,
    "bracketSpacing": true,
    "semi": true,
    "printWidth": 80,
    "tabWidth": "auto",
    "trailingComma": "none",
    "parser": "babylon"
  },
  "useEslint": false,
  "useEditorConfig": true,
  "prettierEslintOptions": {
    "prettierLast": false
  }
}

here is my entire config.cson:

"*":
  Ensime:
    markImplicitsAutomatically: false
    sbtExec: "/opt/sbt-launcher-packaging-0.13.13/bin/sbt"
  autosave:
    enabled: true
  "color-picker":
    preferredFormat: "HEX"
  core:
    packagesWithKeymapsDisabled: [
      "goto-last-edit"
    ]
  editor:
    tabLength: 4
    tabType: "soft"
  "exception-reporting":
    userId: "a6065fbb-9138-7566-bd70-b55fe15a4cf3"
  "goto-last-edit": {}
  linter:
    errorPanelHeight: 24
  "platformio-ide-terminal":
    core:
      shell: "/bin/bash"
    style:
      theme: "solarized-dark"
  "prettier-atom":
    formatOnSaveOptions:
      enabled: true
    prettierOptions:
      jsxBracketSameLine: true
      useTabs: true
      tabWidth: 2

[darahak]

Apparently the tabWidth setting was a number in earlier versions of prettier-atom. In these versions, the config schema was still defined in package.json.

@joshagudo Can you check the contents of ~/.atom/.apm/prettier-atom and delete pre-0.19.1 folders if you have any? I'm wondering if Atom can still pick up schema definitions from there.

[joshagudo]

@darahak sorry for the late response. I've only got 0.37.0 and 0.38.0 (having just updated). Still the same behaviour unfortunately.

[darahak]

@joshagudo Is there any error in DevTools that could give us more details? Still in DevTools, if you execute atom.config.get('prettier-atom.prettierOptions') in the console, what do you get? If you execute atom.config.unset('prettier-atom.prettierOptions.tabWidth') and retry, what happens? (with and without reload eventually)

[darahak]

I figured it out. I'm facepalming so hard.

In our options, tabWidth is a string, but Prettier only accepts a number (ref). If it's set to "auto", we grab it from Atom settings which is already stored as a number.

If not, during the whole format process, the string is never converted before it's passed to Prettier (the validation error comes from there).

@robwise Things we have to do in addition to fixing the bug:

• Remove the workaround from our README.md: putting a number triggers an error with the config schema and it falls back to the default, which is "auto". That's why it worked sometimes; because if it got lucky, it could get the tab width the user wanted from the editor settings.
• Update our tests and cover return values with Flow? I don't know if there's a good way to do this with Atom settings that can return any types...

[robwise]

@darahak But we convert it to a number if set to "auto" here?: https://github.com/prettier/prettier-atom/blob/master/src/executePrettier/buildPrettierOptions.js#L28-L30

[darahak]

Yes, the Atom config directly returns a number. But not really a conversion as it overrides our setting value.