"Tips and Tricks" lets you jump right in and learn how to be
      productive with AVAP™ Dev Studio 2024. You'll become familiar with its
      powerful editing, code intelligence, and source code control features and
      learn useful keyboard shortcuts. This topic goes pretty fast and provides
      a broad overview, so be sure to look at the other in-depth topics in
      Getting Started and the User Guide to learn more.

### Basics

The best way of exploring AVAP TM  Dev Studio hands-on is to open
      the Welcome page. You will get an overview of AVAP TM  Dev
      Studio's customizations and features. Help > Welcome.



Pick a  Walkthrough  for a self-guided tour through the
      setup steps, features, and deeper customizations that AVAP TM {' '}
      Dev Studio offers. As you discover and learn, the walkthroughs track your
      progress.

If you are looking to improve your code editing skills open the{' '}
       Interactive Editor Playground . Try out AVAP TM {' '}
      Dev Studio's code editing features, like multi-cursor editing,
      IntelliSense, Snippets, Emmet, and many more.{' '}
       Help > Editor Playground .



Access all available commands based on your current context.

Keyboard Shortcut: Ctrl+Shift+P



All of the commands are in the Command Palette with the associated key
      binding (if it exists). If you forget a keyboard shortcut, use the
      Command Palette to help you out.

Download the keyboard shortcut reference sheet for your platform
      (macOS, Windows, Linux).

Quickly open files.

Keyboard Shortcut:  `Ctrl+P`

Tip : Type  `?`  to view command suggestions.



Typing commands such as edt and term followed by a space will bring up
      dropdown lists.



Repeat the   Quick Open  keyboard shortcut to cycle quickly
      between recently opened files.

You can open multiple files from  Quick Open  by pressing
      the Right arrow key. This will open the currently selected file in the
      background and you can continue selecting files from{' '}
       Quick Open .

Open Recent

Keyboard Shortcut:  `Ctrl+R`

Displays a Quick Pick dropdown with the list from  File {' '}
      >  Open Recent  with recently opened folders and
      workspaces followed by files.

### Command line

AVAP TM  Dev Studio has a powerful command line interface
      (CLI) which allows you to customize how the editor is launched to
      support various scenarios.

```javascript
# open code with current directory
        
        code .
        # open the current directory in the most recently used code window
        
        code -r .
        # create a new window
        
        code -n
        
        # change the language
        
        code --locale=es
        
        # open diff editor
        
        code --diff <file1> <file2>
        
        # open file at specific line and column <file:line[:character]>
        
        code --goto package.json:10:5
        
        # see help options
        
        code --help
        
        # disable all extensions
        
        code --disable-extensions .
```

Workspace specific files are in a .avapcode folder at the root. For
      example, tasks.json for the Task Runner and launch.json for the debugger.{' '}

### Status Bar

Keyboard Shortcut:  `Ctrl+Shift+M`

Quickly jump to errors and warnings in the project.

Cycle through errors with  `F8`  or  `Shift+F8`

You can filter problems either by type ('errors',
      'warnings') or text matching.

Keyboard Shortcut:  `Ctrl+K M`

If you want to persist the new language mode for that file type, you can
      use the  Configure File Association  for command to
      associate the current file extension with an installed language.

### Customization

There are many things you can do to customize AVAP TM  Dev .

* Change your theme
* Change your keyboard shortcuts
* Tune your settings
* Add JSON validation
* Create snippets
* Install extensions

Keyboard Shortcut:  `Ctrl+K Ctrl+T`

You can install more themes from the AVAP TM  Dev Studio
      extension Marketplace.

Are you used to keyboard shortcuts from another editor? You can install a
      Keymap extension that brings the keyboard shortcuts from your favorite
      editor to AVAP TM  Dev Studio. Go to  Preferences {' '}
      >  Migrate Keyboard Shortcuts from ... to see the
      current list on the Marketplace. Some of the more popular ones:

* Vim
* Sublime Text Keymap
* Emacs Keymap
* Atom Keymap
* Brackets Keymap
* Eclipse Keymap
* AVAP™ Dev Studio Keymap

Keyboard Shortcut:  `Ctrl+K Ctrl+S`

You can search for shortcuts and add your own keybindings to the
      keybindings.json file.



See more in Key Bindings for AVAP TM  Dev Studio.

