vscode 中的 vue 格式化(一)

ε祈祈猫儿з 提交于 2019-11-29 05:28:24

使用 vscode 开发 vue, 必不可少的插件包括 vetur, prettier

vetur 提供了下面一系列的功能:

Features

  • Syntax-highlighting 高亮
  • Snippet 代码片段
  • Emmet 缩写语法
  • Linting / Error Checking 代码格式检查
  • Formatting 代码格式化
  • Auto Completion 自动补全
  • Debugging debug

这些功能挺齐全了,但是 vetur 使用的代码格式化工具是 prettier ,所以如果不安装 prettier 的话也是不能正常完成格式化的。

不过 prettier 的默认是 tab 占两个空格,不符合我的习惯,所以要改成 4 个空格。

另外 vscode 自身的 html 和 js 的格式化就已经挺符合我的习惯了,因此也改为使用 vscode 的。

最终的设置如下:

"vetur.format.defaultFormatter.js": "vscode-typescript",

"vetur.format.defaultFormatter.html": "js-beautify-html",

"vetur.format.defaultFormatter.ts": "vscode-typescript",

"vetur.format.defaultFormatter.css": "prettier",

"prettier.disableLanguages": [],

"prettier.tabWidth": 4

配置截图:

二、vue插件整理

1.Vuer

ext install vetur

2. vue 文件的 ESLint

ext install eslint

3......

 

更多:

Vue element表格分页数据加载示例

Vue element 表格获取选中项操作

Vue element 二级菜单绑定示例

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!