VSCode自动格式化Vue代码

VsCode关于Vue的格式化插件非常多,网上的资料也五花八门,可以使用的非常少, 经过多次探索,终于找到一个可以用的方式。

Prettier-Code formatter

多次探索终于找到一个可用的简单操作的,首先安装Prettier插件
在这里插入图片描述

配置代码格式化文件

安装好了以后在项目根目录中添加.prettierrc文件

{
  "printWidth": 150,
    "overrides": [
        {
            "files": ".prettierrc",
            "options": { "parser": "json" }
        }
    ],
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "proseWrap": "preserve",
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "disableLanguages": ["vue"],
  "endOfLine": "auto",
  "eslintIntegration": false,
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".prettierignore",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "requireConfig": false,
  "stylelintIntegration": false,
  "trailingComma": "es5",
  "prettier.tslintIntegration": false
}

配置setting.json

打开setting.json文件 文件>首选项>设置 点击右上角的按钮切换到json文件
在这里插入图片描述在setting.json中添加以下代码

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnType":true,
  "editor.formatOnSave": true,
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值