VS Code code编辑 and format

1. intellisense and 自动补全

VS Codeproviding强 big intellisense and 自动补全functions, helping您更 fast 地writingcode, reducing拼写error:

1.1 basicintellisense

VS Code会根据 on under 文自动显示intellisense:

• variable名补全
• function名补全
• property名补全
• method名补全
• 关键字补全
• importmodule补全

1.2 触发intellisense

intellisense会 in 您输入时自动显示, 您也可以手动触发:

• 按 Ctrl+Space (Windows/Linux) or Cmd+Space (macOS) 手动触发intellisense
• 按 Ctrl+Shift+Space (Windows/Linux) or Cmd+Shift+Space (macOS) 触发parameter提示

1.3 intellisense设置

您可以 in 设置in调整intellisense behavior:

• Editor: Quick Suggestions: 控制 is 否 in specificcircumstances under 显示intellisense
• Editor: Suggestion Delay: 设置intellisense显示 latency时间
• Editor: Accept Suggestion On Enter: 控制 is 否按Enter键接受intellisense
• Editor: Suggestion Previews: 控制 is 否显示intellisense 预览

2. code片段 (Snippets)

code片段 is 预定义 code模板, 可以through简 short before 缀 fast 速插入常用codestructure.

2.1 using in 置code片段

VS Code in 置了 many 种language code片段:

JavaScriptexample

• 输入 for 然 after 按 Tab: unfold for for循环
• 输入 forof 然 after 按 Tab: unfold for for...of循环
• 输入 if 然 after 按 Tab: unfold for if语句
• 输入 func 然 after 按 Tab: unfold for function定义
• 输入 class 然 after 按 Tab: unfold for class定义

HTMLexample

• 输入 ! 然 after 按 Tab: unfold for HTML5documentation模板
• 输入 div 然 after 按 Tab: unfold for divtag
• 输入 link 然 after 按 Tab: unfold for linktag
• 输入 script 然 after 按 Tab: unfold for scripttag

2.2 查看可用code片段

您可以through以 under 方式查看可用 code片段:

1. 按 Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) 打开commands面板
2. 输入 Insert Snippet 并选择
3. 选择您想要 code片段

2.3 creation自定义code片段

您可以creation自己 code片段:

1. 按 Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) 打开commands面板
2. 输入 configuration User Snippets 并选择
3. 选择要 for 哪种languagecreationcode片段, or 选择"New Global Snippets file"creation全局code片段
4. in 打开 JSONfileinwritingcode片段

code片段example

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log($1);",
        "$2"
    ],
    "description": "Log output to console"
}

code片段语法

• prefix: 触发code片段 before 缀
• body: code片段 in 容, usingarray表示 many 行
• $1, $2, ...: 光标位置, 按Tab键可以 in 这些位置之间切换
• ${1:default}: 带 has 默认值 光标位置
• ${2|option1,option2|}: 带 has 选项 光标位置
• description: code片段 describes

3. codeformat

codeformat可以自动调整code indent, 空格, 换行etc., 保持code风格一致.

3.1 手动format

您可以through以 under 方式手动formatcode:

• 按 Shift+Alt+F (Windows/Linux) or Shift+Option+F (macOS) format整个file
• 选择部分code, 然 after 按 Shift+Alt+F (Windows/Linux) or Shift+Option+F (macOS) format选in部分
• in commands面板in输入 Format Document or Format Selection

3.2 自动format

您可以configurationVS Code in specificcircumstances under 自动formatcode:

• Format On Save: 保存file时自动format
• Format On Type: 输入时自动format当 before 行
• Format On Paste: pastecode时自动format

3.3 configurationformat选项

您可以 in 设置inconfigurationformat选项:

• Editor: Format On Save: 启用保存时自动format
• Editor: Format On Type: 启用输入时自动format
• Editor: Format On Paste: 启用paste时自动format
• Editor: Default Formatter: 设置默认format器

3.4 usingPrettierforformat

Prettier is a 流行 codeformattool, 可以统一不同language code风格:

