Visual Studio Code 使用

最近在使用React Native, 遇到了一个很好用的编辑器, VSCode(Visual Studio Code), 这里记录一下我遇到的一些问题.

为什么选择用Visual Studio Code?

市面上有很多非常优秀的编辑器，例如 sublime、notpad、vim、emacs，每一种编辑器都有自身的特点，合适自己的才是最好的.

VSCode 有以下几大特点：

• 跨平台，支持 Windows 7/8/10、Linux、MacOS
• 支持 JavaScrip、C#、C++、Python、PHP、Markdown等多种编程语言
• 支持语法高亮、智能代码补全、代码片段、代码对比等等*
• 支持 GIT 版本管理
• 支持并排编辑
• 支持代码调试
• 支持第三方扩展
  vscode 是由 Eric Gamma 带队打造，typescript编写而成。vscode 大文件处理方面也表现不俗，界面风格也非常漂亮.

安装Visual Studio Code

在官网下载安装包

VSCode扩展

• 在使用的过程中, VSCode提供一个非常便利的功能, 既能自己写代码片段, 也能在 marketplace 搜索我们想要的扩展.
• 搜索到我们想用的扩展, 点击 install 按钮, 回到VSCode界面能看到 安装扩展的提示, 点击安装 即可

在工具栏中, 查看 -> 扩展, 就能看到自己安装的扩展.

image.png

在安装完扩展后, 如果不能代码提示, 可以在这个扩展的管理页面.

• 重新加载 扩展, 如果真的已经安装完, 这个重新加载的按钮会变成 禁用 按钮
• 为了方便调用代码片段, 在设置里面可以设置以下, 通过快捷键Cmd + ,, 可以直接打开设置界面, 在上方搜索snippetSuggestions, 第一个就是, 我们在右边设置就能覆盖默认设置.

"editor.snippetSuggestions": "top",

自定义代码片段

image.png
点击用户代码片段, 会出现代码片段搜索页面, 点击新建全局代码片段文件
这是示例代码片段

"Print to console": {
        "scope": "javascript,typescript",
        "prefix": "LC_log",
        "body": [
            "console.log('$1');",
            "$2",
            // 新增
            "import {${className}} from '${fileName}';",
        ],
        "description": "Log output to console"
    }

• scope: 代码可用的语言

• prefix: 使用代码片段智能提示的快捷符

• body: 代码片段的内容, 使用$1和${1:defaultText}定义光标位置，使用$0定义最终光标位置。用${varName}和${varName:defaultText}插入变量值

• description: 代码片段的描述

参考
VS Code上那些好用的JS代码片段
VS Code初体验