использовать правила vue / nuxt linting в vscode - PullRequest
Новая
       85

использовать правила vue / nuxt linting в vscode

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

Я создал новое приложение nuxt, используя npx create-nuxt-app <project-name>, и решил использовать eslint и prettier.

Я открыл каталог проекта с помощью vscode и установил ESLint и Prettier - форматировщик кода и расширения Vetur.

При сохранении файла .vue vscode форматирует код, но в некотором родеэто нарушает настройки в проекте nuxt.

Например, vscode преобразует 

<div 
  class="test" 
  style="background: red">
  test
 </div>

в 

<div class="test" style="background: red">test</div>

, но это нарушает правило vue/max-attributes-per-line.

Как настроить vscode, чтобы использовать правила привязки и красивости проекта nuxt?

Ответы [ 2 ]

0 голосов
/ 22 июля 2019

Установите расширения:

Фрагменты Vue Vue 2 Vue Peek Vetur ESLint

Перейдите в «Файл»> «Установки»> «Настройки» и отредактируйте файл настроек пользователя, добавив следующую конфигурацию: 

{
  ...... ,

  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
}

С этой конфигурацией VSCode выполнит проверку для этих трех типов файлов: vue, HTML и JavaScript.Теперь вернитесь к файлу src / App.vue и нажмите ctrl + alt + f в Windows или ctrl + shift + i в Linux или ctrl + options + f в Mac OS, чтобы выполнить форматирование кода.ESLint проверит код и отобразит некоторые ошибки на экране.

Любые ошибки могут быть исправлены автоматически, и нет необходимости исправлять каждую ошибку вручную.Для этого вы можете

нажать

ctrl + shift + p

и выбрать

ESLint: исправить все проблемы

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

После установки vscode и запуска проекта nuxt:

  1. Установите расширения Vetur и ESLint vscode.
  2. добавьте следующее в настройки своего рабочего пространства

не устанавливайте более красивое расширение 

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}

, если у вас есть "editor.formatOnSave": true,

addСледующие настройки вашего рабочего пространства: 

  "[vue]": {
    "editor.formatOnSave": false
  },

Возможно, вам придется несколько раз сохранить настройки для применения правил линтинга.

...