Visual Studio Code格式化配置

目标任务: 基于vscode配置格式化工具,提高开发效率

  1. 安装Prettier - Code formatter插件
  2. 修改配置文件 setting.json
    在这里插入图片描述
{
  "git.enableSmartCommit": true,
  // 修改注释颜色
  "editor.tokenColorCustomizations": {
    "comments": {
      "fontStyle": "bold",
      "foreground": "#939a62"
    }
  },
  // 配置文件类型识别
  "files.associations": {
    "*.js": "javascript",
    "*.json": "jsonc",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "extensions.ignoreRecommendations": false,
  "files.exclude": {
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.hg": true,
    "**/.svn": true,
    "**/CVS": true,
    "**/node_modules": false,
    "**/tmp": true
  },
  // "javascript.implicitProjectConfig.experimentalDecorators": true,
  "explorer.confirmDragAndDrop": false,
  "typescript.updateImportsOnFileMove.enabled": "prompt",
  "git.confirmSync": false,
  "editor.tabSize": 2,
  "editor.fontWeight": "500",
  "[json]": {},
  "editor.tabCompletion": "on",
  "vsicons.projectDetection.autoReload": true,
  "editor.fontFamily": "'Courier New', monospace, Meslo LG M for Powerline,Monaco",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.fontSize": 18,
  "debug.console.fontSize": 14,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.minimap.enabled": true,
  "emmet.extensionsPath": [
    ""
  ],
  // vue eslint start 保存时自动格式化代码
  "editor.formatOnSave": true,
  // eslint配置项,保存时自动修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "vetur.ignoreProjectWarning": true,
  // 让vetur使用vs自带的js格式化工具
  // uni-app和vue 项目使用
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.semicolons": "remove",
  // // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // // 指定 *.js 文件的格式化工具为vscode自带
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  // // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.jsxBracketSameLine": true,
  // 函数前面加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  // eslint end
  // react
  // 当按tab键的时候,会自动提示
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.includeLanguages": {
    // jsx的提示
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
  },
  // end
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // @路径提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "git.ignoreMissingGitWarning": true,
  "window.zoomLevel": 1
}

错误提示插件:Error Lens
在这里插入图片描述

Visual Studio Code格式化 JSON 文件可以通过多种方式实现,主要包括使用内置功能或安装扩展来增强格式化能力。 ### 使用内置格式化功能 Visual Studio Code 提自带格式化工具,可以对 JSON 文件进行基本的格式化操作。以下是具体步骤: 1. 打开需要格式化的 JSON 文件。 2. 按下快捷键 `Shift + Alt + F`(Windows/Linux)或 `Shift + Option + F`(Mac)触发格式化命令。 3. 如果系统提示未找到合适的格式化程序,可以按照提示安装一个默认的格式化扩展。 默认情况下,Visual Studio Code 使用内置的格式化程序,但也可以通过设置更改默认的格式化工具。 ### 更改默认格式化程序为 Prettier Prettier 是一个流行的代码格式化工具,支持多种语言,包括 JSON。要将 Prettier 设置为默认的 JSON 格式化程序,需要进行以下配置: 1. 安装 Prettier 扩展。可以通过扩展市场搜索 "Prettier" 并安装。 2. 安装完成后,在工作区 `.vscode` 文件夹下的 `settings.json` 文件中添加以下语句: ```json "editor.defaultFormatter": "esbenp.prettier-vscode" ``` 这样就可以将 Prettier 设置为默认的格式化工具[^2]。 ### 使用 JSONViewer 插件 对于需要更高级功能的用户,可以安装 JSONViewer 插件来结构化显示 JSON 文件内容。以下是安装和使用步骤: 1. 下载 JSONViewer 插件,地址为:https://marketplace.visualstudio.com/items?itemName=MykolaTarasyuk.JSONViewer。 2. 关闭网络连接。 3. 双击下载的 `JsonViewer.vsix` 文件,自动安装到 Visual Studio Code 中。 4. 打开 Visual Studio Code。 5. 选择【扩展】-【管理扩展】。 6. 选择【已安装】,并去掉【自动更新此扩展】前面的对号。 7. 打开网络连接。 8. 点击【工具】,可以看到插件已安装成功。 9. 使用插件:直接点击插件,选择一种方式打开 JSON 文件,即可结构化显示内容[^3]。 ### 调试配置 如果需要在调试环境中格式化 JSON 文件,可以在 `.vscode` 文件夹中配置 `launch.json` 文件。例如,以下是一个简单的调试配置示例: ```json { "version": "0.2.0", "configurations": [ { "name": "(g++ 生成和调试活动文件)", "type": "cppdbg", "request": "launch", "program": "${workspaceFolder}/build/Test", "args": [], "stopAtEntry": false, "cwd": "${workspaceFolder}", "environment": [], "externalConsole": false, "MIMode": "gdb", "setupCommands": [ { "description": "Enable pretty-printing for gdb", "text": "-enable-pretty-printing", "ignoreFailures": true } ], "preLaunchTask": "Build" } ] } ``` 此配置文件可以用于调试和格式化 JSON 文件,具体路径和参数可以根据实际情况进行调整[^4]。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

多喝热水,重启试试

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值