Difference eslint between 'prettier/vue' and '@vue/prettier'

3
votes

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

1
vue.jsprettiertypescript-eslintprettier-eslinteslint-config-vue

1 Answers

1
votes

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.