VsCode 开发环境

Summary: Author: 张亚飞 | 阅读时间: 2 minute read | Published: 2016-08-19
Filed under Categories: MarkDownTags: Tag,

VsCode 开发工具

安装插件集

Local History + Intellij Idea Key Binding + SFTP + ESLint + vscode-icons-mac + TODO Highlight Kubernetes + Kubernetes Support Rust+Rust(rls) + Rust Grammar + Rust Assist + crates

VsCode 配置

安装 Intellij Idea 快捷键

打开 Code -> 首选项 -> 键盘映射,安装插件 Intellij Idea Key Binding

设置 Markdown 不自动换行

.vscode/settings.json

{
    "git.ignoreLimitWarning": true,
    "editor.wordWrapColumn": 1200,
    "[markdown]": {
        "editor.wordWrap": "wordWrapColumn",
        "editor.quickSuggestions": false
    }
}

设置自定义快捷键,主要包括: 代码行注释代码块注释代码格式化

/Users/coam/Library/Application Support/Code/User/keybindings.json

// 将键绑定放在此文件中以覆盖默认值auto[]
[
    {
        "key": "ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "alt+cmd+/",
        "command": "-editor.action.blockComment",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+/",
        "command": "editor.action.commentLine",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "cmd+/",
        "command": "-editor.action.commentLine",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+/",
        "command": "toggleExplainMode",
        "when": "suggestWidgetVisible"
    },
    {
        "key": "cmd+/",
        "command": "-toggleExplainMode",
        "when": "suggestWidgetVisible"
    },
    {
        "key": "cmd+/",
        "command": "editor.action.formatDocument",
        "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
    },
    {
        "key": "alt+cmd+l",
        "command": "-editor.action.formatDocument",
        "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
    }
]

设置代码片段

Ctrl+Shift+P 打开命令输入 snippet:

选择选项后会出现一个语言列表用以选择给哪种语言创建代码段,这里以设置 javascript.修改 javascript.json 为以下内容:

javascript.json

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Page Header": {
		"prefix": "ducx",
		"body": [
			"/**",
			" * $1",
			" * ",
			" * @author ducx",
			" * @created $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
			" */",
			"$2"
		],
		"description": "page header"
	}
}

保存之后,打开一个 js 文件,输入前缀 ducx 出现快捷提示窗后回车,此时已经生成了我们自定义的代码片段结构.

但发现在 Markdown 下不管用,需要在 settings.json 增加以下配置生效:

settings.json

"[markdown]": {
    "editor.formatOnSave": true,
    "editor.renderWhitespace": "all",
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    "editor.acceptSuggestionOnEnter": "on"
}

vscode 如何创建自定义代码片段 Vscode Markdown Snippet 配置


VsCode 在线编辑器

[](https://github.com/stackblitz/core)

Comments

  • 牧马人 says: 2019-09-14 15:01:22

    江山代有才人出,各领风骚数百年.

  • 牧马人 says: 2019-09-14 15:01:25

    江山代有才人出,各领风骚数百年.

  • 牧马人 says: 2019-09-15 22:35:25

    江山代有才人出,各领风骚数百年.

  • 牧马人 says: 2019-09-15 22:35:28

    江山代有才人出,各领风骚数百年.

  • 牧马人 says: 2019-09-16 16:53:19

    江山代有才人出,各领风骚数百年.

Cor-Ethan, the beverage → www.iirii.com