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

 

本人常用配置

常用插件

常用 settings.json 配置 

{
  // 左侧目录不折叠
  "explorer.compactFolders": false,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": false,
  "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"
  },

  // 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才强制换行
    }
  },

  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true,
  
  // 忽略vetur错误提示
  "vetur.ignoreProjectWarning": true,

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // prettier配置
  "prettier": {
    // 句尾添加分号
    "semi": false,
    // 缩进字节数
    "tabWidth": 2,
    // 超过最大值换行
    "printWidth": 200,
    // 使用单引号代替双引号
    "singleQuote": true,
    "trailingComma": "none" // 禁止在末尾加逗号
  },
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "workbench.startupEditor": "none",
  "extensions.ignoreRecommendations": true,
  "editor.codeActionsOnSave": {}
}