Prettier-atom: Format on save not working

[Zacqary]

Format on save seems to have stopped working for me after updating to 0.40.0. Nothing happens when I save my unformatted file. Formatting from the keyboard shortcut still works.

Prettier:Debug:

Atom version: 1.21.0
prettier-atom version: 0.40.0
prettier version: 1.7.4
prettier-eslint version: 8.2.0
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,
"isDisabledIfNoConfigFile": false
},
"prettierOptions": {
"singleQuote": true,
"bracketSpacing": true,
"semi": true,
"useTabs": false,
"jsxBracketSameLine": false,
"printWidth": 80,
"tabWidth": "auto",
"trailingComma": "none",
"parser": "babylon"
},
"useEslint": true,
"useEditorConfig": true,
"prettierEslintOptions": {
"prettierLast": false
}
}

[robwise]

@Zacqary I'm not sure what would cause this, can you open the Atom dev tools and make sure prettier-atom is not reporting an error or anything?

[Zacqary]

The only thing the dev tools are logging is this pair of errors:

That happens when I hit Cmd+S to save, but it also seems to be happening whenever <atom-text-editor> comes into focus (e.g. clicking on the dev tools, then clicking back on the main text editor).

[robwise]

Hmm, could be a red herring, not sure. If there was a problem where the save event handler was not getting fired, then that could explain why formatOnSave is not called. Can you try running Atom in safe mode (atom --safe) and see if you still get that error in your dev tools?

If not, can you enable only prettier-atom and see if the behavior still happens?

[Zacqary]

Well I think that error is definitely a red herring, because it stopped happening. Unfortunately, disabling all other packages but prettier-atom didn't solve the issue. I tried selectively re-enabling other packages, but nothing seemed to work.

[sompylasar]

Prettier:Debug

Atom version: 1.21.0
prettier-atom version: 0.40.0
prettier version: 1.7.0
prettier-eslint version: 8.1.1
prettier-atom configuration: {
  "formatOnSaveOptions": {
    "enabled": true,
    "isDisabledIfNoConfigFile": 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": {
    "printWidth": 200,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "semi": true,
    "useTabs": false,
    "jsxBracketSameLine": false,
    "tabWidth": "auto",
    "parser": "babylon"
  },
  "useEslint": true,
  "useEditorConfig": true,
  "prettierEslintOptions": {
    "prettierLast": false
  }
}

---

Either of the options ("if found in package.json" and "if config file found") stop prettier from formatting on save (without them checked, it formats):

Also, this is happening in console:

indieDelegate is null:

[sompylasar]

I found the repro steps and the cause: missing cache invalidation (the hardest problem in computer science 😜 ).

Repro

1. Set the options to Only format if a Prettier config is found:
   

2. Open a project without (!) a .prettierrc file.

3. Add a .prettierrc file, for example:
   { "printWidth": 80 }
4. Open a .js file from the project, make changes, hit Save.

Expected: Prettier applied, changes saved.
Actual: Prettier not applied, changes saved.

Cause

prettier-atom uses prettier.resolveConfig.sync to find and load the Prettier config files; prettier in turn uses a memoized instance of cosmiconfig "explorer" to find and load the files.

If this directoryCache is populated before the .prettierrc file is created, it doesn't get cleared and reports that there are no files to read, so this result of the load is null, and this isPrettierConfigPresent returns false.

Solution

prettier-atom should detect the directory and file changes and clear the caches.

prettier exports the clearConfigCache function which should dispose the memoized instance of cosmiconfig "explorer" and this should dispose the caches in cosmiconfig because they are stored in closures bound to the "explorer" instance methods.

Notes

I couldn't reproduce the ignorance of package.json dependencies/devDependencies using the same steps (installing after opening the project); also, lodash/fp is a hell to debug, especially when e.g. _.flow or _.cond is not wrapped with a function where you can set a breakpoint.

[robwise]

Seems like this turned out to be the problem as described in https://github.com/prettier/prettier-atom/issues/270?

lodash/fp is a hell to debug, especially when e.g. _.flow or _.cond is not wrapped with a function where you can set a breakpoint.

