deno fmt for code formatting - Step-by-Step Execution

Concept Flow - deno fmt for code formatting

Write or edit code file

↓

Run 'deno fmt' command

↓

deno fmt reads file

↓

deno fmt applies formatting rules

↓

File is rewritten with formatted code

↓

Check formatted code in editor or terminal

This flow shows how you write code, run 'deno fmt', and get your code automatically formatted by Deno.

Execution Sample

Deno

console.log("hello world")

// Run in terminal:
deno fmt example.ts

This code shows unformatted JavaScript and how running 'deno fmt' formats it automatically.

Execution Table

Step	Action	Input Code Snippet	Output Code Snippet	Notes
1	Read file 'example.ts'	console.log("hello world")	console.log("hello world")	File content before formatting
2	Apply formatting rules	console.log("hello world")	console.log("hello world");	Added missing semicolon
3	Rewrite file with formatted code	console.log("hello world");	console.log("hello world");	File saved with formatting
4	Check formatted file	console.log("hello world");	console.log("hello world");	Code is now properly formatted

💡 Formatting complete, file rewritten with standard style

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
fileContent	console.log("hello world")	console.log("hello world");	console.log("hello world");	console.log("hello world");

Key Moments - 2 Insights

Why does 'deno fmt' add a semicolon at the end of the line?

Because Deno's formatter enforces consistent JavaScript style, including adding missing semicolons as shown in step 2 of the execution table.

Does 'deno fmt' change the code logic or just the style?

'deno fmt' only changes the style (formatting) without altering the code's behavior, as seen in the unchanged code logic from input to output in the execution table.

Visual Quiz - 3 Questions

Look at the execution table, what change happens at step 2?

A The code logic is changed

B The file is deleted

C A semicolon is added at the end of the line

D The file is renamed

💡 Hint

Check the 'Output Code Snippet' column at step 2 in the execution table

At which step is the file rewritten with the formatted code?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Action' column describing file rewrite in the execution table

If the original code already had a semicolon, how would the variable 'fileContent' change after step 2?

A It would remain the same

B It would remove the semicolon

C It would add another semicolon

D It would delete the code

💡 Hint

Refer to the 'variable_tracker' showing how formatting affects code content

Concept Snapshot

deno fmt formats your code files automatically.
Run 'deno fmt' in terminal.
It reads your code, applies style rules,
and rewrites the file with clean formatting.
It fixes spacing, semicolons, and indentation.
It does NOT change code logic.

Full Transcript

This lesson shows how the 'deno fmt' command formats code files. You start by writing or editing your code. Then you run 'deno fmt' in the terminal. Deno reads your file and applies formatting rules like adding missing semicolons and fixing indentation. It rewrites the file with the formatted code. The code logic stays the same, only the style changes. You can check the formatted code in your editor or terminal. This helps keep your code clean and consistent automatically.

Practice

1. What is the main purpose of the deno fmt command?

easy

A. To install third-party modules

B. To run your Deno program

C. To automatically format your code for better readability and consistency

D. To check for security vulnerabilities in your code

Solution

1. Step 1: Understand the role of deno fmt

   deno fmt is designed to format code automatically, making it easier to read and consistent across files.

2. Step 2: Differentiate from other commands

   Running programs, installing modules, or security checks are done by other commands like deno run, deno install, or deno lint.

3. Final Answer:

   To automatically format your code for better readability and consistency -> Option C

4. Quick Check:

   deno fmt formats code [OK]

Hint: Remember: fmt means format code automatically [OK]

Common Mistakes:

• Confusing fmt with run or install commands
• Thinking fmt checks code errors instead of formatting
• Assuming fmt modifies program logic

2. Which of the following is the correct way to run deno fmt on all supported files in your project?

easy

A. deno fmt

B. deno fmt install

C. deno fmt run

D. deno fmt --check

Solution

1. Step 1: Identify the basic command to format files

   Running deno fmt without extra flags formats all supported files in the current directory and subdirectories.

2. Step 2: Understand other options

   --check only checks formatting without changing files; run and install are unrelated commands.

3. Final Answer:

   deno fmt -> Option A

4. Quick Check:

   Basic command to format = deno fmt [OK]

Hint: Use just 'deno fmt' to format all files quickly [OK]

Common Mistakes:

• Adding unnecessary flags like run or install
• Using --check when wanting to format files
• Confusing fmt with other Deno commands

3. Given this unformatted TypeScript code in example.ts:

function greet ( name:string ){console.log( "Hello, " +name );}

What will be the output in example.ts after running deno fmt?

medium

A. function greet ( name:string ){console.log( "Hello, " +name );}

B. function greet(name: string) {
console.log("Hello, " + name);
}

C. function greet(name:string){console.log("Hello,"+name);}

D. function greet(name: string) {console.log("Hello," + name);}

Solution

1. Step 1: Understand what deno fmt does to code style

   deno fmt adds spaces after commas, spaces around operators, and proper indentation and line breaks for readability.

2. Step 2: Compare options with expected formatting

   function greet(name: string) { console.log("Hello, " + name); } shows proper spacing after parameters, braces on new lines, and indentation inside the function, matching deno fmt style.

3. Final Answer:

   function greet(name: string) { console.log("Hello, " + name); } -> Option B

4. Quick Check:

   deno fmt adds spaces and indentation [OK]

Hint: Look for spaces after colons and proper indentation [OK]

Common Mistakes:

• Ignoring spaces after colons and commas
• Not indenting inside function blocks
• Keeping all code on one line

4. You run deno fmt --check on your project and get an error saying some files are not formatted. What should you do to fix this?

medium

A. Run deno fmt without flags to format the files automatically

B. Ignore the error because it does not affect code execution

C. Delete the files that are not formatted

D. Run deno run to fix formatting issues

Solution

1. Step 1: Understand what deno fmt --check does

   This command checks if files are formatted but does not change them.

2. Step 2: Fix formatting issues

   To fix formatting, run deno fmt without flags to automatically format all files.

3. Final Answer:

   Run deno fmt without flags to format the files automatically -> Option A

4. Quick Check:

   Use deno fmt to fix formatting [OK]

Hint: Use deno fmt (no flags) to fix formatting errors [OK]

Common Mistakes:

• Ignoring formatting errors thinking they don't matter
• Trying to fix formatting by running code
• Deleting files instead of formatting

5. You want to ensure your project code is always formatted before committing to Git. Which command can you add to your Git pre-commit hook to automatically format all files using Deno?

hard

A. deno run

B. deno install

C. deno lint

D. deno fmt

Solution

1. Step 1: Identify the command that formats code automatically

   deno fmt formats all supported files, making it ideal for pre-commit hooks to keep code clean.

2. Step 2: Understand other commands' purposes

   deno run executes scripts, deno lint checks code style but does not fix formatting, and deno install installs scripts.

3. Final Answer:

   deno fmt -> Option D

4. Quick Check:

   Pre-commit formatting uses deno fmt [OK]

Hint: Use deno fmt in pre-commit hooks to auto-format code [OK]

Common Mistakes:

• Using deno run or deno lint instead of fmt
• Thinking lint fixes formatting automatically
• Not automating formatting before commits