Красивее форматировать .vue

Расширение Prettier VS Code некорректно работает с .vue. Я имею в виду, как настроить красивее, чтобы интегрировать его с eslint и отформатировать файлы .vue на Cmd+Shift+P -> Format Document. .eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  plugins: [
    'vue'
  ]
}

Мэй, это поможет: github.com/prettier/prettier-vscode/issues/…

— 12.01.2019 15:53

@ SølveTornøe, этого не было. Странная вещь, что красивее формат .js нормально (как и предполагалось в стандартном стиле), но в .vue форматируется по-другому (с точкой с запятой, двойными кавычками и т. д.)

— 12.01.2019 16:08

vue.js visual-studio-code eslint prettier

12.01.2019 15:48

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

7 364

Ответы 3

Вам необходимо определить эти правила в вашем файле .eslintrc.js следующим образом:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "prettier/prettier": [
      "warn",
      {
        "singleQuote": true,
        "semi": false,
        "trailingComma": "none"
      }
    ]
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

12.01.2019 16:49

вы можете добавить файл .prettierrc.json в корневой каталог и

{
  "singleQuote": true,
  "tabWidth": 2,
  "semi": false
}

22.05.2019 05:25

Проще установить расширение vetur octref.vetur, а затем добавить .vscode> settings.json со следующими

{
    "editor.defaultFormatter": "octref.vetur",
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier"
}