vscode下的vue文件格式化
发布在前端技术分享2018年11月27日view:137前端开发web框架Vue.js前端的畅想前端工程前端工程师JavaScript
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

我相信基本上每一个在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,快速升职加薪,走上人生巅峰。

评论
发表评论
暂无评论
WRITTEN BY
__小宸__
前端全栈开发工程师 分享一些心得与技术给大家,希望能对大家有所帮助。 欢迎加入前端开发学习交流群:943129070 大家可以一起交流学习
TA的新浪微博
PUBLISHED IN
前端技术分享

分享各种前端开发需要掌握的知识点与观点,欢迎大家一起来讨论

我的收藏