Mac VSCode 代码片段

2018-12-05 约 1515 字预计阅读 4 分钟

早年有位同僚 Sublime 使的巨溜无比，各种文件切换、命令操作、文本编辑等在其指间飞舞，往来冲突，如入无人之境。顿时暗自称奇，虽诺诺问其故，道曰，此不过配以插件及代码片段，手熟罢了。卧槽，原来如此，虽暗下决心，他日策吾 Mac 扬指期间，必当远甚今日矣。自此，染指各种时髦编辑器及 IDE，乐不思蜀，竟忘了干正事了，不多逼逼了，先撩一撩代码片段。

自定义本地代码片段

点击 VScode 菜单栏中的 Code 在下拉的 首选项 菜单中点击 用户代码片段 并在输入框中输入适合的语言开始创建代码片段。

代码片段字段

代码片段的名称：尽量起的有意义即可
prefix：触发代码片段的前缀
body：代码片段的主体。$0 表示光标的最终位置；$1~$N 表示每次按 Tab 键后光标定位的位置；${N:placeholder} 表示占位，多个占位符请使用相同的标识 IDs
description：代码片段的描述

代码片段实例

有时候定义了多个光标插入点，按快了 Tab 键可能跳过了正当输入的位置，此时亦可按 Shift+Tab 回跳到上一个跳过的位置处，多按可往回退。

以下是一个以 PHP 为例的代码片段。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
    // 代码片段的名称
    "PHPClass": {
        // 按键触发的前缀
        "prefix": "class",

        // 触发后展开的代码主体
        "body": [
            "${1:namespace ${2:App}};",
            "",
            "class ${3:ClassName} ${4:extends ${5:AnotherClass}} ${6:implements ${7:Interface}}",
            "{",
            "\t$0",
            "}",
            ""
        ],

        // 代码片段的描述
        "description": "PHP class"
    }
}

写扩展分享代码片段

创建账号

到 Extensions for the Visual Studio family of products 上注册属于自己的账号。

安装扩展

安装开发辅助扩展

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 安装 yo
$ npm install -g yo
npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
/usr/local/bin/yo -> /usr/local/lib/node_modules/yo/lib/cli.js
/usr/local/bin/yo-complete -> /usr/local/lib/node_modules/yo/lib/completion/index.js

> spawn-sync@1.0.15 postinstall /usr/local/lib/node_modules/yo/node_modules/spawn-sync
> node postinstall


> yo@2.0.5 postinstall /usr/local/lib/node_modules/yo
> yodoctor


Yeoman Doctor
Running sanity checks on your system

✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ Node.js version
✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✔ npm version
✔ yo version

Everything looks all right!
+ yo@2.0.5
added 537 packages from 265 contributors in 36.448s

// 安装 generator-code
$ npm install -g generator-code
+ generator-code@1.1.43
added 381 packages from 284 contributors in 61.462s

// 安装 vsce
$ npm install -g vsce
/usr/local/bin/vsce -> /usr/local/lib/node_modules/vsce/out/vsce
+ vsce@1.53.2
added 60 packages from 67 contributors in 7.519s

运行开发扩展命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
❯ New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)

创建代码片段项目

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$ yo code your-project-name

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Code Snippets
Folder location that contains Text Mate (.tmSnippet) and Sublime snippets (.sublime-snippet) or press ENTER to start with a new snippet file.
? Folder name for import or none for new:
? What's the name of your extension? your-project-name
? What's the identifier of your extension? your-project-name
? What's the description of your extension? VSCode PHP Snippets
Enter the language for which the snippets should appear. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
? Language id: php
   create your-project-name/.vscode/launch.json
   create your-project-name/package.json
   create your-project-name/vsc-extension-quickstart.md
   create your-project-name/README.md
   create your-project-name/CHANGELOG.md
   create your-project-name/snippets/snippets.json
   create your-project-name/.vscodeignore

Your extension your-project-name has been created!

To start editing with Visual Studio Code, use the following commands:

     cd your-project-name
     code .

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.

项目发布

package.json 文件的编写完善请参见相关文档。

Publishing Extensions

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 创建发布者
$ vsce create-publisher your-publisher-name

// 以发布者身份登录，需要在 Azure DevOps 提前创建令牌
$ vsce login your-publisher-name
Publisher 'your-publisher-name' is already known
Do you want to overwrite its PAT? [y/N] y
Personal Access Token for publisher 'your-publisher-name': ****

// 发布，视情况发布
$ vsce publish major|minor|patch

// vsce 命令
$ vsce --help
Usage: vsce [options] [command]

Options:
  -V, --version                        output the version number
  -h, --help                           output usage information

Commands:
  ls [options]                         Lists all the files that will be published
  package [options]                    Packages an extension
  publish [options] [<version>]        Publishes an extension
  unpublish [options] [<extensionid>]  Unpublishes an extension. Example extension id: microsoft.csharp.
  list <publisher>                     Lists all extensions published by the given publisher
  ls-publishers                        List all known publishers
  create-publisher <publisher>         Creates a new publisher
  delete-publisher <publisher>         Deletes a publisher
  login <publisher>                    Add a publisher to the known publishers list
  logout <publisher>                   Remove a publisher from the known publishers list
  show [options] <extensionid>         Show extension metadata
  search [options] <text>              search extension gallery
  *

目录