vscode如何自动重排json

🛠 Tools and Programming 💻Programming
,
1

This article was converted by SimpRead; the original source is at www.oryoy.com

In modern software development, JSON (JavaScript Object Notation), as a lightweight data interchange format, has become the standard for front-end/back-end communication, configuration file storage, and API responses.

In modern software development, JSON (JavaScript Object Notation), as a lightweight data interchange format, has become the standard for front-end/back-end communication, configuration file storage, and API responses. However, as project scale grows, JSON files often become lengthy, disorganized, and lack indentation or structure—leading to poor code readability, difficult debugging, and even hidden syntax errors. VS Code, as a powerful code editor, offers convenient solutions for JSON handling via its rich ecosystem of extensions. This article thoroughly recommends several outstanding JSON formatting extensions and shares practical tips to help you effortlessly resolve issues related to code formatting chaos and data validation. We’ll cover extension introductions, installation and configuration, usage methods, and advanced techniques—step by step—to ensure content is comprehensive and easy to get started with.

Why Do You Need a JSON Formatting Extension?

JSON files are fundamentally plain text, yet their strict syntax requirements (e.g., double quotes are mandatory; trailing commas are not allowed) make manual editing error-prone. Poorly formatted JSON not only reduces development efficiency but may also cause parsing failures. For example, an unformatted JSON response might look like this:

{"name":"John","age":30,"city":"New York","hobbies":["reading","coding"],"address":{"street":"123 Main St","zip":"10001"}}

This compact format is hard to read—especially when dealing with nested objects. After formatting:

{
    "name": "John",
    "age": 30,
    "city": "New York",
    "hobbies": [
        "reading",
        "coding"
    ],
    "address": {
        "street": "123 Main St",
        "zip": "10001"
    }
}

With such extensions, we can format, validate syntax, and even auto-fix errors with one click. This improves code quality and reduces debugging time. Next, we recommend several highly rated JSON extensions for VS Code.

Recommended Extension 1: Prettier – Code Formatter

Prettier is a universal code formatter supporting multiple languages including JSON, JavaScript, and HTML. Renowned for being “configuration-free and ready-to-use out-of-the-box,” it automatically enforces consistent code style—particularly beneficial for team collaboration.

Installation and Configuration

  1. Open VS Code, press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette.

  2. Type “Extensions: Install Extension”, then search for “Prettier – Code Formatter” (author: Prettier).

  3. Click Install. After installation, VS Code will prompt you to set the default formatter.

  4. Configuration: Create a .prettierrc file in your project root directory, or add the following to your VS Code settings (settings.json):

    {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "prettier.tabWidth": 4,
   "prettier.useTabs": false
}

    This ensures automatic formatting upon saving JSON files, using 4-space indentation.

Usage

  • Manual Formatting: Open a JSON file, right-click and select “Format Document”, or press Shift+Alt+F.

  • Example: Suppose you have a messy JSON file named config.json:

    {"server":{"host":"localhost","port":8080,"ssl":true},"users":[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]}

    After formatting with Prettier:

    {
  "server": {
      "host": "localhost",
      "port": 8080,
      "ssl": true
  },
  "users": [
      {
          "id": 1,
          "name": "Alice"
      },
      {
          "id": 2,
          "name": "Bob"
      }
  ]
}

    Prettier automatically handles quotes, commas, and indentation to guarantee consistency.

Pros and Limitations

  • Pros: Fast performance; supports customizable rules (e.g., single vs. double quotes); integrates well with tools like ESLint.
  • Limitations: Does not validate JSON syntax by default—if JSON is invalid, Prettier reports an error but does not fix it. Best suited for pure formatting tasks.

Recommended Extension 2: JSON Tools

JSON Tools is a versatile, JSON-focused extension offering formatting, validation, minification, and conversion capabilities. Developed by Zignd, it has over 5 million downloads and serves as the “Swiss Army knife” for JSON handling in VS Code.

Installation and Configuration

  1. Search the Extensions Marketplace for “JSON Tools” (author: Zignd).

  2. After installing, no extra configuration is required—but behavior can be customized via settings:

    {
   "jsonTools.formatOnPaste": true,
   "jsonTools.minifyOnSave": false
}

    This enables automatic formatting when pasting JSON.

