Code Beautifier Guide: JavaScript, TypeScript, PHP, Python, SQL & More

// Before formatting
function calculateTotal(items){const subtotal=items.reduce((sum,item)=>sum+item.price,0);const tax=subtotal*0.1;return subtotal+tax;}

// After formatting
function calculateTotal(items) {
  const subtotal = items.reduce((sum, item) => sum + item.price, 0);
  const tax = subtotal * 0.1;
  return subtotal + tax;
}

// Using js-beautify library
const beautify = require('js-beautify').js;
const formatted = beautify(code, {
  indent_size: 2,
  space_in_empty_paren: true
});

// .prettierrc
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

// package.json
{
  "scripts": {
    "format": "prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,md}"",
    "format:check": "prettier --check "src/**/*.{js,jsx,ts,tsx}""
  }
}

// Format code with Prettier
// npx prettier --write src/index.js

// .eslintrc.json
{
  "extends": ["eslint:recommended", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-unused-vars": "warn",
    "no-console": "off"
  },
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  }
}

// package.json
{
  "scripts": {
    "lint": "eslint src/**/*.js",
    "lint:fix": "eslint src/**/*.js --fix"
  }
}

// Auto-fix formatting issues
// npm run lint:fix

// package.json
{
  "scripts": {
    "test": "standard && node test.js",
    "fix": "standard --fix"
  },
  "standard": {
    "env": ["jest"],
    "ignore": [
      "**/dist/",
      "node_modules/"
    ]
  }
}

// StandardJS rules (no config needed):
// - 2 spaces for indentation
// - Single quotes for strings
// - No semicolons
// - No unused variables
// - Space after keywords
// - Space after function names

// Example formatted code:
function hello (name) {
  console.log('Hello', name)
}

// Before formatting
interface User{name:string;age:number;email:string;}
const user:User={name:"John",age:30,email:"[email protected]"};
function greet(user:User):void{console.log(`Hello,${user.name}`);}

// After formatting
interface User {
  name: string;
  age: number;
  email: string;
}

const user: User = {
  name: 'John',
  age: 30,
  email: '[email protected]',
};

function greet(user: User): void {
  console.log(`Hello, ${user.name}`);
}

// .prettierrc
{
  "parser": "typescript",
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "always"
}

// .eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-function-return-type": "warn",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

// tsconfig.json - formatting affects compilation
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

// .eslintrc.json - TypeScript-specific formatting
{
  "rules": {
    "@typescript-eslint/member-delimiter-style": ["error", {
      "multiline": {
        "delimiter": "semi",
        "requireLast": true
      },
      "singleline": {
        "delimiter": "semi",
        "requireLast": false
      }
    }],
    "@typescript-eslint/type-annotation-spacing": "error",
    "@typescript-eslint/consistent-type-definitions": ["error", "interface"]
  }
}

<?php
// Before formatting
class User{private $name;private $email;public function __construct($name,$email){$this->name=$name;$this->email=$email;}public function getName(){return $this->name;}}

// After formatting (PSR-12)
<?php

declare(strict_types=1);

class User
{
    private string $name;
    private string $email;

    public function __construct(string $name, string $email)
    {
        $this->name = $name;
        $this->email = $email;
    }

    public function getName(): string
    {
        return $this->name;
    }
}

// .php-cs-fixer.php
<?php

$finder = PhpCsFixer\Finder::create()
    ->in(__DIR__)
    ->exclude('vendor')
    ->exclude('storage')
    ->name('*.php');

return (new PhpCsFixer\Config())
    ->setRules([
        '@PSR12' => true,
        'array_syntax' => ['syntax' => 'short'],
        'ordered_imports' => ['sort_algorithm' => 'alpha'],
        'no_unused_imports' => true,
        'not_operator_with_successor_space' => true,
        'trailing_comma_in_multiline' => true,
        'phpdoc_scalar' => true,
        'unary_operator_spaces' => true,
        'binary_operator_spaces' => true,
        'blank_line_before_statement' => [
            'statements' => ['break', 'continue', 'declare', 'return', 'throw', 'try'],
        ],
        'phpdoc_single_line_var_spacing' => true,
        'phpdoc_var_without_name' => true,
    ])
    ->setFinder($finder);

