VS Code开发技巧集锦【转】

  1. 云栖社区>
  2. 博客>
  3. 正文

VS Code开发技巧集锦【转】

sky-heaven 2017-05-17 14:25:00 浏览656
展开阅读全文

转自:http://blog.csdn.net/tiantangyouzui/article/details/52163175

  1. 入门
  2. 自定义
  3. 扩展
  4. 文件/文件夹管理
  5. 编辑技巧
  6. 智能感应功能
  7. 代码片段
  8. Git集成
  9. 调试
  10. 任务运行

下文提及的快捷键可能与机器最新设置不符,请参考官方快捷键说明。

1.入门


打开命令面板

轻松找出VS Code所有可用命令。

Mac:cmd+shift+p or f1

Windows / Linuxctrl+shift+p or f1

快捷键偏好设置


所有命令(及其快捷键)均显示在命令面板中。如果忘记了如何操作,可随时查看。

快速打开


快速打开文件,运行命令(见下文)

Mac: cmd+p

Windows / Linux: ctrl+p

键入“?”获取帮助。

将命令复制粘贴到快速打开中


键入cmd+p ,然后粘贴想要运行的命令,浏览扩展(插件)市场时尤为适用。

命令行参数


  • Linux: Follow instructions  Linux指南和Windows指南参考: Mac指南见下文:

     

    打开命令面板(F1)→键入“shell command”→回车键执行“Shell Command: Install ‘code’ command in PATH”。

    # create a new window
    code -n
    
    # change the language
    code --locale=es
    
    # open diff editor
    code --diff <file1> <file2>
    
    # see help options
    code --help

    .vscode文件夹


    工作区文件夹在 .vscode中,比如任务运行是tasks.json,检查漏洞是launch.json。

    状态栏效果


    • 错误和警告

    Mac: shift+cmd+m

    Windows / Linux: ctrl+shift+m

    快速跳转到错误和警告。

    f8shift+f8,循环错误检查。

    • 更新扩展

    更新扩展提示会出现在左下角状态栏。

    • 更改语言模式

    Mac: cmd+k m

    Windows / Linux: ctrl+k m

    2. 个人设置


    这一部分个人发挥的空间很大,完整信息请参考: 设置编辑器

    打开settings.json。

    Mac: cmd+,

    Windows / Linux: File -> Preferences -> User Settings

    更改字体大小:”editor.fontSize”: 18

    更改标签大小:”editor.tabSize”: 4

    空格/标签:”editor.insertSpaces”: true

    忽略文件/文件夹

    清除编辑窗口中的文件/文件夹。

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

    清除搜索结果中的文件/文件夹。

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

    更多内容请参考: 预览主题


    JSON验证


    很多文件默认设置了json验证,可以在settings.json中创建自己的验证模式:

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

    对于工作区中的模式:

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

    自定义模式:

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

    更多内容请参考: 3.扩展


    贡献点


    参考:

  • 配置
  • 命令
  • 快捷键
  • 语言
  • 调试器
  • 语法
  • 主题
  • 代码片段
  • json验证

