返回 登录
0

VS Code开发技巧集锦

2016 年 9 月 23-24 日,由 CSDN 和创新工场联合主办的“MDCC 2016 移动开发者大会• 中国”(Mobile Developer Conference China)将在北京• 国家会议中心召开,来自iOS、Android、跨平台开发、产品设计、VR开发、移动直播、人工智能、物联网、硬件开发、信息无障碍10个领域的技术专家将分享他们在各自行业的真知灼见。

从8月8日起至9月4日,MDCC大会门票处于6.8折优惠票价阶段,五人以上团购更有特惠,限量供应(票务详情链接6.8折优惠,欲购从速!


微软在其官方GitHub上公布了一系列VS Code tips and tricks,本文为对它的翻译提炼,译者:张新慧。

目录


  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 here.
  • Windows: Follow instructions here.
  • Mac: see below.

Linux指南和Windows指南参考:http://code.visualstudio.com/docs/setup/setup-overview

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. 个人设置


这一部分个人发挥的空间很大,完整信息请参考:http://code.visualstudio.com/docs/customization/overview

设置编辑器

打开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
}

更多内容请参考:http://code.visualstudio.com/docs/customization/userandworkspace

预览主题


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

更多内容请参考:http://code.visualstudio.com/docs/languages/json

3.扩展


贡献点


参考:http://code.visualstudio.com/docs/extensionAPI/extension-points

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

找到扩展


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

安装扩展


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.编辑技巧

括号匹配


更多内容请参考:http://code.visualstudio.com/docs/editor/editingevolved

Mac: cmd+shift+\

Windows / Linux: ctrl+shift+\

多游标选择

更多内容请参考:http://code.visualstudio.com/docs/editor/editingevolved

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(Issue #5363): shift+alt+down or shift+alt+up

缩小/扩大选择


更多内容请参考:http://code.visualstudio.com/docs/editor/editingevolved

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

安装eslint extension。按照个人喜好配置。具体说明参考: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应用

安装typings来引进.d.ts文件来激活javascript智能感应功能。

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语法

Emmet语法支持

7.代码片段

创建自定义代码

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

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

更多内容请参考:http://code.visualstudio.com/docs/customization/userdefinedsnippets

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设置。更多内容请参考:http://code.visualstudio.com/docs/editor/editingevolved

消除合并冲突

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

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

git config --global merge.tool code

9.调试

配置调试器

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

断点和逐句通过

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

数据检查

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

10.任务运行

自动检测任务

按下f1,键入“Configure Task”,然后选择“Configure Task Runner”,会生成一个task.json文件,内容如下。更多内容请参考:http://code.visualstudio.com/docs/editor/tasks

{
    // 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”来终止运行该命令。

关于移动开发新技术,更多精彩尽在MDCC 2016,详情请查看大会官网:MDCC 2016移动开发者大会

评论