美文网首页
Visual Studio Code 使用

Visual Studio Code 使用

作者: Lin__Chuan | 来源:发表于2018-08-28 14:45 被阅读219次

最近在使用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初体验

相关文章

网友评论

      本文标题:Visual Studio Code 使用

      本文链接:https://www.haomeiwen.com/subject/iiutwftx.html