V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qq309187341
V2EX  ›  Visual Studio Code

关于 vscode 下使用 volar 插件的问题

  •  
  •   qq309187341 · 2023-02-16 10:52:44 +08:00 · 1561 次点击
    这是一个创建于 407 天前的主题,其中的信息可能已经有所发展或是发生改变。
    请教一下
    今天一开 vscode 发现格式化出问题了。

    原本
    <template>
    <div>1234</div>
    </template>

    现在直接变成一行了。。。。
    <template><div>1234</div></template>

    如果是
    <template>
    <div>1111</div>
    <div>2222</div>
    </template>

    也会变成如下了
    <template>
    <div>1111</div>
    <div>2222</div>
    </template>

    什么情况???请问如何设置回去!!一脸懵逼,我也没有配置过呀。现在这个样子看着很难受
    2 条回复    2023-02-16 11:08:27 +08:00
    silkriver
        1
    silkriver  
       2023-02-16 10:58:58 +08:00
    在扩展面板搜索 Prettier 安装,vue 官方代码风格配置大概如下
    {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.trailingComma": "none",
    }
    thinkershare
        2
    thinkershare  
       2023-02-16 11:08:27 +08:00
    Volar 配合 ESLint 检测代码风格(不要始于它格式化), 使用 Prettier 完成格式
    .eslintrc.json 配置 ESLint
    .prettierrc 配置 Prettier

    所有文件都选择使用 Prettier 完成格式化,不要使用 VSCode 默认的格式化器。

    另外安装下面四个插件
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3553 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 10:32 · PVG 18:32 · LAX 03:32 · JFK 06:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.