vscode设置 如何 格式化 vue.js 文件

vscode中vue格式化的方式

步骤1

下载vscode插件
点击右边 搜索ESLint 和 Vetur 插件安装
在这里插入图片描述

步骤2

vscode用户配置
要使ESLint正常工作,更改VSCode首选项。转到File > Preferences > Settings 并编辑用户设置文件,添加以下配置:

	"eslint.autoFixOnSave":true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

{
 "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ]
}

步骤三

保存重启
新建vue 文件
Ctrl/S 看一下效果
或者右键这 两个命令
一次全部格式化
这两个命令 执行效果有差异
Ctrl+shift+f 对HTML文件也格式化
在这里插入图片描述

'******vs实现js格式化和代码折叠****** '* 版权所有(C) sksmks 2009 '* 文件名称 : JsFormat '* 当前版本 : 1.0.0.1 '* 作 者 : 黄会攀 (@@:272302281) '* 设计日期 : 2009年10月31日 '* 内容摘要 : VS2008 JsFormat Macro '*******************************************************************************/ 一. 目的 在程序的开发中,javascript脚本的扩大,代码折叠,格式化是必不可少的一部分。对于大多数注释,代码折叠,格式化,都有着相似的样子,另外,在团队开发的过程,脚本太大,太长。为了提高在开发过程中,代码的可读性和开发效率,可以利用VS提供的Macro扩展功能,实现一套Macro模板。在使用的过程中,只需要使用相应的快捷键,便可格式化脚本和查看代码结构。 二. 实现 (打开宏资源管理器:视图 -> 其他窗口 -> 宏资源管理器 或者按 Alt+F8) 1. 新建Macro工程 打开 菜单 --> 工具 --> 宏(Macro) --> 新建宏(New Macro Project...),或者(宏资源管理器Alt+F8 )根据向导提示建立工程。 2. 编辑Macro工程 打开 菜单 --> 工具 --> 宏(Macro) --> 宏资源管理器(Macro Explorer) ,在Explorer中选择新建的工程,修改Module名(右键),在Module名上双击,在打开的Macro IDE中进行编辑。 3. 在Module下,添加要实现的MacroForJs,并实现(内容为向Active Document中添加注释)。 4. 保存 5.在VS2008中,双击添加的Macro,将执行对应的Macro代码(使用VBScript在Macro IDE中实现的)。 6. 建立快捷键 打开 菜单 --> 工具 --> 选项 --> 键盘 ,在列表框中选择刚才添加的MacroForJsPro里的OutlineFun (作用:注释),然后在 Press shortcuts keys中输入快捷键,点击Assign 。 打开 菜单 --> 工具 --> 选项 --> 键盘 ,在列表框中选择刚才添加的MacroForJsPro里的FormatForJsChar (作用:格式化),然后在 Press shortcuts keys中输入快捷键,点击Assign 。 7. 这时候,就可以直接使用快捷键来执行MacroForJs 。 三. 使用附件 1. 加载 打开 菜单 --> 工具(Tools) --> 宏(Macro) --> 加载宏项目(Load Macro Project... ),选择附件里的工程。 2. 配置快捷键 3. 完成 具体的实现代码见附件工程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值