vue + ts 在 vscode 中格式化方案

vue3 + ts 在 vscode 中格式化方案

1. 安装插件

安装插件 Prettier、Volar (如果安装的有 vetur 的话记得要给禁用或卸载掉不然可能会有冲突)

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
}

虽说标题写的是 vue3 但是 vue2 用起来也是可以的