如何将ESLint用于放置在单独的html文件中的vue模板

时间:2018-12-28 17:39:11

标签: vue.js eslint prettier tooling

想象一下,您有带有以下模板的“ SFC”:

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

想象一下,您已经可以使用更漂亮的/ eslint设置了,并且可以使用以下命令来清理任何文件:

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

哪种格式的.vue,.js甚至.ts文件都可以,但是如果您将其用于单独的vue-template,则该文件为.html扩展名,但实际上是所有{{1} } s和其他内容...这将不起作用,因为更漂亮的方法可能试图使用不正确的解析器(?)解析.html,或者也许应该有一种方法建议使用哪个解析器处理我的棘手的.html文件?

我当前的配置如下:

v-if

以及使用的某些库的版本:

// .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'
  ]
}

也许有人可以给我提示,如何使用内部带有vue特定模板的漂亮/ eslint .html文件进行格式化?

当前对于.html我既没有IDE错误也没有自动格式设置,但是对于其他所有内容(.vue,.js,.ts文件),它都可以正常工作。

对于我提到的命令,我可以看到eslint使用"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", 并合理地抱怨与vue有关的第一件事,例如parser-babylon绑定。

1 个答案:

答案 0 :(得分:2)

问题是,漂亮的东西在eslint插件vue之后。根据文档   该插件使我们可以使用ESLint检查.vue文件的和。

因此html不太可能。另外,请阅读此https://github.com/vuejs/eslint-plugin-vue/issues/490