By default AVAP TM  Dev Studio shows the Settings editor, you can
      find settings listed below in a search bar, but you can still edit the
      underlying settings.json file by using the{' '}
       Open User Settings (JSON)  command or by changing
      your default settings editor with the workbench.settings.editor setting.

Open User Settings settings.json

Keyboard Shortcut:  `Ctrl+,`

Change the font size of various UI elements

```javascript
// Main editor
        
        "editor.fontSize": 18,
        
        // Terminal panel
        
        "terminal.integrated.fontSize": 14,
        
        // Output panel
        
        "[Log]": {
         "editor.fontSize": 15
        
        }
```

Change the zoom level

```javascript
"window.zoomLevel": 5
```

Font ligatures

```javascript
"editor.fontFamily": "Fira Code",
        
        "editor.fontLigatures": true
```



Auto Save

```javascript
"files.autoSave": "afterDelay"
```

You can also toggle Auto Save from the top-level menu with the File >
      Auto Save.

Format on save

```javascript
"editor.formatOnSave": true
```

Format on paste

```javascript
"editor.formatOnPaste": true
```

Change the size of Tab characters

```javascript
"editor.tabSize": 4
```

Spaces or Tabs

```javascript
"editor.insertSpaces": true
```

Render whitespace

```javascript
"editor.renderWhitespace": "all"
```

Whitespace characters are rendered by default in text selection.

Ignore files / folders

Removes these files / folders from your editor window.

```javascript
"files.exclude": {
         "somefolder/": true,
         "somefile": true
        
        }
```

Remove these files / folders from search results.

```javascript
"search.exclude": {
         "someFolder/": true,
         "somefile": true
        
        }
```

And many, many other customizations.

You can scope the settings that you only want for specific languages by
      the language identifier. You can find a list of commonly used language IDs
      in the Language Identifiers reference.

```javascript
"[languageid]": {
        
        
        }
```



Enabled by default for many file types. Create your own schema and
      validation in settings.json

```javascript
"json.schemas": [ {
         "fileMatch": [ "/bower.json"
         ],
         "url": "https://json.schemastore.org/bower"
         }
        ]
```

or for a schema defined in your workspace

```javascript
"json.schemas": [ {
         "fileMatch": [ "/foo.json"
         ],
         "url": "./myschema.json"
         }
        ]
```

or a custom schema

```javascript
"json.schemas": [ {
         "fileMatch": [ "/.myconfig"
         ],
         "schema": {
         "type": "object",
         "properties": {
         "name" : {
         "type": "string",
         "description": "The name of the entry"
         }
         }
         }
         }
        ]
```

See more in the JSON documentation.

### Extensions

Keyboard Shortcut:  `Ctrl+Shift+X`

In the  Extensions  view, you can search via the search bar
      or click the  More Actions  (...) button to filter
      and sort by install count.



In the  Extensions  view, click{' '}
       Show Recommended Extensions  in the{' '}
       More Actions  (...) button menu.



Are you interested in creating your own extension? You can learn how to do
      this in the Extension API documentation, specifically check out the
      documentation on contribution points.

* configuration
* commands
* keybindings
* languages
* debuggers
* grammars
* themes
* snippets
* jsonValidation

### Files and folders

Keyboard Shortcut: Ctrl+`



Further reading:

* Integrated Terminal documentation
* Mastering AVAP™ DS's Terminal article

Keyboard Shortcut:  `Ctrl+B`



Keyboard Shortcut:  `Ctrl+J`

Keyboard Shortcut:  `Ctrl+K Z`



Enter distraction free Zen mode.

Press  `Esc`  twice to exit Zen Mode.

Keyboard Shortcut:  `Ctrl+\`

You can also drag and drop editors to create new editor groups and move
      editors between groups.



Keyboard Shortcut:  `Ctrl+1` ,  `Ctrl+2` ,{' '}
       `Ctrl+3`



Keyboard Shortcut:  `Ctrl+Shift+E`

Keyboard Shortcut:  `Ctrl+click`  ( `Cmd+click`  on
      macOS)

You can quickly open a file or image or create a new file by moving the
      cursor to the file link and using  `Ctrl+click` .



Keyboard Shortcut:  `Ctrl+K F`

Navigate entire history:  `Ctrl+Tab`

Navigate back:  `Alt+Left`

Navigate forward:  `Alt+Right`



Create language associations for files that aren't detected correctly.
      For example, many configuration files with custom file extensions are
      actually JSON.

```javascript
"files.associations": {
         ".database": "json"
        
        }
