meteorlxy / eslint-plugin-prettier-vue Goto Github PK

View Code? Open in Web Editor NEW

111.0 111.0 9.0 540 KB

:ok_hand: ESLint plugin for Prettier formatting, which is better for Vue SFC

License: MIT License

JavaScript 4.74% Vue 12.83% Shell 0.50% TypeScript 81.92%

eslint eslint-plugin eslint-plugin-prettier eslint-plugin-vue prettier vue

eslint-plugin-prettier-vue's Introduction

Hi, I'm meteorlxy 👋

Open Source Enthusiast
Frontend Developer
Member of @vuejs

eslint-plugin-prettier-vue's People

Contributors

Stargazers

Watchers

Forkers

zipme janther manu-xav alexrafael10 scorpionknifes peter50216 lucasleandro1204

eslint-plugin-prettier-vue's Issues

prettier 2.0 is out

It comes with new default options.

"arrowParens": "always"
"trailingComma": "es5"

and the last one that I had no idea how to configure was "space-before-function-paren". This is not an option, it's the default. And I could not remove error Delete `·` prettier-vue/prettier from my Eslint report.

Any help?

Fixing a .vue file inserts nine blank lines If endofline is set to 'crlf' or 'auto'

Steps to reproduce are below. I get the same results on Ubuntu 18.04 and Windows 10, so I don't think this is OS-related.

Use vue/cli to create a Vue project: Install latest vue/cli npm i -g @vue/cli (sudo npm i -g @vue/cli on Ubuntu), then vue create hello-world in a folder. Select the default '[Vue 3] babel, eslint'.
Once that's completed edit the package.json file created in the hello-world subfolder. Replace the devDependencies and eslintConfig properties with what's below. This adds in prettier and eslint-plugin-prettier-vue, and configures ESLint to use them with CRLF as the end of line characters.

  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "eslint-plugin-prettier-vue": "4.2.0",
    "prettier": "2.7.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "plugins": [
      "prettier-vue"
    ],
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "prettier-vue/prettier": [
        "warn",
        { "endOfLine": "crlf" }
      ]
    }
  },

cd hello-world if you're not in it, and then npm i to install the new dependencies.
npm run lint --fix

Now look at HelloWorld.vue or App.vue in your favorite editor and you'll see nine blank lines have been inserted between the closing <\template> tag and the opening <script> tag, and similarly after the closing </script> tag and the opening <style> tag.

In fact ESLint inserts a load of CRs at these points every time you fix.

This doesn't happen with eslint-plugin-prettier. It DOES happen if you upgrade all the packages to their latest versions.

This also happens if endOfLine is set to auto and your line endings are already CRLF. CRLF is the default if you create a new text file on Windows, of course.

I suspect this is related to Issue #13, and may even be the same bug.

prettier 'vueIndentScriptAndStyle=true' doesnt work

Parsing error: '=' expected

Hey,

I recently stumbled upon this project, trying to get our TypeScript+Vue project working with ESLint and Prettier, including a reasonable subset of Prettier+Vue ESLint rules.

eslint-plugin-prettier-vue does seem to work at first glance, however, there are a couple instances where it is having trouble parsing our templates, it seems.

Examples

<template>
  <v-row>
    <v-col
      v-if="show"
      xl="4"<!-- vue-prettier/vue complains about expecting '=' here; not sure why -->
    >
   ...

<template>
  <loading :is-loading="isLoading">
    <v-card>
      <v-card-title>
        <h1 v-show="controller.$isNotFound">
          <v-icon left><!-- "v-icon" is underlined with the same error -->
            close
           ...

<template>
  <loading :is-loading="isLoading">
    <v-card>
      <v-card-title>
        <h1 v-show="controller.$isNotFound">
          <v-icon left>
            close<!-- "close" is underlined and the same error is reported there -->

I've cut the examples down, but I think the erroneous places are quite well visible there. It seems to me like the "v-*" directives might be throwing something off. Not sure what, though.

Here's an excerpt from our package.json's ESLint section

  "eslintConfig": {
    "parser": "vue-eslint-parser",
    "extends": [
      "plugin:@typescript-eslint/recommended",
      "plugin:vue/recommended",
      "plugin:prettier-vue/recommended"
    ],
    "settings": {
      "prettier-vue": {
        "SFCBlocks": {
          "template": false
        }
      }
    },
    "env": {
      "node": true,
      "es6": true
    },
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "ecmaVersion": 2019,
      "sourceType": "module"
    },
    "rules": {}
  },

