VS code - форматирование массивов в файлах .vue - PullRequest
Новая
       37

VS code - форматирование массивов в файлах .vue

2 голосов
/ 11 июня 2019

У меня есть файл .vue, который автоматически форматируется при его сохранении. Это здорово и все такое, но у меня есть определенная проблема, которую я не могу понять, и не могу избавиться. Следуя этому руководству, https://blog.jongallant.com/2019/02/vuejs-vetur-vscode-format-eslint-issues/, я настроил код VS для использования Vetur, beautify-js и ESLint.

В файле .vue у меня есть простой массив. Когда я сохраняю файл, он мигает в течение 100 мс примерно так:

enter image description here

и затем сохраняется следующим образом:

enter image description here

Затем ESLint жалуется на две вещи:

'Ожидается отступ в 8 пробелов, но найдено 0.eslint (indent)'

и

'Конечные пробелы не допускаются. Eslint (без-конечных пробелов)'

Я согласен с ESLint здесь и не хочу подавлять эти ошибки. Любое другое форматирование хорошо, но JS не массивы. Я считаю, что это js-beautify, который форматирует документ следующим образом (отсюда и связанная статья :)), но когда я отключаю его, документ все равно форматируется. Но если я установлю для autofix значение false в vue-части eslint.validate (см. Ниже), документ не будет отформатирован. Так что я здесь немного запутался.

Это мои настройки. Json 

{
  "explorer.confirmDragAndDrop": false,
  "vetur.validation.template": false,
  "editor.formatOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "explorer.confirmDelete": false,
  "eslint.autoFixOnSave": true,
  "html.format.wrapLineLength": 200,
  "editor.wordWrapColumn": 280,
  "editor.wordWrap": "on",
  "html.format.wrapAttributes": "force",
  "editor.snippetSuggestions": "top",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    }
  }
}

Это мой .eslintrc.js 

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: ['es-beautifier'],

  extends: ['plugin:vue/essential', 'plugin:es-beautifier/standard'],

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'comma-dangle': ['error', 'never'],
    // 'no-trailing-spaces': [0],
    // indent: 'off',
    'linebreak-style': 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

Спасибо!

Ответы [ 2 ]

2 голосов
/ 21 июня 2019

Я смог протестировать, и он правильно отформатировал при использовании Prettier в сочетании с Vetur для форматирования .Vue файлов.

Вот как он отформатирован после сохранения примера в файле .Vue.

Vue file formatting

Вот как выглядят мои настройки.

enter image description here

Вот ссылка на Prettier Code Formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Не уверен, что замена ваших расширений - это то, что вы можете делать с вашим проектом, но он форматирует так, как вам хотелось бы, и мешает esLint кричать на вас.

Ура!

0 голосов
/ 16 июня 2019

попробуйте это: 

    return {
      columns: [
        'test', 
        'test2',
        'test3',
        'test4',
        'Pest555',
        '66666666',
        'seven seven seven', 
      ],
    },

✅ Одна строка для каждого элемента в массиве

✅ Каждый элемент в массиве имеет еще один отступ строки [

✅ ❎ ⚠⚠⚠ Пробелы после запятых отсутствуют. 100 , (Но вы можете добавить пробел, если у вас есть встроенный комментарий , // inline comment)

✅ В последнем элементе запятая отсутствуетразличия в git, если вы добавите еще один элемент.

Также я предпочитаю 4 пробела и двойные кавычки, но это не имеет значения.

Надеюсь, это поможет:)

...