// Run formatter
// vendor/bin/php-cs-fixer fix

<!-- phpcs.xml -->
<?xml version="1.0"?>
<ruleset name="Project Coding Standard">
    <description>Custom coding standard</description>

    <file>src</file>
    <file>tests</file>

    <exclude-pattern>*/vendor/*</exclude-pattern>
    <exclude-pattern>*/storage/*</exclude-pattern>

    <arg name="colors"/>
    <arg value="p"/>

    <rule ref="PSR12"/>

    <rule ref="Generic.Files.LineLength">
        <properties>
            <property name="lineLimit" value="120"/>
            <property name="absoluteLineLimit" value="0"/>
        </properties>
    </rule>
</ruleset>

<!-- Run with: -->
<!-- vendor/bin/phpcs -->
<!-- vendor/bin/phpcbf (auto-fix) -->

# Before formatting
def calculate_total(items):
    subtotal=sum([item['price'] for item in items])
    tax=subtotal*0.1
    return subtotal+tax
class User:
    def __init__(self,name,email):
        self.name=name
        self.email=email

# After formatting (PEP 8)
def calculate_total(items):
    subtotal = sum([item['price'] for item in items])
    tax = subtotal * 0.1
    return subtotal + tax


class User:
    def __init__(self, name, email):
        self.name = name
        self.email = email

# pyproject.toml
[tool.black]
line-length = 88
target-version = ['py38', 'py39', 'py310']
include = '\.pyi?$'
extend-exclude = '''
/(
  # directories
  \.eggs
  | \.git
  | \.mypy_cache
  | \.venv
  | build
  | dist
)/
'''

# Install and run
# pip install black
# black .
# black --check .  # Check without modifying

# Example formatted code:
def long_function_name(
    var_one, var_two, var_three, var_four
):
    """Black automatically formats long function signatures."""
    return var_one + var_two + var_three + var_four

# setup.cfg or .pep8
[pycodestyle]
max-line-length = 120
exclude = .git,__pycache__,build,dist

[tool:autopep8]
max_line_length = 120
ignore = E501,W6
in-place = True
recursive = True
aggressive = 3

# Run autopep8
# autopep8 --in-place --aggressive --aggressive script.py
# autopep8 --in-place --recursive --aggressive --aggressive .

# autopep8 vs Black:
# - autopep8: More configurable, less opinionated
# - Black: Zero config, highly opinionated, faster

# .style.yapf
[style]
based_on_style = pep8
indent_width = 4
column_limit = 100
split_before_logical_operator = true
dedent_closing_brackets = true
coalesce_brackets = true
space_between_ending_comma_and_closing_bracket = false

# Run YAPF
# yapf -i script.py  # In-place
# yapf -r -i .       # Recursive

# YAPF styles:
# - pep8 (default)
# - google
# - facebook
# - chromium

-- Before formatting
select u.id,u.name,u.email,o.order_id,o.total from users u join orders o on u.id=o.user_id where o.total>100 and u.status='active' order by o.total desc;

-- After formatting
SELECT
    u.id,
    u.name,
    u.email,
    o.order_id,
    o.total
FROM users u
JOIN orders o
    ON u.id = o.user_id
WHERE o.total > 100
    AND u.status = 'active'
ORDER BY o.total DESC;

// Using sql-formatter library
const format = require('sql-formatter');

const query = 'SELECT * FROM users WHERE id=1 AND status="active"';

const formatted = format.format(query, {
  language: 'sql', // or 'postgresql', 'mysql', 'pl/sql'
  indent: '  ',
  uppercase: true,
  linesBetweenQueries: 2
});

console.log(formatted);
/*
SELECT
  *
FROM
  users
WHERE
  id = 1
  AND status = "active"
*/

// Additional options
const customFormatted = format.format(query, {
  language: 'postgresql',
  keywordCase: 'upper',
  indentStyle: 'standard',
  logicalOperatorNewline: 'before'
});

-- SQL Formatting Best Practices