Cheers!

Maintenance: merger into the upstream

Hi @meteorlxy ！

I'm the current active maintainer of https://github.com/prettier/eslint-plugin-prettier, and just see this fork accidentally few days ago.

And I think about that is there any chance to merge this fork back into upstream? I believe that the custom blocks support is great for such frameworks commonly like Vue, Svelte, Astro, etc.

If you agree and want to raise a PR for upstream that'll be appreciated. Otherwise I'll think about how to implement such features in eslint-plugin-prettier.

I want us to collaborate together with @BPScott.

Possibility to transfer it nicely when using tailwindcss

Request / Idea

It would be nice to be able to transfer it nicely when using tailwindcss. This would make the code much more readable

Input

header.header-module(
  class=["bg-off-white shadow-main-header flex items-center gap-x-2 py-2 px-4", "lg:px-8"]
)

Expected Output

header.header-module(
  class=[
    "bg-off-white shadow-main-header flex items-center gap-x-2 py-2 px-4", 
    "lg:px-8"
  ]
)

Prettier 3.0 is out

Could you upgrade the Prettier dependency to Prettier 3 please?
The significant changes are listed here: https://prettier.io/blog/2023/07/05/3.0.0.html

The main difference is that trailingComma is now set to all
It used to be trailingComma : es5

Issues with end of line for Vue SFC blocks with CLRF/LF

in the processSFCBLock the code is doing

const endingTag = `</${type}>\n`

The usage of \n it's making repos not using LF show an unfixable error at the end of SFC </script> tag:

It will never go away since the plugin is parsing the \n added when parsing the SFC.

I'm forking in order to not mess with my repo line ends.

If this is actually an issue and maybe no one wants to spend time on it I can take some time maybe to send a PR controlling which line break char is inserted reading from endOfLine prettier option.

Cheers.

Ps: your plugin saved me so much pain introduced by prettier and vue lol

Consider making `eslint-config-prettier` optional dependency.

eslint-config-prettier is added here:

eslint-plugin-prettier-vue/lib/configs.js

Line 6 in ed8ddb6

extends: ['prettier'],

When I have SFCBlocks.script disabled. I still want to use ESLint's format rules for script block.

Tab settings ignored

Have tabWidth set to 4, and useTabs to true, these appear to be ignored and is for some reason applying a tab width of 2.

Problem with eslint `space-before-function-paren` rule in .js files

We use the eslint rule space-before-function-paren in our projects, which is standard from Vue. Having this rule enabled while using eslint-plugin-prettier-vue works fine in the <script> tag of Vue SFC files, but causes a strange error in normal .js files.

note: there is no . between constructor and the parens, it's just a space: constructor (initialData) {

The issue may not be specifically from this plugin, but I can't seem to find any mention of it in other prettier/eslint plugins. Prettier maintainers are discussing adding the space before paren option to that project, which would get rid of the need to rely on the eslint rule, but that issue has been open for almost 2 years now.

Support Typescript 3.7

https://github.com/prettier/prettier/releases/tag/1.19.0

Deletes style tag iteratively

after --fix

Plugin hides actual ESLint rule involved

I keep banging my head against the wall on this. When I'm using this plugin and ESLint complains, it merely points to eslint(prettier-vue/prettier) rather than the actual ESLint rule involved. Example:

foo: function(row, col) {

returns this error:

Insert `·`eslint[prettier-vue/prettier](https://github.com/meteorlxy/eslint-plugin-prettier-vue#eslint-config)

The same URL is shown for every error.

Can we have the link to the offending rule instead?

Failed to load plugin 'prettier-vue' declared in '.eslintrc.js':

I have followed your docs for installing eslint-lugin-prettier-vue. Note that I am using the latest beta of VueJS in this test app.

I get this error when attempting to build the app:

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load plugin 'prettier-vue' declared in '.eslintrc.js':

Here is the resulting package.json and my .eslintrc:
package.json

{
  "name": "anvos-test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "lodash": "^4.17.15",
    "vue": "^3.0.0-beta.20",
    "vue-router": "^4.0.0-beta.2",
    "vuex": "^4.0.0-beta.4"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-e2e-cypress": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-plugin-unit-jest": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-alpha.7",
    "eslint-plugin-prettier-vue": "^2.1.0",
    "eslint-plugin-vue": "next",
    "eslint-config-prettier": "^6.11.0",
    "eslint": "^6.7.2",
    "prettier": "^1.19.1",
    "lint-staged": "^9.5.0",
    "tailwindcss": "^1.4.6",
    "typescript": "~3.9.3",
    "vue-cli-plugin-vue-next": "~0.1.3"
  },

and eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:prettier-vue/recommended',
        '@vue/typescript/recommended',
        '@vue/prettier',
        '@vue/prettier/@typescript-eslint'
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'vue/max-attributes-per-line': [
            'error',
            {
                singleline: 1,
                multiline: {
                    max: 1,
                    allowFirstLine: true
                }
            }
        ]
    },
    settings: {
        'prettier-vue': {
            SFCBlocks: {
                template: false
            }
        }
    },
    overrides: [
        {
            files: [
                '**/__tests__/*.{j,t}s?(x)',
                '**/tests/unit/**/*.spec.{j,t}s?(x)'
            ],
            env: {
                jest: true
            }
        }
    ]
}

