VSCode не изменяет двойные кавычки на одинарные в <template>при использовании Vetur и Prettier и Vue-Cli 3 - PullRequest
Новая
       37

VSCode не изменяет двойные кавычки на одинарные в <template>при использовании Vetur и Prettier и Vue-Cli 3

0 голосов
/ 07 декабря 2018

Я пытаюсь настроить редактор VSCode для автоформатирования кода Vuejs.Я использую расширение Vetur, расширение Prettier и расширение ESLint .

Проблема в том, что при сохранении моих файлов .vue одинарные кавычки автоматически заменяются на двойные кавычки в моих элементах <template>:

Когда я пишукод, как это, а затем сохранить ... 

<template>
    <section>
        <section v-if='errored'>
        ...snip...
</template>

VSCode автоматически заменяет одинарные кавычки на двойные кавычки в разделе .vue template примерно так: 

<template>
    <section>
        <section v-if="errored"> <-------- 
        ...snip...
</template>

И тогда яполучать предупреждения и ошибки для остальной части кода <template>.Однако код в разделах <script> и <style> отдельных файловых компонентов .vue остался нетронутым / и / или исправлен правильно ... только в разделе <template> есть вышеуказанная проблема.Итак, у меня правильные настройки?

Мои настройки:

Я установил свой конфигурационный файл Prettier в корне проекта .prettierrc.js примерно так: 

module.exports = {
    singleQuote: true
};

Мой .eslintrc.js выглядит так: 

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'plugin:prettier/recommended',
    '@vue/prettier'
  ],
  rules: {
    'no-console': 'off',
    'no-debugger': 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};

А потом в моих пользовательских настройках VSCode У меня есть: 

...snip..
"vetur.validation.template": false, <-- turn off Vetur’s linting feature and rely on ESLint + Prettier, instead
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true

И файл приложения package.json содержит следующие devDependencies: 

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.1",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.17"
  }

Ответы [ 2 ]

0 голосов
/ 06 марта 2019

Я создал файл с именем .prettierrc.js в каталоге, в котором я запускаю npm run serve in.

Этот файл содержит: 

module.exports = {
    singleQuote: true,
    trailingComma: "es5",
    printWidth: 200
};

Теперь он в основном работает, за исключением вызовов методов, которыедлиннее, чем 200. Затем более ранний пользователь забывает запятую в конце.

0 голосов
/ 17 января 2019

Единственный способ, с помощью которого я нашел это, - удалить из моего .eslintrc.js

'plugin:prettier/recommended',
'@vue/prettier'
следующее
...