Jinyun's Notes

没什么天赋,爱好也不多,但愿坚持做些喜欢的事情

0%

Mac VSCode 代码片段

201905191910.jpg

🚀早年有位同僚 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
*
本笔记是笔者在学习和工作中的一些整理,如对您有用,请鼓励我继续写作