zoukankan      html  css  js  c++  java

  • VS Code开发技巧集锦【转】

    转自：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 / 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

      快速跳转到错误和警告。

      按f8或shift+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+1, cmd+2, cmd+3

      Windows / Linux: ctrl+1, ctrl+2, ctrl+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

        快速跳转到错误和警告。

        按f8或shift+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+1, cmd+2, cmd+3

        Windows / Linux: ctrl+1, ctrl+2, ctrl+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”来终止运行该命令。

       
  • 相关阅读:
    POJ 3041 Asteroids 最小点覆盖 == 二分图的最大匹配
    POJ 3083 Children of the Candy Corn bfs和dfs
    POJ 2049 Finding Nemo bfs 建图很难。。
    POJ 2513 Colored Sticks 字典树、并查集、欧拉通路
    POJ 1013 Counterfeit Dollar 集合上的位运算
    POJ 2965 The Pilots Brothers' refrigerator 位运算枚举
    无聊拿socket写的100以内的加法考试。。。
    POJ 1753 Flip Game
    初学socket，c语言写的简单局域网聊天
    汇编语言 复习 第十一章 标志寄存器
  • 原文地址：https://www.cnblogs.com/sky-heaven/p/6867381.html
Copyright © 2011-2022 走看看