4

Lately I was working on a vue3/vite + ts project and wanted to add eslint and prettier, but I'm getting confused what settings I should use in the eslint file(section "extends") and/or how to spell them. If I look at the official eslint vue homepage, they write the prettier stuff like the not commented out lines(picture below).But if I look at the official eslint-config-typescript page they write it like the commented out lines(picture below). And if I google I find both examples in projects. So my question is:

Is there any difference between the writing? Or do they do the same and it doesn't matter which one I take?

enter image description here

Max
  • 200
  • 2
  • 13

1 Answers1

2

I don't know much about vue3/vite + ts, but I see here 2 moments:

  1. Usage of @. It is likely to be related to webpack (I believe you use vue-cli). It usually means something like that: resolve: {alias: {'@': path.resolve('src')}}, So, @ is just an alias for some path in your system, usually root/source folder for your project. You can find the exact path in webpack.config.js.
  2. vue/prettier vs prettier/vue. Just location of the package. You either take prettier bundled with vue or a standalone prettier package that contains some custom/adopted version for vue. They are likely to be pretty much the same, check their package.json files for versions.
curveball
  • 4,320
  • 15
  • 39
  • 49
  • okay that would explain why the endresult is the same. Where can I find these oackage.json files? Do u mean the package.json file from my project? – Max Mar 01 '21 at 14:35
  • 2
    no, I mean package.json files inside prettier/ and vue/ in node_modules folder - they have package.json too. For example, in my current project I have vue/ folder and in its package.json I can find `"prettier": "^1.18.2"` - it means that vue uses as its devdependancy prettier version 1.18.2 – curveball Mar 01 '21 at 15:48