vscode设置保存时代码格式化

Vue3+TS在VSCode中的格式化配置

A . 阿冰

已于 2023-10-12 17:52:34 修改

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

于 2023-04-13 17:04:18 首次发布

本文链接：https://blog.csdn.net/weixin_43824144/article/details/130134676

vue3 + ts 在vscode中格式化方案

- 1. 安装插件
- 2. 配置settings.json

1. 安装插件

安装插件 Prettier、Volar

在这里插入图片描述

2. 配置settings.json

在这里插入图片描述

按上方图片步骤依次操作然后把下方json文本复制进去就行了

{
    "editor.fontSize": 16, // 编辑器文本大小
    "workbench.tree.indent": 12, // 编辑器文本缩进
    "editor.tabSize": 4, // 代码文本缩进
    "editor.guides.highlightActiveIndentation": "always", // 显示缩进线
    "editor.detectIndentation": false, // 打开文件不覆盖
    "editor.formatOnSave": true, // 保存时格式化代码
    "html.format.wrapAttributes": "auto",
    // 每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 默认格式化程序
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "tabnine.experimentalAutoImports": true,

    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[vue]": {
        // "editor.defaultFormatter": "Vue.volar"
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[python]": {
        "editor.formatOnType": true
    },
    "volar.format.initialIndent": {
        "html": true
    },
    "prettier.arrowParens": "avoid",
    "prettier.tabWidth": 4,
    "prettier.trailingComma": "none", // 结尾加逗号 all | none
    "prettier.useEditorConfig": true,
    "prettier.semi": true, // 取消自动加分号
    "prettier.singleQuote": true, // 保持单引号，不自动变双引号
    "prettier.printWidth": 100, // 超过最大值换行
    "editor.accessibilitySupport": "off",
    "vite.autoStart": false,
    "liveServer.settings.port": 5001,
    "vue.codeActions.savingTimeLimit": 1500
}