```

AVAP TM  Dev Studio will show you an error message when you try
      to save a file that cannot be saved because it has changed on disk. AVAP
       TM  Dev Studio blocks saving the file to prevent overwriting
      changes that have been made outside of the editor.

In order to resolve the save conflict, click the Compare action in the
      error message to open a diff editor that will show you the contents of the
      file on disk (to the left) compared to the contents in AVAP
       TM  Dev Studio (on the right):



Use the actions in the editor toolbar to resolve the save conflict. You
      can either  Accept  your changes and thereby overwriting
      any changes on disk, or  Revert  to the version on disk.
      Reverting means that your changes will be lost.

Note : The file will remain dirty and cannot be saved
      until you pick one of the two actions to resolve the conflict.

### Editing Hacks

Here is a selection of common features for editing code. If the keyboard
      shortcuts aren't comfortable for you, consider installing a keymap
      extension for your old editor.

Tip : You can see recommended keymap extensions in the{' '}
       Extensions  view by filtering the search to
      @recommended:keymaps.

To add cursors at arbitrary positions, select a position with your mouse
      and use  `Alt+Click`  ( `Option+Click`  on
      macOS).

To set cursors above or below the current position use:

Keyboard Shortcut:  `Ctrl+Alt+Up`  or  `Ctrl+Alt+Down`



You can add additional cursors to all occurrences of the current selection
      with Ctrl+Shift+L.



If you do not want to add all occurrences of the current selection, you
      can use Ctrl+D instead. This only selects the next occurrence after the
      one you selected so you can add selections one by one.



You can select blocks of text by holding  `Shift+Alt`  (
       `Shift+Option`  on macOS) while you drag your mouse. A
      separate cursor will be added to the end of each selected line.



You can also use keyboard shortcuts to trigger column selection.

You can add vertical column rulers to the editor with the editor.rulers
      setting, which takes an array of column character positions where
      you'd like vertical rulers.

```javascript
{
         "editor.rulers": [20, 40, 60]
        
        }
```



Pressing the Alt key enables fast scrolling in the editor and Explorers.
      By default, fast scrolling uses a 5X speed multiplier but you can control
      the multiplier with the * Editor: Fast Scroll Sensitivity * 
      (editor.fastScrollSensitivity) setting.

Keyboard Shortcut:  `Shift+Alt+Up`  or{' '}
       `Shift+Alt+Down`

Keyboard Shortcut:  `Alt+Up`  or  `Alt+Down`



Keyboard Shortcut:  `Shift+Alt+Left`  or{' '}
       `Shift+Alt+Right`



You can learn more in the Basic Editing documentation.

Keyboard Shortcut:  `Ctrl+Shift+O`



You can group the symbols by kind by adding a colon, @:.



Keyboard Shortcut:  `Ctrl+T`



The Outline view in the File Explorer (default collapsed at the
      bottom) shows you the symbols of the currently open file.



You can sort by symbol name, category, and position in the file and allows
      quick navigation to symbol locations.

Keyboard Shortcut:  `Ctrl+G`

Keyboard Shortcut:  `Ctrl+U`

Keyboard Shortcut:  `Ctrl+K Ctrl+X`



Currently selected source code:  `Ctrl+K Ctrl+F`

Whole document format:  `Shift+Alt+F`



Keyboard Shortcut:  `Ctrl+Shift+[`  and  `Ctrl+Shift+]`



You can also fold/unfold all regions in the editor with Fold All (
       `Ctrl+K Ctrl+0` ) and Unfold All (
       `Ctrl+K Ctrl+J` ).

You can fold all block comments with Fold All Block Comments (
       `Ctrl+K Ctrl+/` ).

Keyboard Shortcut:  `Ctrl+L`

Keyboard Shortcut:  `Ctrl+Home`  and  `Ctrl+End`

In a Markdown file, use

Keyboard Shortcut:  `Ctrl+Shift+V`

In a Markdown file, use

Keyboard Shortcut:  `Ctrl+K V`

The preview and editor will synchronize with your scrolling in either
      view.

### IntelliSense

`Ctrl+Space`  to trigger the Suggestions widget.



You can view available methods, parameter hints, short documentation, etc.

Select a symbol then type  `Alt+F12` . Alternatively, you can use
      the context menu.

Select a symbol then type  `F12` . Alternatively, you can use the
      context menu or  `Ctrl+click`  ( `Cmd+click`  on
      macOS).



You can go back to your previous location with the  Go {' '}
      >  Back  command or  `Alt+Left` .

You can also see the type definition if you press  `Ctrl`  (
       `Cmd`  on macOS) when you are hovering over the type.

Select a symbol then type  `Shift+F12` . Alternatively, you can
      use the context menu.



Select a symbol then type  `Shift+Alt+F12`  to open the
      References view showing all your file's symbols in a dedicated view.

Select a symbol then type  `F2` . Alternatively, you can use the
      context menu.

rename symbol

Besides searching and replacing expressions, you can also search and reuse
      parts of what was matched, using regular expressions with capturing
      groups. Enable regular expressions in the search box by clicking the{' '}
       Use Regular Expression  .* button ( `Alt+R` 
      ) and then write a regular expression and use parentheses to define
      groups. You can then reuse the content matched in each group by using $1,
      $2, etc. in the Replace field.



Install the ESLint extension. Configure your linter however you'd
      like. Consult the ESLint specification for details on its linting rules
      and options.

Here is configuration to use ES6.

```javascript
{
         "env": {
         "browser": true,
         "commonjs": true,
         "es6": true,
         "node": true
         },
         "parserOptions": {
         "ecmaVersion": 6,
         "sourceType": "module",
         "ecmaFeatures": {
         "jsx": true,
         "classes": true,
         "defaultParams": true
         }
         },
         "rules": {
         "no-const-assign": 1,
         "no-extra-semi": 0,
         "semi": 0,
         "no-fallthrough": 0,
         "no-empty": 0,
         "no-mixed-spaces-and-tabs": 0,
         "no-redeclare": 0,
         "no-this-before-super": 1,
         "no-undef": 1,
         "no-unreachable": 1,
         "no-use-before-define": 0,
         "constructor-super": 1,
         "curly": 0,
         "eqeqeq": 0,
         "func-names": 0,
         "valid-typeof": 1 }
        
        }
