How to Format YAML codes in VSCode

 Windows:

To ensure correct spacing in YAML while editing in VS Code, follow these tips:

1️⃣ Enable YAML Formatting in VS Code

• Install the YAML extension by Red Hat (redhat.vscode-yaml).
• Go to Extensions (Ctrl + Shift + X), search YAML, and install.

2️⃣ Configure VS Code for YAML Formatting

• Open VS Code settings (Ctrl + ,).
• Search for "yaml.format.enable" and enable it.

Alternatively, manually add this in settings.json:

json
{
  "[yaml]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  }
}

3️⃣ Format YAML Using Prettier

• Install Prettier extension.
• Set Prettier as default formatter:
  Go to settings.json and add:

  json
  {
    "[yaml]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  }
  

• Use Shift + Alt + F to format YAML files automatically.

4️⃣ Convert Tabs to Spaces in YAML

• Open your YAML file.
• Press Ctrl + Shift + P → Search "Convert Indentation to Spaces".
• Ensure "Tab Size: 2" is set for correct YAML indentation.

5️⃣ Validate YAML to Avoid Errors

• Open VS Code terminal and run:

  sh
  yamllint myfile.yaml
  

• Install yamllint using:

  sh
  pip install yamllint
  

---

✅ Example of Properly Indented YAML

yaml
AWSTemplateFormatVersion: '2010-09-09'
Resources:
  MyBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: my-test-bucket
      VersioningConfiguration:
        Status: Enabled
      Tags:
        - Key: Project
          Value: Demo

MAC:

Here’s how to fix YAML indentation issues and automatically format YAML files in VS Code on Mac:

---

1️⃣ Install YAML Extension in VS Code

• Open VS Code.
• Press Cmd + Shift + X to open the Extensions panel.
• Search for "YAML" (by Red Hat) and click Install.

---

2️⃣ Configure VS Code for YAML Formatting

• Open Settings (Cmd + ,).
• Search for "yaml.format.enable" and enable it.

Or manually add this to settings.json:

1. Open Command Palette (Cmd + Shift + P).
2. Search "Preferences: Open Settings (JSON)" and click it.
3. Add the following:

json
{
  "[yaml]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  }
}

---

3️⃣ Install Prettier for YAML Formatting

• Open Extensions (Cmd + Shift + X).
• Search "Prettier - Code formatter" and install it.

Set Prettier as the default formatter:

1. Open Settings (JSON) (Cmd + Shift + P → "Preferences: Open Settings (JSON)").
2. Add:

json
{
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

3. Now, press Shift + Option + F to format YAML files automatically.

---

4️⃣ Convert Tabs to Spaces

• Open your YAML file in VS Code.
• Press Cmd + Shift + P, search "Convert Indentation to Spaces", and select it.
• Set "Tab Size: 2" for correct YAML indentation.

---

5️⃣ Validate YAML to Avoid Errors

Install YAML Linter (optional, but helpful):

1. Open Terminal (Cmd + Space → Search "Terminal").
2. Run:

   sh
   brew install yamllint
   

3. Validate YAML files:

   sh
   yamllint myfile.yaml
   

---

✅ Example of Properly Indented YAML

yaml
AWSTemplateFormatVersion: '2010-09-09'
Resources:
  MyBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: my-test-bucket
      VersioningConfiguration:
        Status: Enabled
      Tags:
        - Key: Project
          Value: Demo