форматирование файла vue под vscode

Visual Studio Code Vue.js

Я считаю, что в основном все, кто кодирует код Vue на vscode, скачают плагин Vetur для форматирования и других операций, сегодня Vetur обновился.0.14.2версия, когда я использую его в последнее время, я чувствую, что всегда есть проблема с форматированием, перейдите кVeturПрочитав вышеизложенное, я обнаружил, что в конфигурацию Vetur внесены следующие изменения.Ввиду того, что никто не объяснил это в нескольких сообществах, я сначала скажу, что конфигурация форматирования по умолчанию:

{
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "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"
}

Если вам не нужно изменять его, оставьте его в покое.Я предлагаю следовать инструменту форматирования по умолчанию.

Форматировщик html по умолчанию становитсяprettyhtml

Ниже приведено оригинальное использованиеjs-beautify-htmlОтформатированная конфигурация теперь официально устарела, и я собираюсь ей следовать.prettyhtml

оригинал:

  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 160,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  },

Новая конфигурация:

  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      // 单行超过160个长度的时候开始换行显示各种参数和事件
      "printWidth": 160
    }
  },

оprettierПравила установки для изменения

  1. Корневой каталог проекта не может иметь.prettierrc,.prettierrc.jsДождитесь файла конфигурации, иначе конфигурация выше vscode будет перезаписана
  2. Изменения в написании нового элемента конфигурации: Оказалось, что можно задать только конфигурацию глобального js:
  "prettier.singleQuote": true,
  "prettier.disableLanguages": [ "vue" ]

Вы можете настроить содержимое файла vue так, чтобы оно не конфликтовало с файлом js:

  // js文件
  "prettier.singleQuote": true,
  "prettier.disableLanguages": [ "vue" ]，
  // vue文件里面的js
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "proseWrap": "never",
      "printWidth": 130
    }
  },

Пишется вместе с форматированием html:

  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 160
    },
    "prettier": {
      "singleQuote": true,
      "proseWrap": "never",
      "printWidth": 130
    }
  },

Технического содержания нет, но есть много подсказок по требованиям к формату кода.

Категории