精华内容
下载资源
问答
  • VSCode中Vue代码格式化

    千次阅读 2019-05-28 20:40:56
    我们在编辑代码的时候,经常会使用代码格式化的操作,来使我们的代码更加的美观,容易阅读,还能使心情舒畅.可最近在使用vscode格式化vue代码的时候,没有实现预期的效果.如下代码格式: <div class="td"> <...

    我们在编辑代码的时候,经常会使用代码格式化的操作,来使我们的代码更加的美观,容易阅读,还能使心情舒畅.可最近在使用vscode格式化vue代码的时候,没有实现预期的效果.如下代码格式:

    <div class="td">
      <input
        type="text"
        class="form-control"
        placeholder="请输入用户名"
      >
    </div>

    这是格式化后大代码,input元素内每个属性都换行了,我不喜欢这种代码格式,代码看起来很乱,我预期的效果是input的所有属性都显示到一行,如果当前行的空间能够放的开的话.所以我想修改一下编辑器格式化vue文件的方式.如下步骤,依次打开code-首选项-设置,

     在打开的设置页面搜索区域搜索vetur.format.defaultFormatter.html,结果如下:

    搜索的vetur.format.defaultFormatter.html配置项有none、prettyhtml、js-beautify-html、prettier4个选项,我们可以选择none和prettyhtml可以实现前面我预期的将input所有属性展示到一行的效果,选择js-beautify-html和prettier两个属性会将各属性分开显示到不同的行展示.这里我选择了prettyhtml,实现了我的预期效果,如下:

    <div class="td">
      <input type="text" class="form-control" placeholder="请输入用户名">
    </div>

     

    展开全文
  • 实际项目就是一个单页面。因此,我觉得用gulp足够,并且不需要webpack和vue-cli因为没有必要使用组件。 先来说一下项目结构 1. 然后来看看我的包管理package.json都用了啥,你也可以复制下来,npm install进行...

    实际项目就是一个单页面。因此,我觉得用gulp足够,并且不需要webpack和vue-cli因为没有必要使用组件。

    先来说一下项目结构

    1.

    然后来看看我的包管理package.json都用了啥,你也可以复制下来,npm install进行安装就行了。

    {
      "name": "webRoot",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.25.0",
        "babel-preset-es2015": "^6.24.1",
        "gulp": "^3.9.1",
        "gulp-babel": "^7.0.0",
        "gulp-concat": "^2.6.1",
        "gulp-connect": "^5.0.0",
        "gulp-htmlmin": "^3.0.0",
        "gulp-imagemin": "^3.3.0",
        "gulp-jshint": "^2.0.4",
        "gulp-less": "^3.3.2",
        "gulp-minify-css": "^1.2.4",
        "gulp-notify": "^3.0.0",
        "gulp-rename": "^1.2.2",
        "gulp-uglify": "^3.0.0",
        "imagemin-pngcrush": "^5.1.0",
        "jshint": "^2.9.5"
      }
    }
    

      然后是我的gulpfile.js配置

    这里还是用图片吧,动手敲一敲总还是好的,给以后的自己也找点麻烦。
    

      

    内容不多,但是很实用,所以我不会放弃治疗哒。

    转载于:https://www.cnblogs.com/webSong/p/7406630.html

    展开全文
  • Vue代码格式化自动对齐设置

    千次阅读 2020-05-19 22:34:15
    Vue代码格式化自动对齐设置

    Vue代码格式化自动对齐设置

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 打开preferences ->settings ,输入Vetur ,找到Edit in settings.json,加上下面代码. "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, "singleQuote": true } }

    首先保证vetur,eslint, prettier 都安装。

    打开preferences ->settings ,输入Vetur ,找到Edit in settings.json,加上下面代码. 

     mac系统可以直接点这个图标进入配置页面

     "vetur.format.defaultFormatterOptions": {
            "prettier": {
              "semi": false, 
              "singleQuote": true,
              "trailingComma": "none" //禁止尾随单引号
            }
          }

    详细的配置

    {
      "workbench.colorTheme": "Dracula",
      "workbench.iconTheme": "material-icon-theme",
      "workbench.startupEditor": "none",
      "editor.fontFamily": "Meslo LG M for Powerline,Menlo, Monaco, 'Courier New', monospace",
      // "editor.codeActionsOnSave": true,
      "sync.gist": "1ed8ebc6db8dadadb91df26c708d699d",
      "files.autoSave": "onFocusChange",
      // 重新设定tabsize
      "editor.tabSize": 2,
      // #每次保存的时候自动格式化ß
      "editor.codeActionsOnSave": {
        "source.fixAll": true
      },
      "eslint.alwaysShowStatus": true,
      // 添加 vue 支持
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "html"
      ],
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.validation.template": false,
      "vetur.format.defaultFormatterOptions": {
    
        "prettier": {
          "semi": false,
          "printWidth": 120,
          "singleQuote": true
        },   
        "js-beautify-html": {
          "wrap_attributes": "auto",
          "end_with_newline": false
        },
        "prettyhtml": {
          "printWidth": 120,
          "wrapAttributes": false,
          "sortAttributes": false
        }
      },
      "editor.wordWrapColumn": 180,      
      "search.followSymlinks": false,
      "prettier.printWidth": 120,
      "vetur.format.enable": false,
      "editor.columnSelection": false,
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "diffEditor.ignoreTrimWhitespace": true,
      "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "vetur.completion.scaffoldSnippetSources": {},
      "explorer.confirmDelete": false,
      "prettier.jsxSingleQuote": true,
      "prettier.singleQuote": true,
      "todohighlight.include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.html", "**/*.php", "**/*.css", "**/*.scss"],
      "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "css.validate": false,
      "less.validate": false,
      "scss.validate": false,
      "git.confirmSync": false,
      "git.autofetch": true,
      "git.enableSmartCommit": true,
      "emmet.includeLanguages": {
        "vue-html": "html",
        "javascript": "javascriptreact"
      },
      "prettier.vueIndentScriptAndStyle": true,
      "javascript.preferences.quoteStyle": "single",
      "eslint.format.enable": true,
      "javascript.updateImportsOnFileMove.enabled": "always",
      "window.zoomLevel": 0,
      "editor.fontSize": 14,
      "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
    }

    展开全文
  • 参考来源特别说明,这些内容非本人原创,只是网络上说法很多,而这种我亲测有效,分享给大家...Jack_Chen 它拥有346的点赞量最近写Vue代码,发现template里的html代码,会因为标签内的属性稍有超出就出现换行,看着...
  • vue 代码格式化(VS code)

    千次阅读 2019-06-05 11:02:52
    1、安装了vetur(Vue tooling for VS Code)扩展插件。在扩展中搜索vetur,然后点击安装 2、直接(或者 选中你想格式化代码),右键,选择“格式化文档“,另外是直接快捷键”Shift+Alt+F”,即可 ...
  • VUE在VSCode中的代码格式化设置

    千次阅读 2018-11-16 15:19:31
    VUE在VSCode中的代码格式化设置 { &quot;terminal.integrated.shell.windows&quot;: &quot;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe&quot;, &quot;gitlens.advanced....
  • 第一步: 第二步: 第三步:为防止报错 ...第四步:再者在项目的根目录中创建一个.prettierrc.json文件,放以下内容即可 ... "trailingComma": "none"// trailingComma 对象属性和数组元素的最后自动添加逗号,none...
  • vue实现codemirror代码编辑器中的SQL代码格式化功能
  • 最近学习vue,写export 导出,下面语句前总是爆红,看了半天,原来是这个问题:代码格式化+代码整体向后/向后缩进: 报错如图所示:使用的开发工具是:IntelliJ IDEA 仔细看了好久,代码没什么问题,可是就是找不...
  • vue 项目 webstrom IDE格式化代码规则遵循eslint设置 首先vue-cli生成了一个项目,开启了eslint的检测, 但是根据webstorm的快捷格式化代码 ctrl+alt+L会造成eslint报错。 解决办法一: 编辑器打开文件 首先,在编辑...
  • { "editor.tabSize": 2, //制表符符号eslint "git.autofetch": true, "editor.fontFamily": "'Courier New', Consolas, monospace", ... "Des": "页面、组件说明", "Author": "姓名", "Date": "Do not edit
  • vue中实现代码高亮,格式化

    千次阅读 2018-12-28 18:51:30
    话不多说先上图 ...先在把他整合到vue中 首先先下载highlight.js文件 npm install highlight.js 在main.js中引入文件 //代码高亮文件引入 import hljs from 'highlight.js' //样式文件,这...
  • VScode的Vue格式化插件Vetur的使用过程中,格式化出来的代码并不美观,可以进行如下设置: 打开VScode的 >文件 > 首选项 >设置>拓展>Vetur 找到如下图所示的区域 将setting.json文件替换为如下代码 ...
  • 找到关于vue的设置 // vetur 的自定义设置 "vetur.format.defaultFormatterOptions": { "prettier": { // 双引号全部换成单引号 "singleQuote": true, // 句尾不加分号 "semi": false, //禁止末尾添加逗号!...
  • 数据格式化编辑器: 方便你实现在线的数据格式化编辑与显示的工具。支持的数据格式包括:JSON、HTML、XML 源码工程地址:vue_data_editor 效果图 安装 由于源码未创建npm包,所以请手动下载工具源码使用,谢谢!~ ...
  • 但是根据webstorm的快捷格式化代码 ctrl+alt+L会造成eslint报错。 解决办法一: 编辑器打开文件 首先,在编辑器里面要启用eslint 插件 在.eslintrc.js上右键,菜单底部有一个 "Apply ESLint Code Style Rule" 点...
  • 当一个vue工程,在webstorm里面打开后,发现script每行的前面都会报红,看着难受,那么如何去除报红呢? 1.首先,打开vue项目,找到**.editorconfig文件查看indent_size**的值。 2.然后打开webstrom的设置里找到...
  • 最近做的一个项目,后台...// 将后台返回的 /Date(1603892082484)/ 这种时间数据格式化成时分秒 Vue.prototype.$praseDate = function(date){ var dt = new Date(parseInt(date.replace(/.*Date\([^\d]*(\d+)[^\d]*
  • 最近写代码遇到了返回数据 格式化显示的问题 场景:当点击导入模板按钮导入数据失败时,后台会返回模板中数据填报错误地方的数据 页面显示: 返回数据: “共失败导入13条数据;\ n项目名称: vue显示内容格式化1, ...
  • 好的代码风格能够帮我们解决这些问题(typeScript:没错,正是在下!)雾~~ 代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。eslint附有大量开箱即用的配置规则帮助我们...
  • vue显示格式化的json

    2020-12-11 12:19:07
    如图: 基础代码(此段是将json高亮显示的...// 格式化json syntaxHighlight(json){ if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').rep
  • 在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化。 过滤器 在vue中,我们可以使用过滤器来进行时间格式化。它的写法如下: // ...
  • vue格式化json数据输出到html中

    万次阅读 2018-11-29 16:40:23
    最近在整理公司的hybrid协议和demo,其中有一个代码展示,因为是直接把在js部分的代码通过vue填到了html中,所以格式全变了,然后就开始尝试 格式化json,写了很多方法,也百度了很多,那些方法使用document.write()...
  • 设置vscode自动格式化 开启语法检查(安装ESLint,检查语法保证代码的规范性) 安装Vetur插件 打开vscode的setting.json文件(文件–>首选项–>输入vetur搜索,往下找到在setting.json文件中编辑) 将如下代码复制到...
  • 这里写目录标题redis服务器没有开查询用户列表vue的日期格式化 redis服务器没有开 项目路径webapps】可以省略 tomcat中 这里会报错,如果你使用了vue,不建议使用ajax http是协议 localhost是主机 8080是...
  • 示例代码后台是springboot+mybatis-plus,前端使用的vue,element UI的一个小项目 问题描述: 时间格式的输出格式是一个UTC通用标准时的格式,什么是UTC通用标准时:UTC即为世界标准时间,世界统一时间,国际协调...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,196
精华内容 10,478
关键字:

vue页面代码格式化

vue 订阅