-- 1. Keywords in UPPERCASE
SELECT, FROM, WHERE, JOIN, ORDER BY

-- 2. One column per line in SELECT
SELECT
    user_id,
    first_name,
    last_name,
    email
FROM users;

-- 3. Align JOIN conditions
FROM users u
INNER JOIN orders o
    ON u.id = o.user_id
LEFT JOIN products p
    ON o.product_id = p.id;

-- 4. Indent subqueries
SELECT *
FROM (
    SELECT
        user_id,
        COUNT(*) as order_count
    FROM orders
    GROUP BY user_id
) subquery
WHERE order_count > 5;

-- 5. Break complex WHERE clauses
WHERE status = 'active'
    AND (
        created_at > '2024-01-01'
        OR updated_at > '2024-01-01'
    )
    AND category IN ('A', 'B', 'C');

// .vscode/settings.json
{
  // Editor
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // Language-specific
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true
  },
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },

  // Extensions settings
  "prettier.requireConfig": true,
  "eslint.validate": ["javascript", "typescript"],
  "python.formatting.provider": "black"
}

<!-- .idea/codeStyleSettings.xml -->
<component name="ProjectCodeStyleConfiguration">
  <code_scheme name="Project">
    <JSCodeStyleSettings>
      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="true"/>
      <option name="FORCE_SEMICOLON_STYLE" value="true"/>
      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false"/>
      <option name="USE_DOUBLE_QUOTES" value="false"/>
      <option name="FORCE_QUOTE_STYlE" value="true"/>
    </JSCodeStyleSettings>
  </code_scheme>
</component>

<!-- Enable Prettier in WebStorm: -->
<!-- Settings → Languages & Frameworks → JavaScript → Prettier -->
<!-- Check: "On code reformat" and "On save" -->

// Preferences.sublime-settings
{
  "rulers": [80, 120],
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true,
  "ensure_newline_at_eof_on_save": true,

  // JsPrettier settings
  "js_prettier": {
    "auto_format_on_save": true,
    "prettier_cli_path": "prettier"
  },

  // SublimeLinter
  "linters": {
    "eslint": {
      "args": ["--fix"]
    }
  }
}

// Install packages:
// - JsPrettier
// - SublimeLinter
// - SublimeLinter-eslint

" .vimrc or init.vim

" Install vim-plug for plugin management
" Plugins
call plug#begin('~/.vim/plugged')
  Plug 'prettier/vim-prettier'
  Plug 'dense-analysis/ale'
  Plug 'psf/black', { 'branch': 'stable' }
call plug#end()

" Prettier
let g:prettier#autoformat = 1
let g:prettier#autoformat_require_pragma = 0
let g:prettier#config#single_quote = 'true'
let g:prettier#config#trailing_comma = 'es5'

" ALE (ESLint, etc.)
let g:ale_fixers = {
\   'javascript': ['prettier', 'eslint'],
\   'typescript': ['prettier', 'eslint'],
\   'python': ['black', 'isort'],
\}
let g:ale_fix_on_save = 1

" Black (Python)
autocmd BufWritePre *.py execute ':Black'

" Format on save
autocmd BufWritePre * :Prettier

