精华内容
下载资源
问答
  • vscode下的vue文件格式

    千次阅读 2018-11-27 21:16:53
    我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作,今天Vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,去Vetur上面看了下,发现Vetur的配置做了下面的改动,看到...

    我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作,今天Vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,去Vetur上面看了下,发现Vetur的配置做了下面的改动,看到几个社区都没有人说明,我就先说下,默认的格式化配置是:

    {
      "vetur.format.defaultFormatter.html": "prettyhtml",
      "vetur.format.defaultFormatter.css": "prettier",
      "vetur.format.defaultFormatter.postcss": "prettier",
      "vetur.format.defaultFormatter.scss": "prettier",
      "vetur.format.defaultFormatter.less": "prettier",
      "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
      "vetur.format.defaultFormatter.js": "prettier",
      "vetur.format.defaultFormatter.ts": "prettier"
    }
    

    不需要修改的话就不管他,我的建议是跟着使用默认的格式化工具就行

    默认的html格式化工具变为prettyhtml
    下面是原来使用js-beautify-html格式化的配置,现在官方已经不推荐了,我准备跟着变为prettyhtml

    原来的:

    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_line_length": 160,
          "wrap_attributes": "auto",
          "end_with_newline": false
        }
      },
    

    新的配置:

    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {
          // 单行超过160个长度的时候开始换行显示各种参数和事件
          "printWidth": 160
        }
      },
    

    关于prettier的设置规则改变
    1.项目的根目录不能有 .prettierrc 、 .prettierrc.js 等配置文件,否则会覆盖掉vscode上面的配置
    2.新的配置项写法变化: 原来只能设置全局js的配置的:

    "prettier.singleQuote": true,
      "prettier.disableLanguages": [ "vue" ]
    

    可以设置vue文件里面的,和js文件不冲突:

    // js文件
      "prettier.singleQuote": true,
      "prettier.disableLanguages": [ "vue" ],
      // vue文件里面的js
      "vetur.format.defaultFormatterOptions": {
        "prettier": {
          "singleQuote": true,
          "proseWrap": "never",
          "printWidth": 130
        }
      },
    

    和html的格式化写在一起就是:

    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {
          "printWidth": 160
        },
        "prettier": {
          "singleQuote": true,
          "proseWrap": "never",
          "printWidth": 130
        }
      },
    

    没什么技术含量,但是对代码格式有要求的还是有不小的帮助的

     

     

    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
    对web开发技术感兴趣的同学,欢迎加入Q群:943129070,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
    最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    展开全文
  • visual studio code .vue文件格式化代码

    千次阅读 2018-09-19 14:04:19
    visual studio code .vue文件格式化代码 1.打开文件–>首选项–>设置 2.打开setings.json设置 3.添加以下代码: “prettier.tabWidth”: 4, “vetur.format....

    visual studio code .vue文件格式化代码

    1.打开文件–>首选项–>设置
    在这里插入图片描述

    2.打开setings.json设置

    在这里插入图片描述

    3.添加以下代码:
    “prettier.tabWidth”: 4,
    “vetur.format.defaultFormatter.html”: “prettier”
    在这里插入图片描述

    4.最后使用Alt+Shift+F可以正常格式化vue中的代码了。

    展开全文
  • vs code编辑器运行vue项目时,.vue 文件和 .js 文件的规范是:不建议行尾有分号,字符串使用单引号不建议使用双引号的,如果项目中有 eslint 的话,那么就会经常报错。... // vue文件默认格式化工具:vetur ...

    vs code编辑器运行vue项目时,.vue 文件和 .js 文件的规范是:不建议行尾有分号,字符串使用单引号不建议使用双引号的,如果项目中有 eslint 的话,那么就会经常报错。

    我的习惯是喜欢打开 format on save (保存及格式化代码)选项,安装了prettier 插件,也在 settings.json 设置了如下:

        // vue文件默认格式化工具:vetur
        "[vue]": {
            "editor.defaultFormatter": "octref.vetur"
        },
        "vetur.format.defaultFormatterOptions": {
            "prettier": {
                "semi": false,
                "singleQuote": true
            }
        },

    但是 prettier 经常在格式化时还依然加上双引号和分号,也就是上面的配置不管用,查看 prettier 的配置有三种:

    第一种和第二种都需要在项目中自己添加配置文件,想到每个项目都要这样,不能一劳永逸实在太麻烦。第三种的package.json文件不知道是不是项目中的package.json,如果是,那么跟前两种一样,每个项目都需要配置。如果不是的话,我就不清楚怎么配置了。

    解决方法:

    放弃使用了 prettier 插件来格式化代码,使用了下图的第三个插件,先前使用的是第一个。

    然后在 settings.json 文件中把 JavaScript 格式化程序设置为第三个就没有自动加分号和双引号的问题了。

    步骤:

    如果没有默认的 JavaScript 格式化程序,在一个 js 文件中按下 alt+shift+f,然后右下角出现:

    点击配置:

    选择如图所示的带有 Standard 字样的 prettier 即可,点击之后,settings.json 文件中多了下面的配置代码:

        "[javascript]": {
            "editor.defaultFormatter": "numso.prettier-standard-vscode"
        },

    也可以直接在 settings.json 文件中添加上图的代码,复制粘贴至 settings.json 即可。

    然后再次格式化 .js 文件,就可以达到双引号变单引号、自动删除分号的效果。

    展开全文
  • 2、使用beautify插件格式vue文件,那么打开:文件->首选项->设置 3、搜索 beautify.language ,在"html"里加上 "vue", "beautify.language": {  "js":...

    1、在vscode插件里搜索Beautify,进行安装。

    2、使用beautify插件格式化vue文件,那么打开:文件->首选项->设置

    3、搜索  beautify.language ,在"html"里加上 "vue",

    "beautify.language": {
                "js": {
                    "type": [
                        "javascript",
                        "json",
                        "jsonc"
                    ],
                    "filename": [
                        ".jshintrc",
                        ".jsbeautifyrc"
                    ]
                },
                "css": [
                    "css",
                    "scss"
                ],
                "html": [
                    "htm",
                    "html",
                    "vue"
                ]
            }

    4、使用快捷键 Shift+Alt+F,可以格式化整个vue文件,包括css、HTML(包括vue、elementUI等)、js。

     

    展开全文
  • sublime之.vue文件格式化插件

    万次阅读 2017-05-27 16:03:28
    1、先安装... (1) ctrl+shift+p ... ... 在”allowed_file_extensions”: [“htm”, “html”, “xhtml”, “shtml”, “xml”, “svg”,”vue”] 加上vue就好了 3、 使用快捷键为:Ctrl+Shift+H。
  • vue文件组件的格式规范

    千次阅读 2018-08-23 10:33:57
    <template> </template> <script> export default { name: '', ... return {
  • vscode中使用beautify插件格式vue文件

    千次阅读 2020-04-01 11:38:11
    在vscode中,点击设置,搜索“beautify.language”,然后再查询结果中点击“在setting.json”... 在setting.json文件中添加如下代码: 具体代码: { "beautify.language": { "js": { "type": [ "javascript", ...
  • vscode格式vue文件

    千次阅读 2018-07-06 13:39:17
    使用vscode编写vue文件的时候,发现不能格式化,手动格式化代码,太费劲,还有可能会出错,不格式化,有的时候代码编写的时候,没有很好的管理格式,不美观。vscode格式化vue代码,让vue代码更美观,是可以做到的。...
  • vscode编辑器 格式vue文件代码

    千次阅读 2018-07-14 13:53:16
    1. 安装vetur,安装ESlint2. 修改配置 file -> preferences->settings3. Shift+Alt+F 格式话代码(vscode自带格式化)4. ESlint格式化代码,把js代码格式化为ESlint格式6. save保存即可...
  • 在vscode中格式化时会自动将单引号...一定要选择Vetur进行格式化,并且在setting.json文件中添加如下代码 //行尾分号取消,使用单引号 "vetur.format.defaultFormatterOptions": { "prettier": { "semi": fals...
  • IDEA 创建.vue格式文件

    千次阅读 2019-09-12 15:40:28
    1、File——>Settings——>...填写【Vue File】 2、在第一步的基础上点击创建的【Vue file】 下图中模板代码如下: <template> <div> {{msg}}</div> </template> &l...
  • 1.如果你是使用beautify插件格式vue文件,那么打开:文件-&gt;首选项-&gt;设置, 搜索 beautify.language ,在"html"里加上 "vue",如下图: "beautify.language": { &...
  • 首先在“扩展:商店”下载安装“Vetur ”插件;...vue":"html" }{ "prettier.tabWidth": 4, "vetur.format.defaultFormatter.html": "prettier" }
  • 使用这个插件后vue文件会高亮显示,同时在shift+alt+f格式化时会自己加上分号,非常烦人。 所以我们要对vscode的配置文件进行配置支持vue的正确格式化 打开 文件–>首选项–>设置 (快捷键ctrl+,) 在常用设置...
  • 代码自动格式化 settings.json文件配置 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化...
  • 文件->首选项->设置,然后在右边编辑框输入以下设置: { "prettier.tabWidth": 4, "vetur.format.defaultFormatter.html": "prettier" } 然后通过快捷键 Alt+Shift+F 进行格式化 ☆☆☆可能遇到的问题☆☆...
  • HTML/CSS/JS Prettify 这个插件就行, 安装后 tools->HTML/CSS/JS Prettify->set prettify preference  在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"] 加上vue就好了
  • vue文件快捷生成

    千次阅读 2018-10-15 16:56:53
    vue", "body": [ "&lt;template&gt;", " &lt;div class=\"\"&gt;\n", " &lt;/div&gt;", "&lt;
  • vue下载所有格式文件

    千次阅读 2020-12-21 20:06:46
    vue下载所有格式文件 vue下载所有格式文件需要先安装downloadjs插件。 downloadjs官网:https://github.com/rndme/download //下载插件 npm install downloadjs //vue引入 import download from 'downloadjs'; ...
  • 一. 概述 使用Visual Studio Code开发工具,多人开发vue项目,为了统一代码格式风格问题,配置格式化文件模板。...格式化html、标准css、标准js、vue文件:Vetur 区分html,js,css模块不同属性使用...
  • VueJS(3)---基本文件格式

    千次阅读 2017-10-08 20:48:17
    <router-view></router-view> </template><script> export default { name: 'app' } </script><style> #app { font-family: 'Aveni
  • xml、vue文件在idea里面没有格式,成了普通txt 解决: File——>setting——>File type——>Recognized File Type中找到text——>Registered Patterns中找到xxxxx.xml删除 ...
  • vue文件怎样运行?

    千次阅读 2021-06-11 01:36:30
    vue文件怎样运行?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。1、首先,列出来我们需要的东西:node.js环境(npm包管理器)vue-cli 脚手架构建工具cnpm npm的TB...
  • 其实打开文件资源对话框的方式有好几种,但是世界使用input控件是最直接和方便的那种。 ok,直接先上代码。 <zl-button size="mini" class="upload-file"> <input @change="fileUpload" type="file" ...
  • webstorm vue cli 代码格式

    千次阅读 2017-01-26 23:00:32
    在使用vue-cli创建的项目的时候,使用Ctrl+Alt+L(如果不行那可能是你的快捷键跟其他软件冲突) 可以代码格式化,但是在缩进js的时候会出现缩进太多的情况出现了这个错误。是javaScript部分出现的错误File+Settings...
  • VS Code中 vue文件HTML代码格式

    千次阅读 2018-03-05 09:50:21
    文件 -&gt; 首选项 -&gt; 设置,在编辑框加上这两句"prettier.tabWidth": 4, "vetur.format.defaultFormatter.html": "prettier"3. 最后按格式化快捷键 Shift...
  • vue-json-excel是之前常用的导出excel...但是其下载后的excel会出现文件格式和扩展名不匹配。文件可能已损坏或不安全。除非您信任其来源,否则请勿打开。是否仍要打开它?这种错误,以下是其原因及解决方法。 官网: ...
  • 在一个vue文件里使用另外的vue文件

    千次阅读 2019-12-24 10:57:34
    这篇文章演示的是如何用Vue.js官方命令行快速搭建的项目中如何在App.vue中使用其他的vue文件(组件)。 快速搭建的vue项目中目录结构有src下的components和App.vue。 如下图: components是用来存放组件文件。 App....
  • 在vscode中没有像hubilder一样,创建vue文件后就自动生成vue模板。 但是我们可以自己创建vue.json文件自定义配置。 记录一下我自己配置的过程???? 1.打开vscode,在菜单栏中选择 文件 / 首选项 / 用户代码片段 这时...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 328,595
精华内容 131,438
关键字:

vue文件格式

vue 订阅