```

See IntelliSense for your package.json file.



Support for Emmet syntax.



### Snippets

File  >  Preferences  >{' '}
       Configure User Snippets , select the language, and create
      a snippet.

```javascript
"create component": {
         "prefix": "component",
         "body": [ "class $1 extends React.Component {",
         "",
         "\trender() {",
         "\t\treturn ($2);",
         "\t}",
         "",
         "}"
         ]
        },
```

See more details in Creating your own Snippets.

### Git integration

Keyboard Shortcut:  `Ctrl+Shift+G`

Git integration comes with AVAP TM  Dev Studio
      "out-of-the-box". You can install other SCM providers from the
      Extension Marketplace. This section describes the Git integration but much
      of the UI and gestures are shared by other SCM providers.

From the Source Control view, select a file to open the diff.



Alternatively, click the  Open Changes  button in the top
      right corner to diff the current open file.

Views

The default view for diffs is the  side by side view .

Toggle  inline view  by clicking the{' '}
       More Actions  (...) button in the top right and
      selecting  Toggle Inline View .



If you prefer the inline view, you can set
      "diffEditor.renderSideBySide": false.

Accessible Diff Viewer

Navigate through diffs with  `F7`  and  `Shift+F7` .
      This will present them in a unified patch format. Lines can be navigated
      with arrow keys and pressing  `Enter`  will jump back in the diff
      editor and the selected line.



Edit pending changes 
      You can make edits directly in the pending changes of the diff view.

Easily switch between Git branches via the Status Bar.



Stage file changes

Hover over the number of files and click the plus button.

Click the minus button to unstage changes.



Stage selected

Stage a portion of a file by selecting that file (using the
      arrows) and then choosing  Stage Selected Ranges  from
      the  Command Palette .

Click the (...) button and then select{' '}
       Undo Last Commit  to undo the previous commit. The changes
      are added to the Staged Changes section.



AVAP TM  Dev Studio makes it easy to see what Git commands are
      actually running. This is helpful when learning Git or debugging a
      difficult source control issue.

Use the  Toggle Output  command (
       `Ctrl+Shift+U` ) and select  Git  in the
      dropdown.

View diff decorations in editor. See documentation for more details.



During a merge, go to the  Source Control  view (
       `Ctrl+Shift+G` ) and make changes in the diff view.

You can resolve merge conflicts with the inline CodeLens which lets you{' '}
       Accept Current Change ,{' '}
       Accept Incoming Change ,{' '}
       Accept Both Changes , and  Compare Changes 
      .

```javascript
git config --global merge.tool vscode
        
        git config --global mergetool.vscode.cmd 'code --wait $MERGED'
