vuejs / eslint-config-prettier Goto Github PK

According to the official prettier Notes, eslint-plugin-prettier used in this package is generally not recommended since we can just use the editor extension to format the code.
I think Vue.js needs to follow suit and update create-vue's default prettier behavior and add a setup guide for prettier extensions like ESLint in the documentation.

I use the demo code in document https://vuepress-theme-hope.github.io/v2/md-enhance/zh/guide/flowchart.html

// .vuepress/config.ts
import { mdEnhance } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhance({
      // 开启标记
      mark: true,
    }),
  ],
};

then I got erro

~/sandbox/writing main ⇡1 +54 !44 ?22 ❯ yarn docs:build                                     4s
TypeError: (0 , import_vuepress_plugin_md_enhance.mdEnhance) is not a function
    at Object.<anonymous> (/home/howtoesc/sandbox/writing/vuepress.config.ts:78:53)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.require.extensions..ts (/home/howtoesc/sandbox/writing/node_modules/@vuepress/cli/lib/utils/allowTs.js:11:11)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadUserConfigEs (/home/howtoesc/sandbox/writing/node_modules/@vuepress/cli/lib/config/loadUserConfigEs.js:9:22)
    at loadUserConfig (/home/howtoesc/sandbox/writing/node_modules/@vuepress/cli/lib/config/loadUserConfig.js:16:20)
    at /home/howtoesc/sandbox/writing/node_modules/@vuepress/cli/lib/commands/build/createBuild.js:21:58

I notice that the demo code in home page is diffrent，these errors ware disappear when I changed follow it

// .vuepress/config.ts
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // 你的选项
    }),
  ],
};

Edit: sorry, I posted this in the wrong repo.

Hi everyone

When I generate a project using Vue CLI and select "prettier" during the prompts, I get the following eslint extends config:

"extends": [
  "plugin:vue/essential",
  "@vue/prettier"
]

When checking the plugin:vue/essential rules I can see that no further extends is used. In the prettier config (this repo) I see that it adds eslint:recommended at the top.

As far as I understand eslint extends, this means that rules defined in eslint:recommended would override any rules defined before it (so e.g. in plugin:vue/essential, which does not matter in this case as there is no overlap).

Now if I were to add our own set of rules, I would ideally put it before the @vue/prettier config as I want to benefit from the eslint-config-prettier defined within it (to disable possible code-style rules). But this would also mean that this set of rules can't contradict eslint:recommended as that one has higher priority (comes later in the array) and would overrule all conflicting custom rules. If I were to put the config after @vue/prettier I would have to make sure to either not include anything that conflicts with the rules in eslint-config-prettier or possibly duplicate this in the "extends" array to come last.

So what I would like:

"extends": [
  "my-custom-rules",
  "plugin:vue/essential",
  "@vue/prettier"
]

Which would result in my-custom-rules to be overruled by eslint:recommended.

What would might be possible:

"extends": [
  "plugin:vue/essential",
  "@vue/prettier"
  "my-custom-rules",
  "eslint-config-prettier"
]

Duplicating the eslint-config-prettier rules.

Is there a special reason for including eslint:recommended in this config? Might it be better to remove that and allow vue-cli to generate a config like this:

"extends": [
  "eslint:recommended",
  "plugin:vue/essential",
  "@vue/prettier"
]

Which would be clearer and make it easy to add custom configs.

step 1: pnpm upgrade
the console show

 WARN  Issues with peer dependencies found
.
└─┬ @vue/eslint-config-prettier
  └── ✕ unmet peer eslint-plugin-prettier@^3.1.0: found 4.0.0

does it only support versions below 4.0.0 with eslint-plugin-prettier

Please add a license file so that the source can be safely used in commercial applications.

Thank you!

prettier.resolveConfig.sync is removed in Prettier 3.0.

Please check this out: https://next.cli.vuejs.org/migrations/migrate-from-v4.html#babel-plugin

See titlte.

I am not sure if we need this package anymore. If we don't, please make some changes in readme.

Hello 🙂

Now eslint 9.0 is released ( https://eslint.org/blog/2024/04/eslint-v9.0.0-released/)
Would be great to add an example in the README of using this plugin with the flat config - I have not been able to figure it out yet.

Would be grateful if anyone found a working configuration 🙂

Hello.
I have created new vue project and when I want to run it via "npm run serve" command, I got problem and I don't know the solution. I have searched a lot.
This is an image for the problem :

• Please help.

From my experience, for any vue project, eslint + prettier is a must and prettier config should be considered with higher priority.

I created a brand new project with npm init vue@latest, and I ticked eslint + prettier.

I created a .prettierrc file in my vue project root folder

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "trailingComma": "all",
  "semi": false,
  "useTabs": false,
}

now my vscode starts complaining...

If i remove '@vue/eslint-config-prettier', from .eslintrc.js, everything works normally again.

so my question is why we have this plugin built-in in vue-cli, how should I use it.

@yyx990803 尤大

It should be possible to simplify this package accordingly.
Please see here https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md

I recently upgraded @vue/eslint-config-prettier from 6.0.0 to 7.0.0.

Now eslint complains:

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the config "@vue/prettier/@typescript-eslint" to extend from. Please check that the name of the config is correct.

The config "@vue/prettier/@typescript-eslint" was referenced from the config file in ".../.eslintrc.js".

Can't get my head around this.

Changelog says "simplified the usage". What does this mean? How should I updated my .eslintrc.js?

I found it can works on Vite. But I don't know if it's the right way to use it

I saw that its added to the release notes of github.
It still may be interesting to add it as well to the changelog file.

https://github.com/vuejs/eslint-config-prettier/releases/tag/v7.0.0

• Updated the dependencies and simplified the usage
• We now recommend using this package along with @rushstack/eslint-patch