Как использовать ESLint для шаблона VUE, помещенного в отдельный HTML-файл - PullRequest
Новая
       23

Как использовать ESLint для шаблона VUE, помещенного в отдельный HTML-файл

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

Представьте, что у вас есть "SFC" с шаблоном, подобным следующему: 

<template src="./my-separate.html"></template>
<script>/* whatever */</script>
<style>/* whatever */</style>

И представьте, что вы работаете с настройкой prettier / eslint, и вы можете скопировать любой из ваших файлов с помощью такой команды: 

eslint --ext "*.html, *.js, *.vue, *.ts" $FilePath$ --fix --no-ignore

Какие файлы формата .vue, .js или даже .ts довольно хороши, но если вы используете его против отдельного шаблона vue - который является файлом с расширением .html, но на самом деле это шаблон vue со всеми v-if sи другие вещи ... Это не сработает, потому что, вероятно, красивее, вероятно, пытается разобрать .html с неверным парсером (?) или, может быть, должен быть способ предложить какой парсер использовать для моих хитрых файлов .html?

Мои текущие конфиги выглядят так: 

// .prettier.rc

{
  "arrowParens": "always",
  "semi": false,
  "singleQuote": true
}

// .eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: 'typescript-eslint-parser',
    sourceType: 'module',
    jsx: true
  },
  env: {
    browser: true
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended',
    'prettier/vue',
    'plugin:vue/recommended'
  ],

  plugins: [
    'typescript',
    // required to lint *.vue files
    'vue',
    'prettier'
  ]
}

И используются версии некоторых библиотек: 

"babel-eslint": "8.2.6",
"eslint": "5.11.1",
"eslint-config-prettier": "3.3.0",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.1.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-node": "8.0.0",
"eslint-plugin-prettier": "3.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-typescript": "0.14.0",
"eslint-plugin-vue": "5.0.0",

Может быть, кто-то может подсказать мне, как форматировать с помощью prettier / eslint .htmlфайлы с шаблонами vue?

В настоящее время для .html у меня нет ни ошибок IDE, ни автоформатирования, но для всего остального (файлы .vue, .js, .ts) он работает нормально.

Для команды, которую я упомянул, я вижу, что eslint использует parser-babylon и обоснованно жалуется на первую вещь, связанную с vue, например, :prop binding.

1 Ответ

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

Дело в том, что красивее идет после того, как плагин eslint vue.Что, согласно документации Этот плагин позволяет нам проверять и .vue файлы с ESLint.

Таким образом, задержка html не совсем возможна.Также, пожалуйста, прочитайте это https://github.com/vuejs/eslint-plugin-vue/issues/490

...