Usage

  • Formatting: Right-click on the file or selected text and choose “JSON Tools: Format JSON”.
  • Validation: Select “JSON Tools: Validate JSON”; it highlights syntax errors (e.g., missing commas or invalid keys).
  • Minification: “JSON Tools: Minify JSON” compresses JSON into a single line for efficient transmission.
  • Conversion: Supports bidirectional conversion between JSON and JavaScript objects.

Example: Validation and Repair

Suppose your JSON contains an error:

{
    "name": "John",
    "age": 30,
    "hobbies": ["reading" "coding"]  // Missing comma
}

Running “Validate JSON” displays the error: “Expected ‘,’ but got ‘coding’”. You can manually fix it—or combine Prettier and other tools for automated repair.

Pros and Limitations

  • Pros: Built-in validation; handles large JSON files (>1 MB); requires no external dependencies.
  • Limitations: Less aesthetically refined than Prettier, but more JSON-specialized.

Recommended Extension 3: JSON Schema Validator (by Red Hat)

If your JSON involves data validation (e.g., API input), this extension is essential. Based on the JSON Schema standard, it provides real-time validation and auto-completion.

Installation and Configuration

  1. Search for “JSON Schema Validator” (author: Red Hat).

  2. After installing, define a schema. Create schema.json in your project:

    {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
       "name": { "type": "string" },
       "age": { "type": "number", "minimum": 0 }
   },
   "required": ["name"]
}

  3. Associate it in VS Code settings:

    {
   "json.schemas": [
       {
           "fileMatch": ["/*.json"],
           "url": "./schema.json"
       }
   ]
}

Usage

  • Validation: Open a JSON file—the extension highlights invalid data per schema (e.g., negative age values).

  • Auto-completion: Press Ctrl+Space while editing to receive schema-based suggestions.

  • Example: Assume user.json:

    {
  "name": "John",
  "age": -5  // Invalid, because minimum: 0
}

    The extension flags age in red with the message “age must be >= 0”. After fixing:

    {
  "name": "John",
  "age": 30
}

Pros and Limitations

  • Pros: Professional-grade validation—ideal for API development and configuration management.
  • Limitations: Requires manual schema definition; slightly steeper learning curve.

Advanced Usage Tips

1. Combine Extensions for End-to-End Workflow

  • Install Prettier + JSON Tools + JSON Schema Validator.

  • Workflow: Write JSON → Format with Prettier → Validate with JSON Tools → Check data integrity with Schema Validator.

  • Example script: Automate in VS Code tasks. Create .vscode/tasks.json:

    {
  "version": "2.0.0",
  "tasks": [
      {
          "label": "Format and Validate JSON",
          "type": "shell",
          "command": "prettier --write ${file} && node -e \"const fs=require('fs'); const data=JSON.parse(fs.readFileSync('${file}')); console.log('Valid JSON');\"",
          "group": "build"
      }
  ]
}

    Run the task via Ctrl+Shift+P to ensure both formatting and validity.

2. Handling Large JSON Files

  • For JSON >10 MB, use JSON Tools’ “Stream Format” mode to avoid memory overflow.
  • Tip: Process in chunks—select part of the JSON, right-click to format just that visible portion.

3. Custom Keyboard Shortcuts

  • Add to keybindings.json:

    [
  {
      "key": "ctrl+alt+f",
      "command": "editor.action.formatDocument",
      "when": "editorLangId == json"
  }
]

    This binds formatting exclusively to JSON files.

4. Git Integration

  • Enable “Format on Save” to ensure committed JSON is always properly formatted.
  • Use JSON Schema Validator for pre-commit validation to prevent invalid data from entering the repository.

5. Troubleshooting Common Issues

  • Formatting fails: Check for UTF-8 BOM or conflicting formatters (disable others).
  • Validation doesn’t work: Verify the schema URL is correct—or use relative paths.
  • Performance tuning: Disable “Editor: Format On Type” in VS Code settings to reduce latency.

Conclusion

By leveraging extensions like Prettier, JSON Tools, and JSON Schema Validator, you can efficiently tackle JSON formatting chaos and data validation challenges. Prettier ensures aesthetic consistency, JSON Tools delivers practical utilities, and Schema Validator guarantees data accuracy. Start with Prettier and extend based on project needs. Spend just 10 minutes configuring them—and significantly elevate your development experience. If your project uses specific frameworks (e.g., React or Node.js), these extensions integrate seamlessly with other tooling. Give them a try—your JSON code will become clean, structured, and reliable! If you encounter specific issues, feel free to share more details for targeted guidance.