How can I change all error to warning?

from red underlie to yellow underlie

Upgrading @vue/compiler-sfc to 3.1.x causes lint to fail, tries to add 20 blank lines around the <template> section

Let me preface this by saying that I don't know if this is an issue with this Prettier plugin or with @vue/compiler-sfc, but the problem is showing up during linting with errors coming from prettier-vue/prettier which I believe is this project, so I am posting it here to start. Hopefully with more expertise, it can either be fixed here or filed as an issue with additional information in vuejs/vue-next.

Recently I have upgraded my npm dependencies and my lint (vue-cli-service lint via the npm run lint script) was failing. I have narrowed it down to @vue/compiler-sfc causing the failure. That is, I successfully upgraded all my other dependencies, even including "vue": "^3.1.4" and "eslint-plugin-prettier-vue": "^3.1.0" and the lint error does not happen, until I upgrade "@vue/compiler-sfc": "^3.0.11" to "@vue/compiler-sfc": "^3.1.0" (or ^3.1.4, the current version, but the issue starts with the 3.1 series).

Here is the commit in my project which downgrades @vue/compiler-sfc to fix the problem. Please let me know what else I can provide to help debug this. Below are the logs.

CLI log:

$ npm run lint

> [email protected] lint C:\Users\Keavon\Projects\Graphite\client\web
> vue-cli-service lint || (npm install && vue-cli-service lint)

error: Insert `⏎↹` (prettier-vue/prettier) at src\App.vue:12:2:
  10 |
  11 |
> 12 |  <MainWindow />
     |  ^
  13 |  <div class="unsupported-modal-backdrop" v-if="showUnsupportedModal">
  14 |          <div class="unsupported-modal">
  15 |                  <h2>Your browser currently doesn't support Graphite</h2>


error: Insert `⏎` (prettier-vue/prettier) at src\App.vue:27:8:
  25 |                  <LayoutRow> <button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button> </LayoutRow>
  26 |          </div>
> 27 |  </div>
     |        ^
  28 |
  29 |
  30 |