1. installationPrettierscale: in scale市场in搜索"Prettier - Code formatter"
2. 将Prettier设置 for 默认format器:
   • 打开设置
   • 搜索"Default Formatter"
   • 选择"esbenp.prettier-vscode"
3. configurationPrettier选项:
   • creation .prettierrc fileconfigurationPrettier
   • or in VS Code设置in搜索"Prettier"forconfiguration

Prettierconfigurationexample (.prettierrc)

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "avoid",
    "rangeStart": 0,
    "rangeEnd": Infinity,
    "requirePragma": false,
    "insertPragma": false,
    "proseWrap": "preserve",
    "htmlWhitespaceSensitivity": "css",
    "endOfLine": "lf"
}

4. codefold

codefold可以隐藏 or 显示code块, helping您专注于当 before 正 in 编辑 code.

4.1 手动fold/unfold

• 点击编辑器 left 侧 foldgraph标 (-/+)
• 按 Ctrl+Shift+[ (Windows/Linux) or Cmd+Shift+[ (macOS) fold当 before code块
• 按 Ctrl+Shift+] (Windows/Linux) or Cmd+Shift+] (macOS) unfold当 before code块
• 按 Ctrl+K Ctrl+0 (Windows/Linux) or Cmd+K Cmd+0 (macOS) fold所 has code块
• 按 Ctrl+K Ctrl+J (Windows/Linux) or Cmd+K Cmd+J (macOS) unfold所 has code块
• 按 Ctrl+K Ctrl+1-9 (Windows/Linux) or Cmd+K Cmd+1-9 (macOS) fold to 指定级别

4.2 codefold设置

• Editor: Folding: 启用 or 禁用codefold
• Editor: Folding Strategy: 设置fold策略 (indentation or marker)
• Editor: Show Folding Controls: 控制when显示fold控件

5. coderefactor

VS Codeproviding了一些coderefactorfunctions, helping您更security地modifycode.

5.1 rename符号

rename符号可以同时update所 has 引用:

• 将光标放 in 要rename 符号 on
• 按 F2, or right 键点击选择"rename符号"
• 输入 new 名称, 然 after 按Enter键

5.2 提取refactor

提取refactor可以将code提取 for variable, function or 常量:

• 选择要提取 code
• 按 Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (macOS) , or right 键点击选择"refactor..."
• 选择要执行 refactorclass型 (提取variable, 提取functionetc.)
• 输入名称, 然 after 按Enter键

5.3 quick fix

当codein has error or warning时, VS Code会providingquick fix建议:

• 将鼠标悬停 in error or warning on
• 点击 small 灯泡graph标, or 按 Ctrl+. (Windows/Linux) or Cmd+. (macOS)
• 选择合适 修复solutions

6. code导航

VS Codeproviding了 many 种code导航functions, helping您 fast 速定位 and 浏览code.

6.1 跳转 to 定义

• 将光标放 in 符号 on , 按 F12
• or Ctrl+Click (Windows/Linux) or Cmd+Click (macOS)

6.2 查看定义

in 不离开当 before 位置 circumstances under 查看符号 定义:

• 将光标放 in 符号 on , 按 Alt+F12 (Windows/Linux) or Option+F12 (macOS)

6.3 find所 has 引用

• 将光标放 in 符号 on , 按 Shift+F12

6.4 查看符号list

• 按 Ctrl+Shift+O (Windows/Linux) or Cmd+Shift+O (macOS) 查看当 before file 符号
• 按 Ctrl+T (Windows/Linux) or Cmd+T (macOS) 查看所 has file 符号

7. many file编辑

VS Codesupport同时编辑 many 个file, improving工作efficiency.

7.1 拆分编辑器

• 按 Ctrl+\ (Windows/Linux) or Cmd+\ (macOS) 拆分编辑器
• using Ctrl+1/2/3 (Windows/Linux) or Cmd+1/2/3 (macOS) 切换编辑器组
• 拖拽tag页 to 编辑器edge界for拆分

7.2 并排编辑

• using垂直拆分同时查看 and 编辑相关file
• 例such as, 同时编辑HTML and CSSfile
• 同时编辑JavaScriptfile and testfile

8. 练习