vscode 配置及插件推荐

2019-02-01  本文已影响67人  Whyn

前置知识

首先说明一下，vscode 为我们提供了两种设置方式：

注：Workspace Settings 会覆盖 User Settings。

打开用户设置和项目设置的方法如下：

或直接通过命令行面板（Ctrl+Shift+P）输入 open settings 进行调出。

vscode 中的 设置选项 都配置在一个 settings.json 文件中。
其中，用户设置（User Settings） 的路径为：

而 项目设置（Workspace Settings） 的路径为：根目录下的.vscode中。

以下是博主的通用配置：

{
  //  - onWindowChange: A dirty file is automatically saved when the window loses focus
  // "files.autoSave": "onFocusChange",
  // Controls the font size in pixels.
  "editor.fontSize": 14,
  // The number of spaces a tab is equal to. This setting is overridden based on the file contents when `editor.detectIndentation` is on.
  "editor.tabSize": 4,
  // Configure glob patterns for excluding files and folders. For example, the files explorer decides which files and folders to show or hide based on this setting. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
  },
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
}

必备插件

Settings Sync

vscode 多设备同步工具，借助 Github GIST 支持设置文件(settings.json)，按键映射文件(keybindings.json)， Launch File，Snippets Folder，VSCode扩展及配置，项目文件夹等的同步。

使用方法：

配置详细步骤：

  1. 首先在 vscode 中安装 Settings Sync
  2. 进入 github / Settings / Developer settings / Personal access tokens / Generate New Token
Generate New Token
Select Gist From Scopes Get an Access Token

按上文步骤操作后，最后就可以得到一个 Access Token。把这个 Access Token 记录下来，后续在其他设备上上传配置时，需要使用到。

  1. 上传配置文件：
     • 命令面板输入Sync : Update / Upload Settings（或快捷键Shift + Alt + U）
     • 输入 Access Token，创建 gists，进行配置上传
     • 上传成功后，会返回一个 Gist ID。保存该 Gist ID，下次其他设备需要下载配置时需要用到。
上传配置文件

注：上传的配置文件可以在以下网址进行查看：https://gist.github.com/{your_userName}/{gist_id}

  1. 下载/同步配置文件：
     • 命令面板输入Sync : Download Settings（或快捷键Shift + Alt + D）
     • 输入 Access Token
     • 输入 Gist ID
     • 下载完成
    下载/同步配置文件

通用插件

vim 插件扩展：VSCodeVim

注：VSCodeVim 不支持 vim 脚本加载，因此无法使用 .vimrc 或 .vim插件进行配置。只能通过手动复制到 Settings 和 Emulated plugins.

设置：VSCodeVim 完整的选项支持列表可以在 vscode 的扩展菜单中的 Contributions 标签查看。下面是博主自己的常用配置：

{
  "vim.leader": "<space>",
  "vim.hlsearch": true,
  "vim.ignorecase": true,
  "vim.smartcase": true,
  "vim.incsearch": true,
  "vim.useSystemClipboard": true,
  // do override vscode default ctrl operations
  "vim.useCtrlKeys": true,
  //key handled by vscode
  "vim.handleKeys": {
    // "<C-a>": false,
    "<C-f>": false
  },
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<leader>", "q"],
      "commands": ["workbench.action.closeActiveEditor"]
    },
    {
      "before": ["<leader>", "w"],
      "commands": ["workbench.action.files.save"]
    },
    {
      "before": ["<leader>", "c", "c"],
      "commands": ["editor.action.addCommentLine"]
    },
    {
      "before": ["<leader>", "c", "u"],
      "commands": ["editor.action.removeCommentLine"]
    },
    {
      "before": ["<leader>", "f", "m"],
      "commands": ["editor.action.format"]
    },
    {
      "before": ["<C-a>"],
      "after": ["g", "g", "v", "G"]
    },
    {
      "before": ["<C-x>"],
      "commands": ["editor.action.clipboardCutAction"]
    }
  ],
  "vim.visualModeKeyBindings": [
    {
      "before": ["<C-x>"],
      "after": ["\"", "+", "d"]
    },
    {
      "before": ["<leader>", "c", "c"],
      "commands": ["editor.action.addCommentLine"]
    },
    {
      "before": ["<leader>", "c", "u"],
      "commands": ["editor.action.removeCommentLine"]
    },
    {
      "before": ["<leader>", "f", "m"],
      //using prettier
      "commands": ["editor.action.formatSelection"]
    }
  ],
  //easymotion
  "vim.easymotion": true,
  //sneak disable,cuz i want the default s function
  "vim.sneak": false,
  "vim.sneakUseIgnorecaseAndSmartcase": true,
  //surround
  "vim.surround": true,
}