warning: Unexpected alert (no-alert) at src\components\widgets\inputs\MenuBarInput.vue:147:4:
  145 |                 },
  146 |                 actionNotImplemented() {
> 147 |                         alert("This action is not yet implemented");
      |                         ^
  148 |                 },
  149 |         },
  150 |         data() {


2 errors and 1 warning found.
2 errors potentially fixable with the `--fix` option.
npm WARN [email protected] requires a peer of eslint@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 1445 packages in 4.196s

106 packages are looking for funding
  run `npm fund` for details

found 14 vulnerabilities (10 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
error: Insert `⏎↹` (prettier-vue/prettier) at src\App.vue:22:2:
  20 | 
  21 | 
> 22 |  <MainWindow />
     |  ^
  23 |  <div class="unsupported-modal-backdrop" v-if="showUnsupportedModal">
  24 |          <div class="unsupported-modal">
  25 |                  <h2>Your browser currently doesn't support Graphite</h2>


error: Insert `⏎` (prettier-vue/prettier) at src\App.vue:37:8:
  35 |                  <LayoutRow> <button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button> </LayoutRow>
  36 |          </div>
> 37 |  </div>
     |        ^
  38 |
  39 |
  40 |


warning: Unexpected alert (no-alert) at src\components\widgets\inputs\MenuBarInput.vue:147:4:
  145 |                 },
  146 |                 actionNotImplemented() {
> 147 |                         alert("This action is not yet implemented");
      |                         ^
  148 |                 },
  149 |         },
  150 |         data() {


2 errors and 1 warning found.
2 errors potentially fixable with the `--fix` option.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: `vue-cli-service lint || (npm install && vue-cli-service lint)`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.        

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Keavon\AppData\Roaming\npm-cache\_logs\2021-07-02T22_44_45_723Z-debug.log

Note: the two error lines copy/pasted above don't show the mangled characters viewed in the console, which seem to be printing over each other:

The debug log file referenced in the last line of the above log:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'lint'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prelint', 'lint', 'postlint' ]
5 info lifecycle [email protected]~prelint: [email protected]
6 info lifecycle [email protected]~lint: [email protected]
7 verbose lifecycle [email protected]~lint: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~lint: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Keavon\Projects\Graphite\client\web\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Python39\Scripts\;C:\Python39\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\nodejs\;C:\ProgramData\chocolatey\bin;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files\dotnet\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Users\Keavon\.cargo\bin;C:\Program Files (x86)\youtube-dl;C:\Program Files\Git\cmd;C:\Users\Keavon\.cargo\bin;C:\Users\Keavon\AppData\Local\Microsoft\WindowsApps;C:\Users\Keavon\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Keavon\AppData\Local\GitHubDesktop\bin;C:\Users\Keavon\AppData\Local\GitHubDesktop\app-2.6.1\resources\app\git\cmd;C:\Users\Keavon\AppData\Roaming\npm;C:\Users\Keavon\.dotnet\tools;C:\Program Files\ffmpeg\bin;C:\Program Files (x86)\exiftool;
9 verbose lifecycle [email protected]~lint: CWD: C:\Users\Keavon\Projects\Graphite\client\web
10 silly lifecycle [email protected]~lint: Args: [
10 silly lifecycle   '/d /s /c',
10 silly lifecycle   'vue-cli-service lint || (npm install && vue-cli-service lint)'
10 silly lifecycle ]
11 silly lifecycle [email protected]~lint: Returned: code: 1  signal: null
12 info lifecycle [email protected]~lint: Failed to exec lint script
13 verbose stack Error: [email protected] lint: `vue-cli-service lint || (npm install && vue-cli-service lint)`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\Keavon\Projects\Graphite\client\web
16 verbose Windows_NT 10.0.19042
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lint"
18 verbose node v14.15.3
19 verbose npm  v6.14.9
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] lint: `vue-cli-service lint || (npm install && vue-cli-service lint)`
22 error Exit status 1
23 error Failed at the [email protected] lint script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Because the lint command automatically fixes the files, it ends up adding 20 blank lines (with one level of tab indentation) only in the App.vue file after the opening <template> tag, and another 20 blank lines (without any indentation, so actually blank) right before the closing </template> tag. Below is the file modified by the bugged linter, exactly the same as the original except for the two added blocks of 20 lines, and I have omitted the <style> and <script> tags later in the file which were untouched:

<template>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	<MainWindow />
	<div class="unsupported-modal-backdrop" v-if="showUnsupportedModal">
		<div class="unsupported-modal">
			<h2>Your browser currently doesn't support Graphite</h2>
			<p>
				Unfortunately, some features won't work properly in your browser. Please use a modern browser other than Safari, such as Firefox, Chrome, or Edge. Rest assured, Safari compatibility is
				planned.
			</p>
			<p>
				Your browser is missing support for the
				<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a> JavaScript
				API which is required for using the editor. You can still explore the user interface.
			</p>
			<LayoutRow> <button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button> </LayoutRow>
		</div>
	</div>




















</template>

Overriding "prettier-vue/prettier" as "error" breaks Vite

After doing some dependency updates, Vite started erroring out on files that previously worked fine.

This was apparently because my class list (using Tailwind) was so long that Prettier could no longer fit it within the printWidth, but with this plugin setting all rules for "prettier-vue/prettier" to "error", it couldn't get past that issue.

I had to set rules: { "prettier-vue/prettier": "warn" } to override it.

Prettification issues shouldn't halt dev servers... there are too many variables to both pass all standard linter rules for Vue and to do so within Prettier's over-opinionated, limited configuration. I suggest setting this to warn instead of error.

self-closing rule not working

eslint will ignore self–closing SFC component rule when I have "prettier/vue" listed in my eslint config like so

"extends": [
  "standard",
  "plugin:@typescript-eslint/recommended",
  "plugin:vue/vue3-recommended",
  "plugin:prettier-vue/recommended",
  "prettier/standard",
  "prettier/vue"
]

Not sure where exactly the issues lies, but I though I should report it here.

I'm using Vue 3 and eslint-plugin-prettier-vue: 3.0.0-alpha.2.