解决vscode格式化代码html属性换行问题； ctrl+s格式化去除分号，格式化自动单引号；解决js格式化换行问题

╰+哭是因爲堅強的太久メ 2021-07-24 21:21 2026阅读 0赞

右键格式化文档或者ctrl + s保存 html不换行  
![在这里插入图片描述][20210303133954289.gif]

1.安装两个插件①vetur ②Prettier - Code formatter

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]  
2.在vetur的settings.json中设置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 2]

配置ctrl+s触发格式化去除分号和单引号；配置格式化js换行；配置解决html属性换行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 3]

将最后一部分的设置，修改成上图即可

// // 当保存代码的时候，会自动格式化
        "editor.formatOnSave": true,
        // 不添加分号
        "prettier.semi": false,
        // 使用单引号
        "prettier.singleQuote": true,
        // 解决Vue的属性换行问题
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        "vetur.format.defaultFormatter.js": "vscode-typescript",//在配置了默认格式后 这个需要打开 否则js格式化会换行
        "vetur.format.defaultFormatterOptions": { 
    
            "js-beautify-html": { 
                "wrap_attributes": "auto"
            },
            "prettyhtml": { 
                "printWidth": 1000,
                "singleQuote": false,
                "wrapAttributes": false,
                "sortAttributes": false
            }
        },

3.如果右键格式化或者ctrl+s，没有触发效果，在配置一下格式化的默认方式：看图，选择Vetur为默认值。  
![在这里插入图片描述][20210422174613378.gif]

[20210303133954289.gif]: /images/20210724/9d7c5ece0dea457a89705841b062cb59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]: /images/20210724/6e63a5fe95bc47918baa294533ce6a71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]: /images/20210724/af73564a0136407a850e7ba1fdae7109.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 2]: /images/20210724/59077e2af8514f1d8bd04429bb52567a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 3]: /images/20210724/adc8b0e1c25b4ef596dc575aeb2e8ce1.png
[20210422174613378.gif]: /images/20210724/e041000a431c422c980d0b6917b08c49.png