// package.json
{
  "devDependencies": {
    "husky": "^8.0.0",
    "lint-staged": "^13.0.0",
    "prettier": "^2.8.0",
    "eslint": "^8.0.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}

// .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

// Install
// npx husky-init && npm install
// npx husky add .husky/pre-commit "npx lint-staged"

# .pre-commit-config.yaml
repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.4.0
    hooks:
      - id: trailing-whitespace
      - id: end-of-file-fixer
      - id: check-yaml
      - id: check-added-large-files

  - repo: https://github.com/psf/black
    rev: 23.1.0
    hooks:
      - id: black
        language_version: python3.10

  - repo: https://github.com/pycqa/isort
    rev: 5.12.0
    hooks:
      - id: isort
        args: ["--profile", "black"]

  - repo: https://github.com/pycqa/flake8
    rev: 6.0.0
    hooks:
      - id: flake8

# Install
# pip install pre-commit
# pre-commit install
# pre-commit run --all-files

#!/bin/sh
# .git/hooks/pre-commit

echo "Running code formatters..."

# Format JavaScript/TypeScript
npx prettier --write "src/**/*.{js,ts,jsx,tsx}"

# Format Python
black .

# Format PHP
vendor/bin/php-cs-fixer fix

# Stage formatted files
git add -u

echo "Code formatted successfully!"

# .github/workflows/format.yml
name: Code Formatting

on: [push, pull_request]

jobs:
  format:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Check Prettier formatting
        run: npm run format:check

      - name: Check ESLint
        run: npm run lint

      - name: Set up Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.10'

      - name: Check Black formatting
        run: |
          pip install black
          black --check .

      - name: Check PHP formatting
        run: |
          composer install
          vendor/bin/php-cs-fixer fix --dry-run --diff

# .gitlab-ci.yml
format-check:
  stage: test
  image: node:18
  script:
    - npm ci
    - npm run format:check
    - npm run lint

python-format:
  stage: test
  image: python:3.10
  script:
    - pip install black
    - black --check .

php-format:
  stage: test
  image: php:8.1
  script:
    - composer install
    - vendor/bin/php-cs-fixer fix --dry-run --diff

  only:
    - merge_requests
    - main

// Jenkinsfile
pipeline {
    agent any

    stages {
        stage('Format Check') {
            steps {
                script {
                    sh 'npm ci'
                    sh 'npm run format:check'
                    sh 'npm run lint'
                }
            }
        }

        stage('Python Format') {
            steps {
                sh 'pip install black'
                sh 'black --check .'
            }
        }

        stage('PHP Format') {
            steps {
                sh 'composer install'
                sh 'vendor/bin/php-cs-fixer fix --dry-run'
            }
        }
    }

    post {
        failure {
            echo 'Formatting checks failed!'
        }
    }
}

# Team Code Style Guide

## JavaScript/TypeScript
- **Formatter:** Prettier
- **Linter:** ESLint
- **Style:** Airbnb Style Guide
- **Indentation:** 2 spaces
- **Quotes:** Single quotes
- **Semicolons:** Required
- **Line length:** 100 characters

## Python
- **Formatter:** Black
- **Linter:** Flake8
- **Style:** PEP 8
- **Line length:** 88 characters (Black default)
- **Imports:** Sorted with isort

## PHP
- **Formatter:** PHP-CS-Fixer
- **Standard:** PSR-12
- **Line length:** 120 characters

## SQL
- **Keywords:** UPPERCASE
- **One column per line** in SELECT
- **Indentation:** 2 spaces

## Setup
1. Clone repository
2. Run `npm install` (installs formatters)
3. Enable format-on-save in your editor
4. Run `npx husky install` (enables pre-commit hooks)

# .editorconfig
root = true

[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
trim_trailing_whitespace = true

[*.{js,jsx,ts,tsx,json}]
indent_style = space
indent_size = 2

[*.{py}]
indent_style = space
indent_size = 4

[*.{php}]
indent_style = space
indent_size = 4

[*.{md,yml,yaml}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

# Most editors support EditorConfig automatically
# VS Code: Install EditorConfig extension

Language Formatting Conventions:

JavaScript/TypeScript:
- Indentation: 2 spaces
- Quotes: Single quotes (Prettier default)
- Semicolons: Required
- Trailing commas: ES5 style
- Line length: 80-100 characters

Python:
- Indentation: 4 spaces (PEP 8)
- Line length: 79-88 characters
- Imports: Grouped and sorted
- Blank lines: 2 before classes, 1 before methods

PHP:
- Indentation: 4 spaces (PSR-12)
- Braces: Opening on same line
- Line length: 120 characters
- declare(strict_types=1) at top

SQL:
- Keywords: UPPERCASE
- Identifiers: lowercase
- Indentation: 2-4 spaces
- One column per line in SELECT

CSS/SCSS:
- Indentation: 2 spaces
- Properties: One per line
- Alphabetically sorted (optional)
- Space after colon

HTML:
- Indentation: 2 spaces
- Lowercase tags and attributes
- Double quotes for attributes
- Self-closing tags: <tag />