WritingAndFormattingCode.md

Writing and Formatting Code

1. Snippets
   1. What we’ll cover
      1. How code snippets are manage by VS Code
      2. How to create and use custom snippets
   2. Resources
      1. VS Code Docs Snippets
   3. Pro Tips
      1. Create snippets for the code that you write often, using tab stops to dynamically fill in segments.
2. Working with Markdown
   1. What we’ll cover
      1. How to write and preview Markdown in VS Code
      2. Markdown extension with extra shortcuts for working with Markdown
   2. Resources
      1. VS Code Docs Markdown
      2. ReadMe Template
      3. Markdown Worksheet
      4. Markdown lint
      5. Markdown shortcuts
      6. Markdown TOC
   3. Pro Tips
      1. The best Github repositories contain a detailed ReadMe.md file. Use VS Code to create your ReadMe files along with development.
      2. ctrlCmd+ Shift + V – open markdown preview
      3. Cmd + Shift + K V | Ctrl + K + V – open markdown preview side by side
3. Organizing Code
   1. What we’ll cover
      1. Recognizing and removing unused variables
      2. Organizing import statements
      3. Refactoring code to a new file
      4. Using the highlighted indent guide
      5. Code folding
      6. Renaming variables
   2. Pro Tips
      1. Shift + Alt + F – format document
      2. ctrlCmd + . – to show available code actions
      3. Command Palette -> Organize Imports – organize imports
      4. ctrlCmd + / – toggle comment line
      5. ctrlCmd + Option [ - minimize coding folding region
      6. ctrlCmd + Option ] - maximize coding folding region
      7. ctrlCmd + K ctrlCmd + 0 – minimize all code folding regions
      8. ctrlCmd + K ctrlCmd + J – maximize all code folding regions
4. Creating Standard Editor Settings with Editor Config
   1. What we’ll cover
      1. How editor config files can be used to establish standard editor settings across multiple editors
      2. The Editor Config for VS Code extension for VS Code to recognize and respect editor config files
      3. Creating an editor config file to override VS Code settings and automatically format code on save
   2. Resources
      1. Editor Config for VS Code extension
      2. Editor Config
   3. Pro Tips
      1. Tabs vs Spaces (and so on and so on)… just pick what works for you and your team
5. Formatting Code with Prettier
   1. What we’ll cover
      1. How to install Prettier extension for VS Code
      2. Creating a Prettier config or customizing Prettier settings for formatting code
      3. Manually and automatically format code
   2. Resources
      1. Prettier Code Formatter extension
   3. Pro Tips
      1. Find a configuration that works you and stick with it
6. Linting and Formatting JavaScript Code with ESLint
   1. What we’ll cover
      1. How to install the ESLint package
      2. How to create an ESLint configuration file and/or the install and customize ESLint extension
      3. Manually and automatically format code
   2. Resources
      1. ESLint extension
      2. ESLint getting started
   3. Pro Tips
      1. Find a configuration that works you and stick with it