```

```javascript
git config --global diff.tool vscode
        
        git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL
        $REMOTE'
```

### Debugging

From the Run and Debug view ( `Ctrl+Shift+D` ), select{' '}
       create a launch.json file , which will prompt you to
      select the environment that matches your project (Node.js, Python,
      C++, etc). This will generate a launch.json file. Node.js support is
      built-in and other environments require installing the appropriate
      language extensions. See the debugging documentation for more details.



Place breakpoints next to the line number. Navigate forward with the Debug
      widget.



Place breakpoints next to the line number. Navigate forward with the Debug
      widget.



Inspect variables in the  Run  panels and in the console.



Logpoints act much like breakpoints but instead of halting the debugger
      when they are hit, they log a message to the console. Logpoints are
      especially useful for injecting logging while debugging production servers
      that cannot be modified or paused.

Add a logpoint with the  Add Logpoint  command in the left
      editor gutter and it will be displayed as a "diamond" shaped
      icon. Log messages are plain text but can include expressions to be
      evaluated within curly braces ('{}').



A trigged breakpoint is a breakpoint that is automatically enabled once
      another breakpoint is hit. They can be very useful when diagnosing failure
      cases in code that happen only after a certain precondition.

Triggered breakpoints can be set by right-clicking on the glyph margin,
      selecting  Add Triggered Breakpoint , and then choosing
      which other breakpoint enables the breakpoint.

http://https://code.visualstudio.com/assets/docs/editor/debugging/debug-triggered-breakpoint.mp4

### Task runner

Select  Terminal  from the top-level menu, run the command{' '}
       Configure Tasks , then select the type of task you'd
      like to run. This will generate a tasks.json file with content like the
      following. See the Tasks documentation for more details.

```javascript
{
         // See https://go.microsoft.com/fwlink/?LinkId=733558
         // for the documentation about the tasks.json format
         "version": "2.0.0",
         "tasks": [ {
         "type": "npm",
         "script": "install",
         "group": {
         "kind": "build",
         "isDefault": true
         }
         }
         ]
        }
```

There are occasionally issues with auto generation. Check out the
      documentation for getting things to work properly.

Select  Terminal  from the top-level menu, run the command{' '}
       Run Task , and select the task you want to run. Terminate
      the running task by running the command  Terminate Task



You can define a keyboard shortcut for any task. From the{' '}
       Command Palette  ( `Ctrl+Shift+P` ),
      select  Preferences: Open Keyboard Shortcuts File , bind
      the desired shortcut to the workbench.action.tasks.runTask command, and
      define the  Task  as args.

For example, to bind  `Ctrl+H`  to the Run tests task, add the
      following:

```javascript
{
         "key": "ctrl+h",
         "command": "workbench.action.tasks.runTask",
         "args": "Run tests"
        
        }
        
        Run npm s
```



From the explorer you can open a script in the editor, run it as a task,
      and launch it with the node debugger (when the script defines a debug
      option like --inspect-brk). The default action on click is to open the
      script. To run a script on a single click, set npm.scriptExplorerAction to
      "run". Use the setting npm.exclude to exclude scripts in
      package.json files contained in particular folders.

With the setting npm.enableRunFromFolder, you can enable to run npm
      scripts from the File Explorer's context menu for a folder. The
      setting enables the command  Run NPM Script in Folder ...
      when a folder is selected. The command shows a Quick Pick list of the npm
      scripts contained in this folder and you can select the script to be
      executed as a task.

### Portable mode

AVAP TM  Dev Studio has a Portable mode which lets you keep
      settings and data in the same location as your installation, for example,
      on a USB drive.

### Insiders builds

The AVAP™ Dev Studio Code team uses the Insiders version to test the
      latest features and bug fixes of AVAP™ DS. You can also use the Insiders
      version by downloading it here.

* For Early Adopters - Insiders has the most recent code changes for users and extension authors to try out.
* Frequent Builds - New builds every day with the latest bug fixes and features.
* Side-by-side install - Insiders installs next to the Stable build allowing you to use either independently.