I think it's easier! Just use _.tap(console.log) and move it around to whichever step you want introspection on.

const myFunc = _.flow(
  doA,
  doB,
  _.tap(console.log),
  doC,
);

Also, I have this as a snippet:

  'bug':
    'prefix': 'bug'
    'body': '(() => { console.log(${0}); })() ||'

So if you want to see what myVar is in the following before calling doSomething:

const myFunc = (myVar) => doSomething(myVar);

You just insert the snippet. You can also put debugger there if you prefer

const myFunc = (myVar) => (() => { console.log(myVar); })() || doSomething(myVar);

^ This is especially useful if you use SFCs in React

[sompylasar]

@robwise

1) Yes, for .prettierrc (and the config files) it looks like https://github.com/prettier/prettier-atom/issues/270 – but I'm not sure about package.json dependencies, from the first glance there was something else.

2) Thank you for the debugging tips. Yes, I found _.tap and could use it for debugging, but this requires code changes, and every time the code needs to change, Atom needs to be restarted. I wanted to put "taps" on demand in the debugger without code change and restarting, and this was easy for the "flows" wrapped into named functions, but those functions which seemed to have issues aren't wrapped, so I had to step through every bits lodash/fp code like for an hour (that's where I lost patience to find the package.json issue). I'll get back to this.

[leepowelldev]

Not sure if this is related, but the 'Only format if Prettier is found in your project's dependencies' option when checked (and dependency exists) prevents formatting on save.

[SavePointSam]

Gonna try and take a look myself and see what I can do!

[SavePointSam]

So, it appears this issue has a bunch of smaller issues all bundled into one. I'm going to tackle each one at a time and sort them through separate issues so we can keep conversations clear.

I'm going to start with the issues of reloading Prettier configurations which lives over on #270.

[SavePointSam]

Hey @Zacqary, could you please let me know if you're still having issues and possibly provide anymore information? I'm not seeing anything we will be able to do to help with the issues you're having. I did find this issue, it appears something in your Atom installation got corrupted and you may need to reinstall.

[SavePointSam]

The only other issue I see from this discussion is that when enabling 'Only format' options, formatting on save is completely disabled. I'll create a dedicated issue for that shortly so we can get to the root of that as well.

[SavePointSam]

I'd also like to look more into your linter integration issue, @sompylasar. Can you give me a list of your installed packages? Is this still something you can reproduce?

[sompylasar]

@SavePointSam Firstly, many thanks for working on this. Secondly, I don't use Prettier now on a daily basis (because of this issue and because we as a team haven't adopted it) and I have a few rush days/weeks/releases now so I won't be able to reproduce timely.

packages.json