下面介绍下一些相对有用的配置选项：

VSCodeVim 的配置文件加载顺序如下：

  1. :set {setting}
  2. vim.{setting} from user/workspace settings.
  3. VS Code settings
  4. VSCodeVim default values

我们知道，在 vim 中，有各种各样的插件可以为我们提供丰富的功能。而 VSCodeVim 中，也为我们提供了一些模拟插件（Emulated Plugins）：

//使能 easymotion
"vim.easymotion":true,

其具体使用方法请查看：vim-easymotion。博主常用的使用方法如下：

Motion Command Description
<leader><leader> s <char> 全文查找字符
<leader><leader> w 查找当前光标后面的单词首字母
<leader><leader> b 查找当前光标前面的单词首字母 
//使能 vim.surround 插件
"vim.surround":true,

使用方法如下：

Command Description
gc 注释切换 (eg：gcc单行注释切换，gc2j当前行和下两行注释切换）
gC 块注释切换（eg：gCi{ 大括号内容注释切换 
"vim.sneak":true,
"vim.sneakUseIgnorecaseAndSmartcase":true,

使用方法如下：

Motion Command Description
s<char><char> 向后寻找第一次出现<char><char>的位置
S<char><char> 向后寻找第一次出现<char><char>的位置
<operator>z<char><char> 向后寻找第一次出现符合<operator>的<char><char>的位置
<operator>Z<char><char> 向前寻找第一次出现符合<operator>的<char><char>的位置

注：对于有<operator>的移动，使用z代替s，因为s已经被插件 vim-surround 占据了。

  1. 首先系统需要安装一个第三方输入法切换程序：im-select
  2. 找到默认输入法键值。
    对于 Mac 系统：先切换为英文输入法，然后运行/<path-to-im-select-installation>/im-select输出默认输入法键值。下表列出 MacOS 常见的英文键值布局：
Key Description
com.apple.keylayout.US U.S.
com.apple.keylayout.ABC ABC
com.apple.keylayout.British British
com.apple.keylayout.Irish Irish
com.apple.keylayout.Australian Australian
com.apple.keylayout.Dvorak Dvorak
com.apple.keylayout.Colemak Colemak

对于 Windows 系统：输入法键值获取详情请参考 im-select guide 。通常来说，如果你的键盘布局为 en_US，那么键盘输入法键值为1033（建议添加该键盘布局为默认输入法）。你也可以通过 Locale-codes 页面查找你的 locale ID，LCID Decimal列就是 locale ID 值。

  1. 配置vim.autoSwitchInputMethod:
"vim.autoSwitchInputMethod.enable": true,
//默认键盘布局
"vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.US",
"vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
"vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}"

"vim.autoSwitchInputMethod.enable": true,
"vim.autoSwitchInputMethod.defaultIM": "1033",
"vim.autoSwitchInputMethod.obtainIMCmd": "D:\\apps\\im-select.exe",
"vim.autoSwitchInputMethod.switchIMCmd": "D:\\apps\\im-select.exe {im}"

上述配置的选项{im}是一个指代切换输入法的命令行选项。

代码运行：Code Runner

Code Runner 可以执行多种语言代码：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp 和 自定义命令。

使用方法：

code runner 
{
    "code-runner.customCommand": "echo Hello"
}

配置：默认情况下，请确保各类语言的执行器配置在全局环境变量中。你也可以通过配置code-runner.executorMap设置执行器路径：

{
    "code-runner.executorMap": {
        "javascript": "node",
        "php": "C:\\php\\php.exe",
        "python": "python",
        "perl": "perl",
        "ruby": "C:\\Ruby23-x64\\bin\\ruby.exe",
        "go": "go run",
        "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",
        "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
        "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"
    }
}

下表是 Code Runner 支持的自定义参数：

Supported customized parameters Description
$workspaceRoot 当前工程目录路径
$dir 要运行的代码文件所在的目录
$dirWithoutTrailingSlash 要运行的代码文件所在的目录（不带尾后斜杆）
$fullFileName 要运行的代码文件全路径
$fileName 要运行的代码文件名称
$fileNameWithoutExt 要运行的代码文件名称（不带后缀名）
$driveLetter 要运行的代码文件所在盘符（只用于 Windows 系统）
$pythonPath Python 解释器路径

下面是本人的配置：

{
    "code-runner.clearPreviousOutput": true,
    "code-runner.saveAllFilesBeforeRun": true,
    "code-runner.saveFileBeforeRun": true,
    "code-runner.preserveFocus": true,
    "code-runner.ignoreSelection":false,
    //top right execute icon
    "code-runner.showRunIconInEditorTitleMenu":true,
}

Bracket Pair Colorizer 2

用不同的颜色区分大括号，该插件是 Bracket Pair Colorizer 的升级版本，使用同一套括号解析引擎，但极大增加了配置速度及准确性。

本人配置如下：

{
    "bracket-pair-colorizer-2.forceUniqueOpeningColor":true,
    "bracket-pair-colorizer-2.forceIterationColorCycle":true,
    "bracket-pair-colorizer-2.colorMode":"Consecutive",
    "editor.matchBrackets":false,
    "bracket-pair-colorizer-2.highlightActiveScope":true,
    "bracket-pair-colorizer-2.activeScopeCSS":[
        "borderStyle : solid",
        "borderWidth : 1px",
        "borderColor : {color}; opacity: 0.5",
        "backgroundColor:{color}"
    ],
    "bracket-pair-colorizer-2.showBracketsInGutter": true,
    "bracket-pair-colorizer-2.showHorizontalScopeLine": false,
    "bracket-pair-colorizer-2.showVerticalScopeLine": true,
}

TODO Highlight

高亮显示 TODOs / FIXMEs 的地方。

本人配置如下：

{
    "todohighlight.isEnable": true,
    "todohighlight.isCaseSensitive": true,
    "todohighlight.include": [
        "**/*.js",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx",
        "**/*.html",
        "**/*.php",
        "**/*.css",
        "**/*.scss",
        "**/*.py",
        "**/*.java",
        "**/*.kt",
        "**/*.h",
        "**/*.c",
        "**/*.cpp",
    ],
    "todohighlight.exclude": [
        "**/node_modules/**",
        "**/bower_components/**",
        "**/dist/**",
        "**/build/**",
        "**/.vscode/**",
        "**/.github/**",
        "**/_output/**",
        "**/*.min.*",
        "**/*.map",
        "**/.next/**"
    ],
    "todohighlight.maxFilesForSearch": 5120,
    "todohighlight.toggleURI": false,
}

TODO Highlight 内置命令如下：

vscode-icons

让 vscode 资源树目录加上图标

配置如下：

{
    "workbench.iconTheme": "vscode-icons",
}

Path Intellisense

对本地文件的智能提示，自动补全文件名

Window 系统需在 keybindings.json 中添加如下配置：

{ "key": ".", "command": "" }

注：keybindings.json 打开方式如下图所示：

keybindings.json

Java 环境搭建

VSCode搭建Java开发运行环境

前端

Auto Close Tag

自动补全标签

本人配置如下：

{
    "auto-close-tag.enableAutoCloseTag": true,
    "auto-close-tag.enableAutoCloseSelfClosingTag": true,
    "auto-close-tag.activationOnLanguage": [
        "xml",
        "php",
        "blade",
        "ejs",
        "jinja",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "plaintext",
        "markdown",
        "vue",
        "liquid",
        "erb",
        "lang-cfml",
        "cfml",
        "HTML (Eex)"
    ]
}

Auto Rename Tag

自动重命名 HTML/XML 匹配标签

注：Auto Close Tag 和 Auto Rename Tag 一起食用味道更佳哟。

ESLint

ESLint（中文站点）是一个开源的 JavaScript 代码检查工具，使用 Node.js 编写，由 Nicholas C. Zakas 于 2013 年 6 月创建。ESLint 的初衷是为了让程序员可以创建自己的检测规则，使其可以在编码的过程中发现问题而不是在执行的过程中。ESLint 的所有规则都被设计成可插入的，为了方便使用，ESLint 内置了一些规则，在这基础上也可以增加自定义规则。

要在 vscode 中集成 ESLint，需要进行如下步骤：

{
    "eslint.enable": true,
    "eslint.options": {
        "configFile": "C:/Users/10417/.eslintrc.js",
        "eslint.autoFixOnSave": true,
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            "html",
            "jsx",
            "vue",
            {
                "language": "html",
                "autoFix": true
            }
        ]
    }
}

Prettier

代码格式化插件，支持 JavaScript / TypeScript / CSS

使用方法：

*配置如下：

{
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
}

Markdown

Markdown Preview Enhanced

Markdown Preview Enhanced 是一款为 Atom 以及 Visual Studio Code 编辑器编写的 超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。

运行方法：快捷键Ctrl-K-V，或直接点击右上角分页符号：

run markdown

可以通过自己配置 css 来定制 markdown 页面样式，详情请查看：customize-css

最后附上全部的配置文件：settings.json

上一篇下一篇

猜你喜欢

热点阅读