qq309187341

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

  •  
  •   qq309187341 · Feb 16, 2023 · 2575 views
    This topic created in 1207 days ago, the information mentioned may be changed or developed.
    请教一下
    今天一开 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 replies    2023-02-16 11:08:27 +08:00
    silkriver
        1
    silkriver  
       Feb 16, 2023
    在扩展面板搜索 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  
       Feb 16, 2023
    Volar 配合 ESLint 检测代码风格(不要始于它格式化), 使用 Prettier 完成格式
    .eslintrc.json 配置 ESLint
    .prettierrc 配置 Prettier

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

    另外安装下面四个插件
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2819 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 08:44 · PVG 16:44 · LAX 01:44 · JFK 04:44
    ♥ Do have faith in what you're doing.