vscode 设置eslint 开辟vue的相干设置

如安在vscode顶用JavaScript Standard Style作风去考证 vue文件
实际上JavaScript Standard Style有一个FAQ, 申明了怎样运用。

但是有一点非常主要的作者没有提到,就是eslint-plugin-html这个插件必须要装置3.x.x版本的, 如今eslint-plugin-html, 已晋级到4.x版本,默许不写版本号装置的就是4.x版本的,所以会出现题目。

参考:详情请参考 https://www.npmjs.com/package…
此ESLint插件许可linting和修复HTML文件中包含的内联剧本。

迁移到v4
eslint-plugin-htmlv4最少须要ESLint v4.7。这是由于ESLint v4.7中发生了很多内部变动,包含支撑预处理器中自动牢固的新API。假如您仍在运用旧版本的ESLint,请斟酌晋级或继承运用 eslint-plugin-htmlv3。

eslint-plugin-htmlv4中的主要特征(和严重变化)是能够挑选在统一HTML文件中的剧本标记之间同享局限的体式格局。

迁移到v3
假如您正在斟酌晋级到v3,请阅读本指南。
ESLint v4 is only supported by eslint-plugin-html v3, so you can’t use eslint-plugin-html v1.5.2 with it (I should add a warning about this when trying to use the plugin with an incompatible version on ESLint).
If you do not use ESLint v4, please provide more information (package.json, a gist to reproduce, …)
// FAQ
How to lint script tag in vue or html files?

You can lint them with eslint-plugin-html, just install it first, then enable linting for those file types in settings.json with:

 {
 "standard.validate": [
      "javascript",
      "javascriptreact",
      "html"
  ],
  "standard.options": {
      "plugins": ["html"]
  },
  "files.associations": {
      "*.vue": "html"
  }
  }

If you want to enable autoFix for the new languages, you should enable it yourself:

 {"standard.validate": [
     "javascript",
     "javascriptreact",
     { "language": "html", "autoFix": true }
 ],
 "standard.options": {
     "plugins": ["html"]
 }
}

1、须要装置插件:

npm i -g standard
npm i -g eslint-plugin-html@3.2.2 此处运用是3x版本
npm i -g eslint 或许 vscode 装置 eslint

2 、vscode setting 设置:

{
  "standard.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "standard.options": {
    "plugin": ["html"]
  },
  "files.associations": {
    "*.vue": "html"
  },
  "standard.autoFixOnSave": true
  }

3、vscode 相干插件 Prettier and eslint 格式化代码:

ESLint (假如全局装置了,vscode 能够不装置)
Prettier formatter
Vetur
#4 格式化代码相干设置

{
  "files.autoSave": "afterDelay",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "editor.formatOnSave": true
}

5 .eslintrc.js 相干

项目根目录下建立 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  'extends': [
    // 须要官方的 eslint-plugin-vue,它支撑同时搜检你 .vue 文件中的模板和剧本。请确保在你的 ESLint 设置中运用了该插件本身的设置:
    'plugin:vue/essential',
      // standard 代码范例  https://github.com/standard/standard/blob/master/docs/RULES-en.md
    '@vue/standard'
  ],
  rules: {
    'no-new-func':0,
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 处理 iview 报错题目
    "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
    原文作者:依然存在
    原文地址: https://segmentfault.com/a/1190000019033840
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