Format Project - Native Desktop

The fmt command runs Prettier on your Native Desktop project to automatically format your code, ensuring consistent style and formatting across your entire codebase.

Prerequisites

Before running the format command, ensure:

Your project has been created using native-desktop create
All dependencies are installed (npm install)
Prettier configuration exists (.prettierrc)

Basic Usage

To format your project, open the terminal in the root directory of your Native Desktop project and run:

native-desktop fmt

This command will:

Load Prettier configuration from .prettierrc
Scan all source files in your project
Automatically format files according to configured rules
Save the formatted files
Report the number of files formatted

What Gets Formatted

By default, the format command processes:

All TypeScript files (.ts, .tsx)
All JavaScript files (.js, .jsx)
JSON files (.json, .json5)
Markdown files (.md, .mdx)
CSS/SCSS files (.css, .scss)
HTML files (.html)
YAML files (.yml, .yaml)

Files and directories specified in .prettierignore are automatically excluded from formatting.

Output Examples

Successful Format

$ native-desktop fmt

✓ Formatting complete
✓ 24 files formatted
✓ 0 files unchanged
All files are now properly formatted

No Changes Needed

$ native-desktop fmt

✓ All files already formatted
✓ 0 files changed
✓ 24 files checked
No formatting changes needed

With Errors

$ native-desktop fmt

✖ Error formatting files
✖ Syntax error in src/index.ts
Please fix syntax errors before formatting

Prettier Configuration

The format command uses the .prettierrc file generated by native-desktop create. Here’s an example configuration:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

Configuration Options

Common Prettier options you can customize:

Code Style
Spacing
Trailing Items
Special

semi: Add semicolons at the end of statements (default: true)
singleQuote: Use single quotes instead of double quotes (default: true)
quoteProps: When to quote properties in objects
jsxSingleQuote: Use single quotes in JSX (default: false)

tabWidth: Number of spaces per indentation level (default: 2)
useTabs: Use tabs instead of spaces (default: false)
printWidth: Maximum line length (default: 80)

trailingComma: Add trailing commas where valid (options: "none", "es5", "all")
bracketSpacing: Print spaces between brackets in object literals (default: true)
bracketSameLine: Put > on the same line in JSX (default: false)

arrowParens: Include parentheses around arrow function parameters (options: "always", "avoid")
endOfLine: Line ending style (options: "lf", "crlf", "cr", "auto")
proseWrap: How to wrap prose in Markdown (options: "always", "never", "preserve")

Formatting Examples

Before Formatting

const myFunction=(x:number,y:number)=>{
return x+y
}

const obj={name:"John",age:30,city:"New York"}

if(condition){
console.log("Hello")
}

After Formatting

const myFunction = (x: number, y: number) => {
  return x + y;
};

const obj = { name: 'John', age: 30, city: 'New York' };

if (condition) {
  console.log('Hello');
}

Ignoring Files

Create or edit .prettierignore to exclude files from formatting:

# .prettierignore
node_modules/
bin/
dist/
build/
coverage/
*.min.js
*.bundle.js
package-lock.json

Ignoring Code Blocks

You can ignore specific code blocks in your files:

// prettier-ignore
const uglyMatrix = [
  1,0,0,
  0,1,0,
  0,0,1
];

// This will be formatted normally
const normalArray = [1, 2, 3, 4, 5];

Or ignore entire files:

// prettier-ignore-file

// This entire file won't be formatted
const anything = "goes here"

Integration with Development Workflow

Pre-Commit Hook

Format code automatically before commits using Husky:

{
  "husky": {
    "hooks": {
      "pre-commit": "native-desktop fmt"
    }
  }
}

CI/CD Pipeline

Check formatting in your continuous integration:

# GitHub Actions example
- name: Check Code Formatting
  run: |
    native-desktop fmt
    git diff --exit-code

npm Scripts

Add formatting to your package.json scripts:

{
  "scripts": {
    "format": "native-desktop fmt",
    "format:check": "prettier --check .",
    "precommit": "native-desktop fmt && native-desktop lint"
  }
}

Format vs Lint

Understanding the difference between fmt and lint:

Aspect	`native-desktop fmt`	`native-desktop lint`
Purpose	Code formatting	Code quality & patterns
Tool	Prettier	ESLint
Auto-Fix	✅ Yes (always)	⚠️ Limited
Focus	Style consistency	Logic & best practices
Concerns	Indentation, quotes, spacing	Unused variables, type safety
Conflicts	Can conflict with ESLint	Can conflict with Prettier

Use both commands together: native-desktop fmt for style, native-desktop lint for quality.

Common Issues

Prettier Configuration Not Found

Error: .prettierrc not foundSolution: Ensure the configuration file exists in your project root.

# Check if file exists
ls -la .prettierrc

# Create default configuration if missing
echo '{ "semi": true, "singleQuote": true }' > .prettierrc

Syntax Errors Prevent Formatting

Error: SyntaxError: Unexpected tokenSolution: Fix syntax errors in your code before formatting.

# Check for TypeScript errors
native-desktop types

# Fix syntax errors, then format
native-desktop fmt

Conflicting ESLint and Prettier Rules

Error: ESLint and Prettier disagree on formattingSolution: Install eslint-config-prettier to disable conflicting ESLint rules.