找到扩展


  • 官方VS Code市场;
  • 搜索产品(见下文);
  • 浏览扩展推荐(见下文);
  1. 社区扩展产品,如 安装扩展

     


    Mac:cmd+shift+p

    Windows / Linux:ctrl+shift+p

    然后键入“ext install”。选择合适的扩展,再按回车键。

    扩展推荐


    Mac: cmd+shift+p

    Windows / Linux: ctrl+shift+p

    键入“ext”→选择“Show Extension Recommendations”

    卸载扩展

    Mac: cmd+shift+p

    Windows / Linux: ctrl+shift+p

    键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”

    4.文件和文件夹管理

    OS X布局


    使用任务控制,将终端窗口和VS Code放在同一个屏幕上,就得到一个整合的终端啦!

    自动保存


    cmd+,打开settings.json

    "files.autoSave": "afterDelay"

    开启侧边栏


    Mac: cmd+b

    Windows / Linux: ctrl+b

    分割(Side by side)编辑


    Mac: cmd+\ or cmd then click a file from the file browser.

    Windows / Linux: ctrl+\

    Linux: ctrl+2

    编辑器切换

    Mac: cmd+1cmd+2cmd+3

    Windows / Linux: ctrl+1ctrl+2ctrl+3

    切换到资源管理器窗口(explorer window)


    Mac: cmd+shift+e

    Windows / Linux: ctrl+shift+e

    关闭当前文件夹


    Linux: ctrl+k f

    历史


    ctrl+tab来浏览历史

    向后浏览:

    Mac: ctrl+-

    Windows / Linux: alt+left

    向前浏览:

    Mac: ctrl+shift+up

    Windows / Linux: alt+right

    打开文件


    Mac: cmd+e or cmd+p

    Windows / Linux: ctrl+e or ctrl+p

    文件关联


    为无法精确检测的文件设置语言关联(即配置文件):

    "file.associations": {
        ".eslintrc": "json"
    }

    5.编辑技巧

    括号匹配


    更多内容请参考: Mac: cmd+shift+\

    Windows / Linux: ctrl+shift+\

    多游标选择

    更多内容请参考: Mac: opt+cmd+up or opt+cmd+down

    Windows: ctrl+alt+up or ctrl+alt+down

    Linux: alt+shift+up or alt+shift+down

    为当前选择添加游标。

    复制一行


    Mac: opt+shift+up or opt+shift+down

    Windows / Linux(shift+alt+down or shift+alt+up

    缩小/扩大选择


    更多内容请参考: Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right

    Windows / Linux: shift+alt+left or shift+alt+right

    符号查找

    Mac: cmd+shift+o

    Windows / Linux: ctrl+shift+o

    定位特定的一行

    Mac: ctrl+g or cmd+p , :

    Windows / Linux: ctrl+g

    撤销游标位置

    Mac: cmd+u

    Windows / Linux: ctrl+u

    上下移动一行


    Mac: opt+up or opt+down

    Windows / Linux: alt+up or alt+down

    修整行尾空格


    Mac: cmd+shift+x

    Windows / Linux: ctrl+shift+x

    代码格式化


    Mac: opt+shift+f

    Windows / Linux: shift+alt+f

    代码折叠


    Mac: shift+cmd+[ and shift+cmd+]

    Windows / Linux: ctrl+shift+[ and ctrl+shift+]

    选择当前一行

    Mac: cmd+i

    Windows / Linux: ctrl+i

    回到文件开端/末尾


    Mac: cmd+up and cmd+down

    Windows: ctrl+up and ctrl+down

    Linux: ctrl+home and ctrl+end

    打开README预览


    在markdown文件中使用:

    Mac: shift+cmd+v

    Windows / Linux: ctrl+shift+v

    分割(Side by Side)Markdown编辑和预览


    在markdown文件中使用:

    Linux: ctrl+k v

    6.智能感应

    试用ctrl+space来启动建议栏,这一条可以说是最有用的建议了。

    可浏览可用的方法、参数以及简短文档等等。

    预览(peek)


    选择一个符号,键入alt+f12,或者使用快捷菜单。

    转到定义


    选择一个符号,键入f12,或者使用快捷菜单。

    查找所有引用


    选择一个符号,键入shift+f12,或者使用快捷菜单。

    符号重命名


    选择一个符号,键入f2,或者使用快捷菜单。

    jsconfig.json


    JavaScript源文件根上配置jsconfig.json,就可以使用ES6了。

    {
        "compilerOptions": {
            "target": "ES6",
            "module": "commonjs"
        }, "exclude": [
            "npm_modules"
        ]
    }

    .eslintrc.json

    安装http://eslint.org/docs/user-guide/configuring

    以下是使用es6的配置。

    {
        "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
        }
    }

    package.json

    参考package.json文件中的智能感应功能。

    安装typings应用

    安装npm install typings --global # Search for definitions. typings search tape # Find an available definition (by name). typings search --name react # Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`). typings install react --ambient --save

    install会创建一个typings文件夹。VS Code会引用.d.ts文件来启动智能感应功能。

    Emmet语法

    7.代码片段

    创建自定义代码

    File -> Preferences -> User Snippets,选择语言,创建代码片段。

    "create component": {
        "prefix": "component",
        "body": [
            "class $1 extends React.Component {",
            "",
            "   render() {",
            "       return ($2);",
            "   }",
            "",
            "}"
        ]
    },

    更多内容请参考: 8.Git集成

    Git工作流的流畅集成。

    Diffs

    点击Git图标,选择要diff的文件。

    分割(Side by side)

    默认的是分割diff。

    内联视图

    点击下图所示的“more”选项来启动内联视图。

    分支

    通过状态栏可轻松切换分支。

    Staging

    • Stage所有文件

    一次选择多个文件,再点击加号按钮。

    • Stage选择

    Stage文件一部分的方法是:使用箭头选择该文件,然后点击“more”按钮来stage“selected lines”。

    撤销最近一次命令

    查看Git输出

    有时难免需要了解工具的运行状况。有了VS Code,查看正在运行的命令更简单,这对于Git学习或是解决源代码管理问题尤为有帮助。

    Mac: shift+cmd+u

    Windows / Linux: ctrl+shift+u

    运行toggleOutput要下拉选择Git。

    边槽指示器

    查看编辑器中的diff设置。更多内容请参考:

    消除合并冲突

    在合并时点击git图标,在diff view里做更改。

    将VS Code设置为默认合并工具

    git config --global merge.tool code

    9.调试

    配置调试器

    点击F1,选择“Debug: Open Launch.json”,再选择环境,随后产生一个launch.json文件。Node.js等环境可以直接运行,可能需要额外配置其他语言。更多内容请参考:

    断点和逐句通过

    断点应在行数旁边。用调试插件向前浏览。

    数据检查

    检查变量在调试面板和控制台里。

    10.任务运行

    自动检测任务

    按下f1,键入“Configure Task”,然后选择“Configure Task Runner”,会生成一个task.json文件,内容如下。更多内容请参考:{ // See http://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "npm", "isShellCommand": true, "showOutput": "always", "suppressTaskName": true, "tasks": [ { "taskName": "install", "args": ["install"] }, { "taskName": "build", "args": ["run", "build"] } ] }

    自动生成有时会出问题。参考上文的网址来了解正确操作方法。

    在命令面板上运行任务

    点击f1,运行命令“Run Task”,然后选择要运行的任务。运行“Terminate Running Task”来终止运行该命令。


    1. 入门
    2. 自定义
    3. 扩展
    4. 文件/文件夹管理
    5. 编辑技巧
    6. 智能感应功能
    7. 代码片段
    8. Git集成
    9. 调试
    10. 任务运行

    下文提及的快捷键可能与机器最新设置不符,请参考官方快捷键说明。

    1.入门


    打开命令面板

    轻松找出VS Code所有可用命令。

    Mac:cmd+shift+p or f1

    Windows / Linux:ctrl+shift+p or f1

    快捷键偏好设置


    所有命令(及其快捷键)均显示在命令面板中。如果忘记了如何操作,可随时查看。

    快速打开


    快速打开文件,运行命令(见下文)

    Mac: cmd+p

    Windows / Linux: ctrl+p

    键入“?”获取帮助。

    将命令复制粘贴到快速打开中


    键入cmd+p ,然后粘贴想要运行的命令,浏览扩展(插件)市场时尤为适用。

    命令行参数


    • Linux: Follow instructions  Linux指南和Windows指南参考: Mac指南见下文:

       

      打开命令面板(F1)→键入“shell command”→回车键执行“Shell Command: Install ‘code’ command in PATH”。

      # create a new window
      code -n
      
      # change the language
      code --locale=es
      
      # open diff editor
      code --diff <file1> <file2>
      
      # see help options
      code --help

      .vscode文件夹


      工作区文件夹在 .vscode中,比如任务运行是tasks.json,检查漏洞是launch.json。

      状态栏效果


      • 错误和警告

      Mac: shift+cmd+m

      Windows / Linux: ctrl+shift+m

      快速跳转到错误和警告。

      f8shift+f8,循环错误检查。

      • 更新扩展

      更新扩展提示会出现在左下角状态栏。

      • 更改语言模式

      Mac: cmd+k m

      Windows / Linux: ctrl+k m

      2. 个人设置


      这一部分个人发挥的空间很大,完整信息请参考: 设置编辑器

      打开settings.json。

      Mac: cmd+,

      Windows / Linux: File -> Preferences -> User Settings

      更改字体大小:”editor.fontSize”: 18

      更改标签大小:”editor.tabSize”: 4

      空格/标签:”editor.insertSpaces”: true

      忽略文件/文件夹

      清除编辑窗口中的文件/文件夹。

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

      清除搜索结果中的文件/文件夹。

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

      更多内容请参考: 预览主题


      JSON验证


      很多文件默认设置了json验证,可以在settings.json中创建自己的验证模式:

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

      对于工作区中的模式:

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

      自定义模式:

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

      更多内容请参考: 3.扩展


      贡献点


      参考:

    • 配置
    • 命令
    • 快捷键
    • 语言
    • 调试器
    • 语法
    • 主题
    • 代码片段
    • json验证

    找到扩展


  2. 官方VS Code市场;
  3. 搜索产品(见下文);
  4. 浏览扩展推荐(见下文);
    1. 社区扩展产品,如 安装扩展

       


      Mac:cmd+shift+p

      Windows / Linux:ctrl+shift+p

      然后键入“ext install”。选择合适的扩展,再按回车键。

      扩展推荐


      Mac: cmd+shift+p

      Windows / Linux: ctrl+shift+p

      键入“ext”→选择“Show Extension Recommendations”

      卸载扩展

      Mac: cmd+shift+p

      Windows / Linux: ctrl+shift+p

      键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”

      4.文件和文件夹管理

      OS X布局


      使用任务控制,将终端窗口和VS Code放在同一个屏幕上,就得到一个整合的终端啦!

      自动保存


      cmd+,打开settings.json

      "files.autoSave": "afterDelay"

      开启侧边栏


      Mac: cmd+b

      Windows / Linux: ctrl+b

      分割(Side by side)编辑


      Mac: cmd+\ or cmd then click a file from the file browser.

      Windows / Linux: ctrl+\

      Linux: ctrl+2

      编辑器切换

      Mac: cmd+1cmd+2cmd+3

      Windows / Linux: ctrl+1ctrl+2ctrl+3

      切换到资源管理器窗口(explorer window)


      Mac: cmd+shift+e

      Windows / Linux: ctrl+shift+e

      关闭当前文件夹


      Linux: ctrl+k f

      历史


      ctrl+tab来浏览历史

      向后浏览:

      Mac: ctrl+-

      Windows / Linux: alt+left

      向前浏览:

      Mac: ctrl+shift+up

      Windows / Linux: alt+right

      打开文件


      Mac: cmd+e or cmd+p

      Windows / Linux: ctrl+e or ctrl+p

      文件关联


      为无法精确检测的文件设置语言关联(即配置文件):

      "file.associations": {
          ".eslintrc": "json"
      }

      5.编辑技巧

      括号匹配


      更多内容请参考: Mac: cmd+shift+\

      Windows / Linux: ctrl+shift+\

      多游标选择

      更多内容请参考: Mac: opt+cmd+up or opt+cmd+down

      Windows: ctrl+alt+up or ctrl+alt+down

      Linux: alt+shift+up or alt+shift+down

      为当前选择添加游标。

      复制一行


      Mac: opt+shift+up or opt+shift+down

      Windows / Linux(shift+alt+down or shift+alt+up

      缩小/扩大选择


      更多内容请参考: Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right

      Windows / Linux: shift+alt+left or shift+alt+right

      符号查找

      Mac: cmd+shift+o

      Windows / Linux: ctrl+shift+o

      定位特定的一行

      Mac: ctrl+g or cmd+p , :

      Windows / Linux: ctrl+g

      撤销游标位置

      Mac: cmd+u

      Windows / Linux: ctrl+u

      上下移动一行


      Mac: opt+up or opt+down

      Windows / Linux: alt+up or alt+down

      修整行尾空格


      Mac: cmd+shift+x

      Windows / Linux: ctrl+shift+x

      代码格式化


      Mac: opt+shift+f

      Windows / Linux: shift+alt+f

      代码折叠


      Mac: shift+cmd+[ and shift+cmd+]

      Windows / Linux: ctrl+shift+[ and ctrl+shift+]

      选择当前一行

      Mac: cmd+i

      Windows / Linux: ctrl+i

      回到文件开端/末尾


      Mac: cmd+up and cmd+down

      Windows: ctrl+up and ctrl+down

      Linux: ctrl+home and ctrl+end

      打开README预览


      在markdown文件中使用:

      Mac: shift+cmd+v

      Windows / Linux: ctrl+shift+v

      分割(Side by Side)Markdown编辑和预览


      在markdown文件中使用:

      Linux: ctrl+k v

      6.智能感应

      试用ctrl+space来启动建议栏,这一条可以说是最有用的建议了。

      可浏览可用的方法、参数以及简短文档等等。

      预览(peek)


      选择一个符号,键入alt+f12,或者使用快捷菜单。

      转到定义


      选择一个符号,键入f12,或者使用快捷菜单。

      查找所有引用


      选择一个符号,键入shift+f12,或者使用快捷菜单。

      符号重命名


      选择一个符号,键入f2,或者使用快捷菜单。

      jsconfig.json


      在javascript源文件根上配置jsconfig.json,就可以使用ES6了。

      {
          "compilerOptions": {
              "target": "ES6",
              "module": "commonjs"
          }, "exclude": [
              "npm_modules"
          ]
      }

      .eslintrc.json

      安装http://eslint.org/docs/user-guide/configuring

      以下是使用es6的配置。

      {
          "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
          }
      }

      package.json

      参考package.json文件中的智能感应功能。

      安装typings应用

      安装npm install typings --global # Search for definitions. typings search tape # Find an available definition (by name). typings search --name react # Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`). typings install react --ambient --save

      install会创建一个typings文件夹。VS Code会引用.d.ts文件来启动智能感应功能。

      Emmet语法

      7.代码片段

      创建自定义代码

      File -> Preferences -> User Snippets,选择语言,创建代码片段。

      "create component": {
          "prefix": "component",
          "body": [
              "class $1 extends React.Component {",
              "",
              "   render() {",
              "       return ($2);",
              "   }",
              "",
              "}"
          ]
      },

      更多内容请参考: 8.Git集成

      Git工作流的流畅集成。

      Diffs

      点击Git图标,选择要diff的文件。

      分割(Side by side)

      默认的是分割diff。

      内联视图

      点击下图所示的“more”选项来启动内联视图。

      分支

      通过状态栏可轻松切换分支。

      Staging

      • Stage所有文件

      一次选择多个文件,再点击加号按钮。

      • Stage选择

      Stage文件一部分的方法是:使用箭头选择该文件,然后点击“more”按钮来stage“selected lines”。

      撤销最近一次命令

      查看Git输出

      有时难免需要了解工具的运行状况。有了VS Code,查看正在运行的命令更简单,这对于Git学习或是解决源代码管理问题尤为有帮助。

      Mac: shift+cmd+u

      Windows / Linux: ctrl+shift+u

      运行toggleOutput要下拉选择Git。

      边槽指示器

      查看编辑器中的diff设置。更多内容请参考:

      消除合并冲突

      在合并时点击git图标,在diff view里做更改。

      将VS Code设置为默认合并工具

      git config --global merge.tool code

      9.调试

      配置调试器

      点击F1,选择“Debug: Open Launch.json”,再选择环境,随后产生一个launch.json文件。node.js等环境可以直接运行,可能需要额外配置其他语言。更多内容请参考:

      断点和逐句通过

      断点应在行数旁边。用调试插件向前浏览。

      数据检查

      检查变量在调试面板和控制台里。

      10.任务运行

      自动检测任务

      按下f1,键入“Configure Task”,然后选择“Configure Task Runner”,会生成一个task.json文件,内容如下。更多内容请参考:{ // See http://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "npm", "isShellCommand": true, "showOutput": "always", "suppressTaskName": true, "tasks": [ { "taskName": "install", "args": ["install"] }, { "taskName": "build", "args": ["run", "build"] } ] }

      自动生成有时会出问题。参考上文的网址来了解正确操作方法。

      在命令面板上运行任务

      点击f1,运行命令“Run Task”,然后选择要运行的任务。运行“Terminate Running Task”来终止运行该命令。

     
【作者】张昺华
【新浪微博】 张昺华--sky
【twitter】 @sky2030_
【facebook】 张昺华 zhangbinghua
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

网友评论

登录后评论
0/500
评论
sky-heaven
+ 关注