vs code代码格式化配置

安装 Prettier - Code formatter

点击左下角 设置 > 设置 > 右上角 打开设置 按钮 > 打开 settings.json

{
  // 左侧目录不折叠
  "explorer.compactFolders": false,
  // 选择格式化工具
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // prettier格式化配置
  "prettier": {
    // 句尾添加分号
    "semi": false,
    // 缩进字节数
    "tabWidth": 2,
    // 超过最大值换行
    "printWidth": 500,
    // 使用单引号代替双引号
    "singleQuote": true
  }
}

vetur格式化vue

{
    // 左侧目录不折叠
    "explorer.compactFolders": false,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    // 代码提示顺序
    "editor.snippetSuggestions": "top",

    // 选择格式化工具
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },

    // prettier配置
    "prettier": {
        // 句尾添加分号
        "semi": false,
        // 缩进字节数
        "tabWidth": 4,
        // 超过最大值换行
        "printWidth": 500,
        // 使用单引号代替双引号
        "singleQuote": true
    },

    // vetur配置
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto" // 设置为“force-aligned”，效果会不一样
        },
        "prettier": {
            "semi": false, // 不加分号
            "singleQuote": true, // 用单引号
            "tabWidth": 2, // tab缩进空格个数
            "trailingComma": "none", // 禁止在末尾加逗号
            "printWidth": 200 // 每行宽达到200才强制换行
        }
    }
}

vscode文件图标插件

插件：vscode-icons