meteorlxy / eslint-plugin-prettier-vue

:ok_hand: ESLint plugin for Prettier formatting, which is better for Vue SFC
MIT License
115 stars 9 forks source link

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

Open rich-newman opened 2 years ago

rich-newman commented 2 years ago

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.

  1. 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'.
  2. 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" }
      ]
    }
    },
  3. cd hello-world if you're not in it, and then npm i to install the new dependencies.
  4. 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 tag and the opening