[
    {
        "name": "about",
        "version": "1.7.8"
    },
    {
        "name": "advanced-open-file",
        "version": "0.16.7"
    },
    {
        "name": "archive-view",
        "version": "0.63.4"
    },
    {
        "name": "atom-clang",
        "version": "1.0.14"
    },
    {
        "name": "atom-cursor-indent",
        "version": "0.3.0"
    },
    {
        "name": "atom-dark-syntax",
        "version": "0.28.0",
        "theme": "syntax"
    },
    {
        "name": "atom-dark-ui",
        "version": "0.53.0",
        "theme": "ui"
    },
    {
        "name": "atom-ide-ui",
        "version": "0.7.2"
    },
    {
        "name": "atom-light-syntax",
        "version": "0.29.0",
        "theme": "syntax"
    },
    {
        "name": "atom-light-ui",
        "version": "0.46.0",
        "theme": "ui"
    },
    {
        "name": "atom-typescript",
        "version": "11.0.10"
    },
    {
        "name": "autocomplete-atom-api",
        "version": "0.10.3"
    },
    {
        "name": "autocomplete-css",
        "version": "0.17.3"
    },
    {
        "name": "autocomplete-flow",
        "version": "1.6.0"
    },
    {
        "name": "autocomplete-html",
        "version": "0.8.2"
    },
    {
        "name": "autocomplete-plus",
        "version": "2.36.11"
    },
    {
        "name": "autocomplete-snippets",
        "version": "1.11.2"
    },
    {
        "name": "autoflow",
        "version": "0.29.0"
    },
    {
        "name": "autosave",
        "version": "0.24.6"
    },
    {
        "name": "background-tips",
        "version": "0.27.1"
    },
    {
        "name": "base16-tomorrow-dark-theme",
        "version": "1.5.0",
        "theme": "syntax"
    },
    {
        "name": "base16-tomorrow-light-theme",
        "version": "1.5.0",
        "theme": "syntax"
    },
    {
        "name": "bookmarks",
        "version": "0.44.4"
    },
    {
        "name": "bracket-matcher",
        "version": "0.88.0"
    },
    {
        "name": "busy-signal",
        "version": "1.4.3"
    },
    {
        "name": "command-palette",
        "version": "0.41.1"
    },
    {
        "name": "copy-filename",
        "version": "1.1.0"
    },
    {
        "name": "custom-title",
        "version": "1.0.1"
    },
    {
        "name": "dalek",
        "version": "0.2.1"
    },
    {
        "name": "deprecation-cop",
        "version": "0.56.9"
    },
    {
        "name": "dev-live-reload",
        "version": "0.47.1"
    },
    {
        "name": "docblockr",
        "version": "0.13.6"
    },
    {
        "name": "encoding-selector",
        "version": "0.23.6"
    },
    {
        "name": "exception-reporting",
        "version": "0.41.4"
    },
    {
        "name": "file-icons",
        "version": "2.1.15"
    },
    {
        "name": "find-and-replace",
        "version": "0.212.3"
    },
    {
        "name": "flow-ide",
        "version": "1.10.0"
    },
    {
        "name": "fuzzy-finder",
        "version": "1.6.1"
    },
    {
        "name": "git-diff",
        "version": "1.3.6"
    },
    {
        "name": "git-time-machine",
        "version": "1.5.9"
    },
    {
        "name": "github",
        "version": "0.7.0"
    },
    {
        "name": "go-to-line",
        "version": "0.32.1"
    },
    {
        "name": "grammar-selector",
        "version": "0.49.6"
    },
    {
        "name": "grammar-token-limit",
        "version": "0.1.1"
    },
    {
        "name": "highlight-selected",
        "version": "0.13.1"
    },
    {
        "name": "hyperclick",
        "version": "0.0.0"
    },
    {
        "name": "ide-csharp",
        "version": "0.6.1"
    },
    {
        "name": "ide-typescript",
        "version": "0.7.2"
    },
    {
        "name": "image-view",
        "version": "0.62.4"
    },
    {
        "name": "incompatible-packages",
        "version": "0.27.3"
    },
    {
        "name": "intentions",
        "version": "1.1.5"
    },
    {
        "name": "ionide-fake",
        "version": "1.2.2"
    },
    {
        "name": "ionide-fsharp",
        "version": "1.9.3"
    },
    {
        "name": "ionide-fsi",
        "version": "2.1.3"
    },
    {
        "name": "ionide-installer",
        "version": "1.4.0"
    },
    {
        "name": "ionide-paket",
        "version": "2.2.6"
    },
    {
        "name": "ionide-webview",
        "version": "1.0.3"
    },
    {
        "name": "js-hyperclick",
        "version": "1.12.2"
    },
    {
        "name": "keybinding-resolver",
        "version": "0.38.0"
    },
    {
        "name": "language-babel",
        "version": "2.82.0"
    },
    {
        "name": "language-c",
        "version": "0.58.1"
    },
    {
        "name": "language-clojure",
        "version": "0.22.4"
    },
    {
        "name": "language-coffee-script",
        "version": "0.49.1"
    },
    {
        "name": "language-cpp14",
        "version": "0.6.2"
    },
    {
        "name": "language-csharp",
        "version": "0.14.2"
    },
    {
        "name": "language-cshtml",
        "version": "0.3.0"
    },
    {
        "name": "language-css",
        "version": "0.42.6"
    },
    {
        "name": "language-fsharp",
        "version": "0.8.4"
    },
    {
        "name": "language-gfm",
        "version": "0.90.1"
    },
    {
        "name": "language-git",
        "version": "0.19.1"
    },
    {
        "name": "language-glsl",
        "version": "2.0.4"
    },
    {
        "name": "language-go",
        "version": "0.44.2"
    },
    {
        "name": "language-html",
        "version": "0.48.2"
    },
    {
        "name": "language-hyperlink",
        "version": "0.16.2"
    },
    {
        "name": "language-java",
        "version": "0.27.4"
    },
    {
        "name": "language-javascript",
        "version": "0.127.5"
    },
    {
        "name": "language-json",
        "version": "0.19.1"
    },
    {
        "name": "language-less",
        "version": "0.33.0"
    },
    {
        "name": "language-make",
        "version": "0.22.3"
    },
    {
        "name": "language-mustache",
        "version": "0.14.3"
    },
    {
        "name": "language-objective-c",
        "version": "0.15.1"
    },
    {
        "name": "language-perl",
        "version": "0.37.0"
    },
    {
        "name": "language-pgsql",
        "version": "0.2.3"
    },
    {
        "name": "language-php",
        "version": "0.42.0"
    },
    {
        "name": "language-property-list",
        "version": "0.9.1"
    },
    {
        "name": "language-python",
        "version": "0.45.4"
    },
    {
        "name": "language-ruby",
        "version": "0.71.3"
    },
    {
        "name": "language-ruby-on-rails",
        "version": "0.25.2"
    },
    {
        "name": "language-sass",
        "version": "0.61.1"
    },
    {
        "name": "language-shellscript",
        "version": "0.25.3"
    },
    {
        "name": "language-source",
        "version": "0.9.0"
    },
    {
        "name": "language-sql",
        "version": "0.25.8"
    },
    {
        "name": "language-svg",
        "version": "0.9.2"
    },
    {
        "name": "language-text",
        "version": "0.7.3"
    },
    {
        "name": "language-todo",
        "version": "0.29.2"
    },
    {
        "name": "language-todo-extra-words",
        "version": "0.2.0"
    },
    {
        "name": "language-toml",
        "version": "0.18.1"
    },
    {
        "name": "language-typescript",
        "version": "0.2.1"
    },
    {
        "name": "language-typescript-grammars-only",
        "version": "1.6.0"
    },
    {
        "name": "language-xml",
        "version": "0.35.2"
    },
    {
        "name": "language-yaml",
        "version": "0.31.0"
    },
    {
        "name": "line-ending-selector",
        "version": "0.7.4"
    },
    {
        "name": "link",
        "version": "0.31.3"
    },
    {
        "name": "linter",
        "version": "2.2.0"
    },
    {
        "name": "linter-coffeelint",
        "version": "1.3.1"
    },
    {
        "name": "linter-eslint",
        "version": "8.4.1"
    },
    {
        "name": "linter-flow",
        "version": "5.6.1"
    },
    {
        "name": "linter-jsonlint",
        "version": "1.3.0"
    },
    {
        "name": "linter-sass-lint",
        "version": "1.8.3"
    },
    {
        "name": "linter-tslint",
        "version": "1.9.0"
    },
    {
        "name": "linter-ui-default",
        "version": "1.6.10"
    },
    {
        "name": "markdown-preview",
        "version": "0.159.17"
    },
    {
        "name": "metrics",
        "version": "1.2.6"
    },
    {
        "name": "minimap",
        "version": "4.29.7"
    },
    {
        "name": "minimap-codeglance",
        "version": "0.4.7"
    },
    {
        "name": "minimap-cursorline",
        "version": "0.2.0"
    },
    {
        "name": "minimap-find-and-replace",
        "version": "4.5.2"
    },
    {
        "name": "minimap-git-diff",
        "version": "4.3.1"
    },
    {
        "name": "minimap-highlight-selected",
        "version": "4.6.1"
    },
    {
        "name": "minimap-linter",
        "version": "2.1.3"
    },
    {
        "name": "multi-cursor-plus",
        "version": "1.2.0"
    },
    {
        "name": "multirow-tabs",
        "version": "0.3.3"
    },
    {
        "name": "notifications",
        "version": "0.69.2"
    },
    {
        "name": "omnisharp-atom",
        "version": "0.31.2"
    },
    {
        "name": "one-dark-syntax",
        "version": "1.8.0",
        "theme": "syntax"
    },
    {
        "name": "one-dark-ui",
        "version": "1.10.8",
        "theme": "ui"
    },
    {
        "name": "one-light-syntax",
        "version": "1.8.0",
        "theme": "syntax"
    },
    {
        "name": "one-light-ui",
        "version": "1.10.8",
        "theme": "ui"
    },
    {
        "name": "open-in-browser",
        "version": "0.5.2"
    },
    {
        "name": "open-on-github",
        "version": "1.2.1"
    },
    {
        "name": "open-terminal-here",
        "version": "2.3.1"
    },
    {
        "name": "package-cop",
        "version": "0.2.10"
    },
    {
        "name": "package-generator",
        "version": "1.1.1"
    },
    {
        "name": "path-copy",
        "version": "0.14.0"
    },
    {
        "name": "path-hyperclick",
        "version": "0.3.0"
    },
    {
        "name": "pigments",
        "version": "0.40.2"
    },
    {
        "name": "pinned-tabs",
        "version": "2.0.4"
    },
    {
        "name": "platformio-ide-terminal",
        "version": "2.8.0"
    },
    {
        "name": "prettier-atom",
        "version": "0.48.1"
    },
    {
        "name": "pretty-json",
        "version": "1.6.4"
    },
    {
        "name": "print-code",
        "version": "0.7.1"
    },
    {
        "name": "revert-buffer",
        "version": "0.6.0"
    },
    {
        "name": "settings-view",
        "version": "0.251.10"
    },
    {
        "name": "snippets",
        "version": "1.1.5"
    },
    {
        "name": "solarized-dark-syntax",
        "version": "1.1.2",
        "theme": "syntax"
    },
    {
        "name": "solarized-light-syntax",
        "version": "1.1.2",
        "theme": "syntax"
    },
    {
        "name": "sort-lines",
        "version": "0.18.0"
    },
    {
        "name": "spell-check",
        "version": "0.72.2"
    },
    {
        "name": "split-diff",
        "version": "1.5.2"
    },
    {
        "name": "status-bar",
        "version": "1.8.14"
    },
    {
        "name": "styleguide",
        "version": "0.49.7"
    },
    {
        "name": "svg-preview",
        "version": "0.12.1"
    },
    {
        "name": "svgo",
        "version": "3.0.0"
    },
    {
        "name": "symbols-view",
        "version": "0.118.1"
    },
    {
        "name": "sync-settings",
        "version": "0.8.3"
    },
    {
        "name": "tab-control",
        "version": "0.6.10"
    },
    {
        "name": "tabs",
        "version": "0.107.4"
    },
    {
        "name": "teletype",
        "version": "0.6.0"
    },
    {
        "name": "timecop",
        "version": "0.36.0"
    },
    {
        "name": "todo-show",
        "version": "2.1.0"
    },
    {
        "name": "tree-view",
        "version": "0.218.0"
    },
    {
        "name": "update-package-dependencies",
        "version": "0.12.0"
    },
    {
        "name": "vertical-tabs",
        "version": "1.0.7"
    },
    {
        "name": "welcome",
        "version": "0.36.5"
    },
    {
        "name": "whitespace",
        "version": "0.37.4"
    },
    {
        "name": "wrap-guide",
        "version": "0.40.2"
    }
]

[CyrusZei]

After update, it works, thx a lot

[leepowelldev]

Sadly still not working for me after the update.

[SavePointSam]

@leepowellcouk I would suggest watching #360 for updates relating specifically to your issue. This issue is more a master issues for a set of issues people were experiencing.

If you could also provide more information in that issue, it would be very much appreciated. Thanks!

[SavePointSam]

Due to the exact purpose of this issue being a bit unclear, and other issues have been created and referenced for underlying issues discussed, I’ll be closing this conversation here.

If you’re experiencing any of the discussed issues, please refer to the other linked issues to view their individual status.

If what is happening to you doesn’t appear to be included in those linked issues, please feel free to create a new ticket.

@sompylasar, once you’re able to reproduce your issue, could you please open a new ticket so we can diagnose and solve?

Thank you everyone!