eslint --fix runs " Cannot find module 'eslint-config-prettier/vue' " issue

[handhikadj]

got error on my laravel-vue project

Error:

Error: Cannot find module 'eslint-config-prettier/vue'
Referenced from: C:\xampp\htdocs\numcell-generator\.eslintrc.json
    at ModuleResolver.resolve (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\util\module-resolver.js:72:19)
    at resolve (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:484:28)
    at load (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:556:26)
    at configExtends.reduceRight (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:430:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:408:26)
    at loadFromDisk (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:528:22)
    at Object.load (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:564:20)
    at Config.getLocalConfigHierarchy (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config.js:227:44)
    at Config.getConfigHierarchy (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config.js:179:43)

.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended",
        "prettier",
        "prettier/vue"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "plugins": ["vue", "prettier"],
    "rules": {
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "no-console": "off",
        "no-empty": 0,
        "no-unused-vars": 0,
        "no-undef": 0,
        "no-mixed-spaces-and-tabs": 0
    }
}

package.json

{
    "private": true,
    "scripts": {
        "eslint-check": "eslint --print-config . | eslint-config-prettier-check",
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "cross-env": "^5.1",
        "eslint": "^5.13.0",
        "eslint-config-airbnb-base": "^13.1.0",
        "eslint-config-standard": "^12.0.0",
        "eslint-plugin-import": "^2.16.0",
        "eslint-plugin-node": "^8.0.1",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-promise": "^4.0.1",
        "eslint-plugin-standard": "^4.0.0",
        "eslint-plugin-vue": "^5.1.0",
        "laravel-mix": "^4.0.14",
        "lodash": "^4.17.5",
        "prettier": "1.16.1",
        "prettier-eslint": "^8.8.2",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.17.0",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.3",
        "vue-template-compiler": "^2.6.3"
    },
    "dependencies": {
        "@vue/eslint-config-prettier": "^4.0.1",
        "ag-grid-community": "^20.0.0",
        "ag-grid-vue": "^20.0.0",
        "moment": "^2.24.0",
        "sweetalert": "^2.1.2",
        "vee-validate": "^2.1.7",
        "vue-infinite-loading": "^2.4.3",
        "vue-multiselect": "^2.1.3",
        "vue-property-decorator": "^7.3.0",
        "vue-router": "^3.0.2",
        "vue-server-renderer": "^2.6.3",
        "vuetify": "^1.5.0",
        "vuex": "^3.1.0"
    },
    "eslintConfig": {
        "root": true,
        "extends": [
            "plugin:vue/essential",
            "plugin:prettier/recommended",
            "eslint:recommended"
        ]
    }
}

[lydell]

Hi! Can you make a repo that I can clone and run to reproduce the issue?

[lydell]

Closing due to inactivity. Feel free to leave a comment if you find anything!

[handhikadj]

sorry for making you waiting thus this issue was closed

here it is:
https://github.com/handhikadj/eslint-bug-report

i'm using vscode with plugins: eslint, prettier, and vetur.
prettier seems to work
however, do you know why do every time I hit save (CTRL + S) double quote is changed to single quote and vice versa?

[lydell]

Thanks! What are the steps to reproduce your issue?

[handhikadj]

1. create a hypothetical .js file everywhere as you like, but I used to do it in the resources/js
2. code anything as you like
3. run eslint --fix [jsfile] on terminal you can see the error

[lydell]

Thanks. I tried to follow your steps, but couldn't reproduce.

~/stuff  
❯ git clone git@github.com:handhikadj/eslint-bug-report.git
Cloning into 'eslint-bug-report'...
remote: Enumerating objects: 124, done.
remote: Counting objects: 100% (124/124), done.
remote: Compressing objects: 100% (96/96), done.
remote: Total 124 (delta 9), reused 124 (delta 9), pack-reused 0
Receiving objects: 100% (124/124), 347.74 KiB | 749.00 KiB/s, done.
Resolving deltas: 100% (9/9), done.

~/stuff  
❯ cd eslint-bug-report/

~/stuff/eslint-bug-report master  
❯ npm ci

> fsevents@1.2.7 install /home/lydell/stuff/eslint-bug-report/node_modules/fsevents
> node install

added 1181 packages in 8.966s

~/stuff/eslint-bug-report 9s master  
❯ touch resources/js/foo.js

~/stuff/eslint-bug-report master %  
❯ node_modules/.bin/eslint --fix resources/js/foo.js

~/stuff/eslint-bug-report master %  
❯ echo 'console.log( 1+1 )' > resources/js/foo.js 

~/stuff/eslint-bug-report master %  
❯ node_modules/.bin/eslint --fix resources/js/foo.js

/home/lydell/stuff/eslint-bug-report/resources/js/foo.js
  1:20  error  Delete `␍`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

[handhikadj]

could you elaborate, please? so could it be fixed? cause I got some errors like you did

[lydell]

Can you copy and paste from your terminal just like I did, so I can see what you did? Maybe you did some tiny mistake that we can spot?

[handhikadj]

same errors:

[lydell]

Isn't that what is supposed to happen? Everything is working?

[lydell]

But maybe we should add linebreak-style to eslint-config-prettier, since Prettier has the end-of-line option these days.

[handhikadj]

so we have to type node_modules/.bin/eslint --fix resources/js/foo.js instead of type eslint --fix resources/js/app.js directly?

by the way, I'm running an issue:

do you have an idea to fix it?

[lydell]

so we have to type node_modules/.bin/eslint --fix resources/js/foo.js instead of type eslint --fix resources/js/app.js directly?

Yes, you have installed ESLint and all its plugins locally. When you run just eslint foo.js on the command line, you run another ESLint that you must have installed globally at some point.

Quoting https://eslint.org/docs/user-guide/configuring:

Note: Due to the behavior of Node’s require function, a globally-installed instance of ESLint can only use globally-installed ESLint plugins, and locally-installed version can only use locally-installed plugins. Mixing local and global plugins is not supported.

This is a common mistake when using ESLint, and has nothing to do with eslint-config-prettier.

Here are a couple of ways of running the local ESLint:

• node_modules/.bin/eslint foo.js
• npx eslint foo.js
• Add { "scripts": { "eslint": "eslint" } } to package.json and npm run eslint -- foo.js. (Alternatively: { "scripts": { "eslint": "eslint whatever" } } and just npm run eslint).
• Learn about $PATH and do clever stuff to it

do you have an idea to fix it?

Yes, remove the quotes rule from your .eslintrc.js – it's not needed. Also, remove linebreak-style and use Prettier's end-of-line instead.

[lydell]

Some other tips:

1. Always add steps to reproduce from the beginning to avoid wasting people's time :)
2. You can select text in most terminals using the mouse and then pressing ctrl+shift+c or cmd+shift+c (or right-click and select Copy) to copy output as text.

[handhikadj]

okay, thank you @lydell . you are wonderful person. it works at its fullest now.