Search code examples
atom-editorprettierprettier-eslint

Atom Prettier adds dependencies in useEffect at auto save


I have prettier installed in my Atom editor. I enabled autosave option. but on auto save when it changes useEffect dependency array most of time. I don't want atom to auto add element in dependency array. I would really appreciate if someone can guide me to the prettier config which enables / disables this feature -

following are example of changes.

Original:

useEffect(() => {
    dispatch(fetchListPlants());
}, []);

After Autosave:

useEffect(() => {
    dispatch(fetchListPlants());
}, [dispatch]);

Original:

useEffect(() => {
    geocoder.addTo('#geocoder');
    dispatch(fetchListQuotes());
}, []);

After Autosave:

useEffect(() => {
    geocoder.addTo('#geocoder');
    dispatch(fetchListQuotes());
}, [geocoder, dispatch]);

My Prettier.json

{
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "endOfLine": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": true,
    "jsxSingleQuote": true,
    "printWidth": 120,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "none",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
  }

Solution

  • Looking at the dependencies of prettier-atom, I'm suspecting that the ESLint integration might be causing this. ESLint reports missing dependencies for useEffect(), but I'm not sure if that rule falls in the category of fixable errors.

    Either way, try disabling the ESLint Integration in the prettier-atom settings to see if the problem persists:

    enter image description here

    You can find the settings of that Atom package at Settings > Packages > prettier-atom