如何在vscode中用standard style 风格去验证 vue文件

gnehc 发布于2019-08-01 18:14 / 3321人阅读

摘要：史上最便捷的统一代码风格的方式，轻松拥有。自动代码格式化。提前发现风格及程序问题。减少代码审查过程中反反复复的修改过程，节约时间。如何在中用风格去验证文件实际上有一个说明了如何使用。

1 JavaScript Standard Style简介

本工具通过以下三种方式为你（及你的团队）节省大量时间：

无须配置。史上最便捷的统一代码风格的方式，轻松拥有。

自动代码格式化。只需运行 standard --fix 从此和脏乱差的代码说再见。

提前发现风格及程序问题。减少代码审查过程中反反复复的修改过程，节约时间。

无须犹豫。再也不用维护 .eslintrc, .jshintrc, or .jscsrc 。开箱即用。

安装：

npm i standard -g

关于JavaScript 代码规范, 你可以点击链接看一下。

2 如何在vscode中用JavaScript Standard Style风格去验证 vue文件

实际上JavaScript Standard Style有一个FAQ, 说明了如何使用。

但是有一点非常重要的作者没有提到，就是eslint-plugin-html这个插件必须要安装3.x.x版本的, 现在eslint-plugin-html, 已经升级到4.x版本，默认不写版本号安装的就是4.x版本的，所以会出现问题。参考

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"]
 }

3 综上，整理一下安装思路 3.1 需要安装哪些包？

npm i -g standard

npm i -g eslint-plugin-html@3.2.2 必须是3x版本

npm i -g eslint

以上三个包都是全局安装的，如果你想看看全局安装了哪些包可以用npm list -g --depth=0查看

3.2 vscode config 如何写？

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

3.3 如何在保存文件时，自动使用standard格式化vue文件

"standard.autoFixOnSave": true

4. 如果还不行怎么办？

重启一下vscode

重启一下电脑

在此文后追加评论

GPU云服务器云服务器如何在云服务器上安装文件如何在阿里云服务器上传文件 py文件如何在云服务器运行如何在百度云服务器上上传文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51592.html

如何在vscode中用standard style 风格去验证 vue文件

摘要：史上最便捷的统一代码风格的方式，轻松拥有。自动代码格式化。提前发现风格及程序问题。减少代码审查过程中反反复复的修改过程，节约时间。如何在中用风格去验证文件实际上有一个说明了如何使用。 1 JavaScript Standard Style简介本工具通过以下三种方式为你（及你的团队）节省大量时间：无须配置。史上最便捷的统一代码风格的方式，轻松拥有。自动代码格式化。只需运行 s...

fredshare 2019-08-22 11:20 评论0 收藏0
vscode 配置eslint 开发vue的相关配置

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

haobowd 2019-08-02 16:15 评论0 收藏0
vscode 配置eslint 开发vue的相关配置

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

lifesimple 2019-08-23 17:13 评论0 收藏0
前端开发VScode常用插件

摘要：名称功能自动闭合标签自动提示修改标签时，自动修改匹配的标签格式化编写更加人性化的注释添加行书签的浏览器兼容性检查运行选中代码段支持大量语言，包括单词拼写检查在中弹出浏览器并搜索，可编辑搜索引擎颜色值在代码中高亮显示小窗口显示颜色值，等等拾色名称功能 Auto Close Tag 自动闭合HTML标签 Auto Import...

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

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

Achilles 2019-08-22 16:16 评论0 收藏0