Vue 项目进行的代码格式化的 vscode 个人配置 settings.json

依赖的插件：Vetur、Prettier、Material Icon Theme

{
    // 单独的文件采用 prettier 格式化配置
    "prettier.semi": true, // 句尾添加分号
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.printWidth": 100, // 超过最大字符长度换行
    "prettier.bracketSpacing": true, // 对象/数组括号与内容之间加空格
    "prettier.trailingComma": "es5", // 对象/数组最后一个元素后面是否加逗号 none──无尾后逗号、 es5──在 ES5 中有效的尾后逗号（如对象与数组等）、 all──尽可能添加尾后逗号（如函数参数）

    // 采用 vetur 格式化配置
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatterOptions": {
        // 使用 veter 格式化的 vue 文件中的对应代码类型采用 prettier 格式化也需要单独写一次 prettier 配置
        "prettier": {
            "semi": true,
            "useTabs": false,
            "tabWidth": 4,
            "singleQuote": true,
            "printWidth": 100,
            "bracketSpacing": true,
            "trailingComma": "es5"
        }
    },

    // 各类文件默认代码格式化采用插件
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    /* ************* 本地的一些 vscode 个人偏好配置 可以忽略不设置这些 ************* */
    // 删除文件提示弹窗弹出确认
    "explorer.confirmDelete": false,
    // 代码折叠 按照缩进折叠
    "editor.foldingStrategy": "indentation",
    // 保存立即更改
    "editor.formatOnSave": false,
    // 鼠标悬浮，代码提示
    "editor.hover.enabled": true,
    "security.workspace.trust.untrustedFiles": "open",
    "workbench.colorTheme": "Default Dark+",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.startupEditor": "none",
    "files.associations": {
        "*.ftl": "html"
    }
}