Vue在VsCode上面的开发,代码格式话是个老大难问题了。

有很多文章介绍Prettier四个配置方法,以及如何启用。但是结果就是:一个一个配完,还是看着难受

现在尝试出一种最完美格式化方式,分享出来

1、安装Beautify插件

2、修改设置:

两个地方

2.1 Editor: Word Wrap(控制折行的方式。):选择 bounded,可以根据窗口宽度自动调整换行
2.2 Editor: Word Wrap Column((同时修改于: 工作区) Editor: Word Wrap 为 wordWrapColumn 或 bounded 时,控制编辑器的折行列。)
      这个是设置换行长度,根据自己显示器宽度设置

2、【重点】修改setting.json,漏了这一步就达不到效果了

{
"editor.tabSize": 2,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 160,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
"search.followSymlinks": false,
"git.autorefresh": false,
"explorer.confirmDelete": false,
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "50%",
"height": "100%",
"background-position": "50% 50%",
"background-repeat": "no-repeat",
"opacity": 1
},
"liveServer.settings.useWebExt": true,
"liveServer.settings.donotShowInfoMsg": true,
"workbench.sideBar.location": "left",
"background.enabled": false,
"liveServer.settings.fullReload": true,
"livereload.port": 5500,
"editor.largeFileOptimizations": false,
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"files.autoSave": "afterDelay",
"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 160,
"files.associations": { },
}

VSCode开发Vue-代码格式化最完美设置的更多相关文章

  1. 使用vsCode开发vue项目格式化通用配置

    {   "editor.tabSize": 2,   "editor.fontSize": 18,   "editor.wordWrap": ...

  2. 用vscode开发vue应用[转]

    https://segmentfault.com/a/1190000019055976 现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程 ...

  3. 用vscode开发vue应用

    阅读 3237 收藏 205 2019-05-02 原文链接:segmentfault.com 云服务器 1 核 2G , 9元/月 ,买十送二,99/年!!!快来上车!developer.huawe ...

  4. vs code中Vue代码格式化的问题

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! VSCode自从更新之后,vue文件的html代码格式化就失效了,而且vu ...

  5. VScode开发Vue初尝试(一)

    由于公司近期有新的H5项目开发,而前端的同事也离职了,所以就临时顶缸,研究学习一下Vue框架开发. 本人也是初学,在学习过程中,把一些学习所得分享出来,可能会有很多问题和疏漏,希望大家能够多多指正,共 ...

  6. iOS开发-xCode代码格式化xAlign

    xCode默认是可以进行代码格式化的,能满足基础开发需求,如果想要个性一些代码对齐方式宏对齐,等号对齐,属性对齐,xAlign就提供了以上三种功能,参考文中效果~ 基础效果 等号对齐: 属性对齐: 宏 ...

  7. VScode开发Vue项目,关闭eslint代码检查,以及相关配置

    Vue初始化项目时如果不小心安装了js 语法检测 功能,撸码时一个空格不对就会各种报错 个人感觉这个语法检测功能很有点过于严格,用起来十分难受,所以果断关闭eslint,找到webpack.base. ...

  8. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  9. vscode中vue代码颜色插件

    vue提示插件[Vscode]       编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整 ...

随机推荐

  1. php-fpm7 启动脚本

    [root@bbs init.d]$ cat php-fpm7 #!/bin/sh # DateTime:20170918 # Source function library. . /etc/rc.d ...

  2. C++类的开发实战--班级成绩管理系统

    #include<bits/stdc++.h> using namespace std; struct birth { int year,month,day; }; struct grad ...

  3. 数学--数论--中国剩余定理 拓展 HDU 1788

    再次进行中国余数定理 问题描述 我知道部分同学最近在看中国剩余定理,就这个定理本身,还是比较简单的: 假设m1,m2,-,mk两两互素,则下面同余方程组: x≡a1(mod m1) x≡ a2(mod ...

  4. VMware的安装与部署Linux系统

            首先我们需要准备好我们将会用到的东西:VMware12.RHEL7.0         网址我就不放了,大家自行百度哟. 一.安装VMware         我们需要安装VMware ...

  5. HTTPS GET | POST | DELETE 请求

    依赖: <dependency> <groupId>com.squareup.okhttp3</groupId> <artifactId>okhttp& ...

  6. Python拆分一列为多列

    有的员工,没有公司开户行的银行卡,发放现金工资.有时人多,需要计算币数.现金工资表中,其中一列为实发工资,import pandas as pd,转化为pd.DataFrame. 面值[100,50, ...

  7. .NET Attribute在数据校验上的应用

    Attribute(特性)的概念不在此赘述了,相信有点.NET基础的开发人员都明白,用过Attribute的人也不在少数,毕竟很多框架都提供自定义的属性,类似于Newtonsoft.JSON中Json ...

  8. webpack3 项目升级 webpack4

    由于 vue-cli 2 构建的项目是基于 webpack3,所以只能自己动手改动,至于升级 webpack4之后提升的编译速度以及各种插件自己去体验. 修改配置 1.替换插件 extract-tex ...

  9. 2020网鼎杯 白虎组reverse:hero

    主函数,当bossexist的值不为0时,while循环dround()函数,循环结束输出flag outflag()函数的flag值由6段数据拼凑而成 while循环的dround()函数有三个选择 ...

  10. IP协议及其它的小弟 ,我保证没人会看的

    IP协议及其它的小弟 IP协议:127.0.0.1就一个32位的标识符.实际上: 类似这样的: 精神小伙慢慢看吧.我赌一包辣条你是不会认真看完的. IP协议的构成 地址解析协议 ARP 前面的叙述中我 ...