VSCode 设置代码格式化

最新推荐文章于 2025-04-21 19:20:11 发布

小谷69

最新推荐文章于 2025-04-21 19:20:11 发布

阅读量2.3k

点赞数 1

文章标签： vscode javascript

本文链接：https://blog.csdn.net/weixin_56242672/article/details/126013813

版权

VSCode 设置代码格式化

文件->首选项->设置然后右上角打开设置（json）
在这里插入图片描述

默认设置：

{
    "editor.fontSize": 18,
    "merge-conflict.codeLens.enabled": false,
    "editor.unicodeHighlight.includeStrings": false,
    "editor.unicodeHighlight.includeComments": false,
    "editor.unicodeHighlight.nonBasicASCII": false,
    "diffEditor.ignoreTrimWhitespace": false,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    }
}

规则1：

{
    "git.autofetch": true,
    "editor.quickSuggestions": {
    "strings": true
    },
    "files.autoSave": "afterDelay",
    // vetur configuration
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",
    "vetur.format.defaultFormatterOptions": {
    // 属性强制折行对齐
    "wrap_attributes": "force-aligned"
    },
    // eslint configuration
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
    {
    "language": "html",
    "autoFix": true
    },
    {
    "language": "vue",
    "autoFix": true
    },
    {
    "language": "css",
    "autoFix": true
    },
    {
    "language": "scss",
    "autoFix": true
    },
    {
    "language": "typescript",
    "autoFix": true
    },
    {
    "language": "javascript",
    "autoFix": true
    },
    {
    "language": "javascriptreact",
    "autoFix": true
    }
    ],
    "explorer.confirmDelete": true,
    "vetur.validation.template": false,
    "editor.fontSize": 16,
    "window.zoomLevel": 0,
    "editor.minimap.enabled": false,
    "workbench.startupEditor": "newUntitledFile",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "workbench.colorTheme": "Visual Studio Dark",
    "javascript.updateImportsOnFileMove.enabled": "never",
}

规则2：

{
  "files.eol": "\n",
  "typescript.preferences.quoteStyle": "single",
  "javascript.preferences.quoteStyle": "single",
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 编辑器换行
  "editor.wordWrap": "off",
  // 保存时格式化
  "editor.formatOnSave": false,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // prettier 设置语句末尾不加分号
  "prettier.semi": false,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple"
    },
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "printWidth": 100,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  }
}

推荐使用规则2