npm install --save-dev eslint-config-prettier

Update .eslintrc.json:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

Files Not Being Formatted

Error: Some files are not formattedSolution: Check .prettierignore and ensure files aren’t excluded.

# List files that would be formatted
npx prettier --list-different "src/**/*.ts"

# Check ignore patterns
cat .prettierignore

Format Changes Not Saved

Error: Files appear formatted but changes aren’t savedSolution: Check file permissions and ensure you have write access.

# Check file permissions
ls -la src/

# Fix permissions if needed
chmod u+w src/*.ts

Customizing Prettier

You can customize Prettier rules in .prettierrc:

{
  // Use single quotes
  "singleQuote": true,
  
  // Always add semicolons
  "semi": true,
  
  // Add trailing commas
  "trailingComma": "all",
  
  // 100 characters per line
  "printWidth": 100,
  
  // 2 spaces for indentation
  "tabWidth": 2,
  
  // Use spaces, not tabs
  "useTabs": false,
  
  // Always wrap arrow function parameters
  "arrowParens": "always",
  
  // Unix line endings
  "endOfLine": "lf",
  
  // Add space between brackets
  "bracketSpacing": true
}

Language-Specific Overrides

You can apply different rules to different file types:

{
  "semi": true,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "printWidth": 120
      }
    },
    {
      "files": "*.md",
      "options": {
        "proseWrap": "always",
        "printWidth": 80
      }
    },
    {
      "files": "*.html",
      "options": {
        "printWidth": 120,
        "htmlWhitespaceSensitivity": "ignore"
      }
    }
  ]
}

IDE Integration

Visual Studio Code

Install the Prettier extension:

Open VS Code
Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
Search for “Prettier - Code formatter”
Install the official Prettier extension

Configure auto-format on save:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

WebStorm / IntelliJ IDEA

Prettier is built-in. Enable it in: Settings → Languages & Frameworks → JavaScript → Prettier

Check “Automatic Prettier configuration”
Check “Run on save for files”

Sublime Text

Install the JsPrettier package via Package Control.

Best Practices

Format Frequently

Run formatting regularly during development to maintain consistency.

Commit Formatted Code

Always format code before committing to keep the repository clean.

Team Consistency

Share the same Prettier configuration across your entire team.

Automate Formatting

Set up automatic formatting in your IDE and CI/CD pipeline.

Checking Without Formatting

To check if files need formatting without modifying them:

# Using Prettier directly
npx prettier --check .

# Check specific files
npx prettier --check "src/**/*.ts"

This is useful for CI/CD pipelines where you want to verify formatting without making changes.

Format Specific Files

While the CLI command formats the entire project, you can format specific files using npx:

# Format specific file
npx prettier --write src/index.ts

# Format specific directory
npx prettier --write "src/components/**/*.ts"

# Format all TypeScript files
npx prettier --write "**/*.ts"

Development Workflow

Recommended workflow for code formatting:

Performance Tips

Use .prettierignore

Exclude large directories to speed up formatting.

Format Changed Files

In large projects, format only modified files.

Cache Results

Prettier caches results for faster subsequent runs.

IDE Formatting

Use IDE auto-format for immediate feedback.

Command Comparison

Command	Tool	Purpose	Changes Files
`native-desktop fmt`	Prettier	Format code style	✅ Yes
`native-desktop lint`	ESLint	Check code quality	❌ No
`native-desktop types`	TypeScript	Check types	❌ No

For best results, run all three commands as part of your development workflow.

Exit Codes

The format command uses standard exit codes:

0: Files formatted successfully
1: Errors occurred during formatting

native-desktop fmt
echo $?  # Check exit code

Quick Start

Getting started

Tips and Tricks

User Guide

​Prerequisites

​Basic Usage

​What Gets Formatted

​Output Examples

​Successful Format

​No Changes Needed

​With Errors

​Prettier Configuration

​Configuration Options

​Formatting Examples

​Before Formatting

​After Formatting

​Ignoring Files

​Ignoring Code Blocks

​Integration with Development Workflow

​Pre-Commit Hook

​CI/CD Pipeline

​npm Scripts

​Format vs Lint

​Common Issues

​Customizing Prettier

​Language-Specific Overrides

​IDE Integration

​Visual Studio Code

​WebStorm / IntelliJ IDEA

​Sublime Text

​Best Practices

Format Frequently

Commit Formatted Code

Team Consistency

Automate Formatting

​Checking Without Formatting

​Format Specific Files

​Development Workflow

​Performance Tips

Use .prettierignore

Format Changed Files

Cache Results

IDE Formatting

​Command Comparison

​Exit Codes

Prerequisites

Basic Usage

What Gets Formatted

Output Examples

Successful Format

No Changes Needed

With Errors

Prettier Configuration

Configuration Options

Formatting Examples

Before Formatting

After Formatting

Ignoring Files

Ignoring Code Blocks

Integration with Development Workflow

Pre-Commit Hook

CI/CD Pipeline

npm Scripts

Format vs Lint

Common Issues

Customizing Prettier

Language-Specific Overrides

IDE Integration

Visual Studio Code

WebStorm / IntelliJ IDEA

Sublime Text

Best Practices

Checking Without Formatting

Format Specific Files

Development Workflow

Performance Tips

Command Comparison

Exit Codes