您的位置:68399皇家赌场 > 服务器租用 > vscode对Vue文件的html部分格式化失效难点化解办法

vscode对Vue文件的html部分格式化失效难点化解办法

发布时间:2019-05-06 08:16编辑:服务器租用浏览(126)

    www.68399.com 1

    • 尾部插足:

    在 用户设置 中增添如下配置,以支持 .vue 文件。

    Vue.component('my-component-name', { /* ... */ });
    

    查找      vetur.format.defaultFormatter.html    (前提当然是你已经装了  "vetur" 插件)

    1. 修改eslintrc.js文件

    别的插件推荐

    (2)、使用 PascalCase:

    把none修改为    js-beautify-html  即可

     env: {
        browser: true,
        jquery: true
      },
    

    你大概感兴趣的稿子:

    • VsCode新建VueJs项指标详尽步骤
    • 推荐VSCode 上特地好用的 Vue 插件之vetur
    • 行使vscode编写vue的轻易布置详解
    Vue.component('child', {
    // 在 JavaScript 中使用 camelCase
    props: ['myMessage'],
    template: '{{ myMessage }}'
    })
    

    文件 --> 首选项 ---> 设置 

    效果图

    要是要求 html 的格式化,则需手动配置。

    您大概感兴趣的小说:

    • Vue 将后台传过来的带html字段的字符串转变为 HTML
    • vue语法之拼接字符串的示范代码
    • vue中怎样贯彻变量和字符串拼接

    能够看出值为 none

    <body class="hold-transition skin-blue sidebar-mini">
    

    vetur 大多少人掌握,但在 vscode 下不能格式化 .vue 里的 html, js 至极高烧,代码风格无法统一。

    三、组件名大小写:

     

    • 在static目录下新建img文件夹
    • 将node_modules/admin-lte/dist/img/user2-160x160.jpg文书复制到img目录
    • 将app.vue文件中的user二-160x160.jpg的门径改为“static/img/user2-160x160.jpg”
    {
     // 强制单引号
     "prettier.singleQuote": true,
     // 尽可能控制尾随逗号的打印
     "prettier.trailingComma": "all",
     // 开启 eslint 支持
     "prettier.eslintIntegration": true,
     // 保存时自动fix
     "eslint.autoFixOnSave": true,
     // 添加 vue 支持
     "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
       "language": "vue",
       "autoFix": true
      }
     ],
     // 使用插件格式化 html
     "vetur.format.defaultFormatter.html": "js-beautify-html",
     // 格式化插件的配置
     "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
       // 属性强制折行对齐
       "wrap_attributes": "force-aligned",
      }
     }
    }
    

    (2)、字符串模板:

    选取vscode编辑vue文件时开掘意想不到格式化代码不会对<template> </template>之间的html生效了,化解办法很简短

    完了收工

    2、Props属性:HTML 特性是不区分轻重缓急写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 props属性要求转移为相呼应的 kebab-case (短横线分隔式命名):

     

    const webpack = require("webpack")
    

    找到 首选项 -> 设置 菜单,在左侧 用户配置 中增添"prettier.eslintIntegration": true 开启 eslint 扶助。

    专注:当直接在 DOM 中使用贰个组件 (而不是在字符串模板或单文件组件) 的时候,大家强烈推荐服从 W3C 标准中的自定义组件名 (字母全小写且必须包括2个连字符)。那会支援你制止和目前以及将来的 HTML 元素相争辩。

    image.png

    刚才开启的 "prettier.eslintIntegration": true 只是指向 .js 文件的,而不是针对 .vue 文件。

    当使用 帕斯CarlCase (驼峰式命名) 定义二个零件时,你在引用那几个自定义成分时三种命名法都足以采纳。也正是说 <my-component-name> 和 <MyComponentName> 都以可承受的。注意,固然如此,直接在 DOM (即非字符串的模板,如:在单个组件的<template></template>中 可能 index.html中直接CDN引进vue.js的<div id="app"></div>中) 使用时唯有 kebab-case 是有效的,使用驼峰式,是不会渲染的。

    1. 开始化一个VUE项目(略)
    2. 修改app.vue
      复制node_modules/admin-lte/starter.html中<body></body>标签之间的div到app.vue的<template></template>中
    3. 修改webpack.base.config.js

    小结

    <!-- 在 HTML 中使用kebab-case -->
    <child my-message="hello!"></child>
    

    除去 html 部分,别的都默许使用 prettier 格式化。

    非字符串模板:在单文件里用 <template></template> 钦赐的模版,换句话说,写在 html 中的正是非字符串模板。

    plugins:[
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery":"jquery"
        })
      ]
    

    例如:

    (1)、HTML模板:

    1. 修改index.html的<body>

    www.68399.com,正文详细介绍 vscode 下利用 vetur prettier eslint 来统壹 vue 编码风格。

    HTML模板:直接在HTML页面挂载的模板。(即非字符串模板)

    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'admin-lte/dist/css/AdminLTE.min.css'
    import 'admin-lte/dist/css/skins/skin-blue.min.css'
    import 'font-awesome/css/font-awesome.min.css'
    import 'ionicons/dist/css/ionicons.min.css'
    import 'bootstrap/dist/js/bootstrap.min'
    import 'admin-lte/dist/js/adminlte.min'
    

    于今,配置实现,完整配置如下:

    字符串模板:在js字符串中定义的沙盘。

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:vscode对Vue文件的html部分格式化失效难点化解办法

    关键词: 68399皇家赌场 前端