Красивее форматировать .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'
  ]
}

visual-studio-code vue.js eslint prettier
person Vadim    schedule 12.01.2019    source источник
comment
Может, это поможет: github.com/prettier/prettier-vscode/ вопросы /   -  person Sølve Tornøe    schedule 12.01.2019
comment
@ SølveTornøe, этого не было. Странно то, что красивее формат .js нормально (как и предполагалось в стандартном стиле), но в .vue форматируется по-другому (с точкой с запятой, двойными кавычками и т. Д.)   -  person Vadim    schedule 12.01.2019

Ответы (3)


arrow_upward
4
arrow_downward

Вам необходимо определить эти правила в вашем .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"
  }
};
person Nichlas Wærnes Andersen    schedule 12.01.2019

arrow_upward
2
arrow_downward

Проще установить расширение 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"
}

введите описание изображения здесь

person Anees Hameed    schedule 30.10.2019
comment
как я могу настроить параметр правила для html-кода в prettier.config.js? - person JackChouMine; 24.12.2020

arrow_upward
0
arrow_downward

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

{
  "singleQuote": true,
  "tabWidth": 2,
  "semi": false
}
person LarrySSS    schedule 22.05.2019