vscode 配置eslint 开发vue的相关配置

lifesimple 发布于2019-08-23 17:13 / 3352人阅读

摘要：参考详情请参考此插件允许和修复文件中包含的内联脚本。这是因为中发生了许多内部更改，包括支持预处理器中自动固定的新。请确保在你的配置中使用了该插件自身的配置代码规范解决报错问题

如何在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://www.ucloud.cn/yun/103998.html

vscode 配置eslint 开发vue的相关配置

摘要：参考详情请参考此插件允许和修复文件中包含的内联脚本。这是因为中发生了许多内部更改，包括支持预处理器中自动固定的新。请确保在你的配置中使用了该插件自身的配置代码规范解决报错问题如何在vscode中用JavaScript Standard Style风格去验证 vue文件实际上JavaScript Standard Style有一个FAQ, 说明了如何使用。但是有一点非常重要的作者没有...

haobowd 2019-08-02 16:15 评论0 收藏0
工程实战-vue在vscode的环境配置

摘要：基础开发插件图标美化调试代码格式化代码格式化代码规范语法提示必备及相关技术栈语法提示文件高亮格式化编码支持自动闭合标签自动更改对应标签名自动补全路径本地项目管理右击在浏览器打开文件支持支持友好化配置基础设置设置设置设置设置设置配 1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Pretti...

solocoder 2019-08-21 18:22 评论0 收藏0
vscode一格式化就报错？各种风格问题各种报错烦不胜烦，教你如何用好vue的eslint风格配置

摘要：格式化安装插件如果题主认真读了的的话，应该可以写出下面的配置了。用来格式化和提示格式错误。在编码过程中提示格式错误，养成良好的编码习惯。前言感觉搭建一个舒服的前端开发环境，十分的重要定制化的格式化，编辑器自带的格式化各种报错，手动改真的会死人，因此搭建一个编辑器环境必不可少，现在要讲的是vscode中如何定制vue vs code的配置文件: showImg(https://seg...

Achilles 2019-08-22 16:16 评论0 收藏0
vscode-eslint的踩坑实践--typescript无法格式化

摘要：的踩坑实践无法格式化引言最近开发的前端项目随着开发的人员越来越多，代码规范已经是一个很难避免的问题了，虽然百度有这个规则检查，但是不论是或者是项目本地都没有配置或检查，完全靠自觉，这是件非常扯淡的事。 vscode-eslint的踩坑实践--typescript无法格式化引言最近开发的前端项目随着开发的人员越来越多，代码规范已经是一个很难避免的问题了，虽然百度有fecs这个规则检查...

harryhappy 2019-08-22 14:57 评论0 收藏0
如何优雅地使用 VSCode 来编辑 vue 文件？

摘要：注本文首发在我的个人博客最近有个项目使用了，本来一直使用的是来进行开发，可是遇到了很多问题。此外，还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。，终于基本搞定了，可以愉快地开发应用了。注：本文首发在我的个人博客最近有个项目使用了 Vue.js ，本来一直使用的是 PHPStorm 来进行开发，可是遇到了很多问题。后来，果断放弃收费的 PHPStorm ，改用 vsco...

pekonchan 2019-08-20 15:14 评论0 收藏0