日期:2022年1月27日标签:DeveloperHandbook

自用 VSCode 环境配置 #

以下是我目前使用的 VsCode 环境,VsCode 是我用来作为 Web 开发的主要工具。

建议搭配 vim 使用技巧 使用

Plugins #

安装的比较常用的插件。

  1. Bookmarks
  2. formate: CSS/LESS/SCSS formatter
  3. Git Graph
  4. Markdown All in One
  5. MDX
  6. Multiple clipboards for VSCode
  7. open in browser
  8. Shader languages support for VS Code
  9. XML
  10. ESLint
  11. Vetur
  12. Search node_modules
  13. Indent-Rainbow
  14. GitLens — Git supercharged
  15. Todo Tree
  16. Markdown Shortcuts
  17. vim(可选,如果熟悉 vim 的操作,建议安装)
  18. Tmux Keybinding
  19. print 用于打印代码

Settings #

vscode 的 users settings。

{
    "workbench.editor.enablePreview": false,
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "editor.lineNumbers": "relative",
    "typescript.implementationsCodeLens.enabled": true,
    "files.eol": "\n",
    "files.trimFinalNewlines": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "typescript.referencesCodeLens.enabled": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
    "git.inputValidationSubjectLength": 72,
    "[css]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "vetur.format.options.tabSize": 4,
    "diffEditor.ignoreTrimWhitespace": false,
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "vetur.format.options.useTabs": true,
    "editor.detectIndentation": false,
    "[less]": {
        "editor.defaultFormatter": "MikeBovenlander.formate"
    },
    "editor.fontSize": 20,
    "files.autoSave": "afterDelay",
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "terminal.integrated.profiles.windows": {
        "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe (migrated)": {
            "path": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
            "args": [
                "--login",
                "-i"
            ]
        }
    },
    "redhat.telemetry.enabled": true,
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "editor.fontFamily": "'Courier New',monospace",
    "terminal.integrated.fontFamily": "Consolas,'Courier New',monospace",
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "security.workspace.trust.untrustedFiles": "open",
    "gitlens.hovers.currentLine.over": "line",
    "gitlens.hovers.enabled": false,
    "extensions.ignoreRecommendations": true,
    "workbench.iconTheme": "vscode-icons",
    "markdownShortcuts.icons.bold": false,
    "markdownShortcuts.icons.bullets": false,
    "markdownShortcuts.icons.italic": false,
    "markdownShortcuts.icons.strikethrough": false,
    "workbench.colorTheme": "NetBeans Light Theme",
    "vim.cursorStylePerMode.normal": "block",
    "vim.easymotion": true,
    "vim.incsearch": true,
    "vim.useSystemClipboard": true,
    "vim.useCtrlKeys": true,
    "vim.hlsearch": true,
    "vim.leader": "<space>",
    "vim.foldfix": true,
    "vim.smartRelativeLine": true,
    "vim.handleKeys": {
        "<C-a>": false,
        "<C-f>": false
    },
    "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": [
                "<leader>",
                "d"
            ],
            "after": [
                "d",
                "d"
            ]
        },
        {
            "before": [
                "<C-n>"
            ],
            "commands": [
                ":nohl"
            ]
        },
        {
            "before": [
                "K"
            ],
            "commands": [
                "lineBreakInsert"
            ],
            "silent": true
        }
    ],
    // 输入法
    "vim.autoSwitchInputMethod.enable": true,
    "vim.autoSwitchInputMethod.defaultIM": "1033",
    "vim.autoSwitchInputMethod.obtainIMCmd": "C:\\im-select\\im-select.exe",
    "vim.autoSwitchInputMethod.switchIMCmd": "C:\\im-select\\im-select.exe {im}",
    "[scss]": {
        "editor.defaultFormatter": "MikeBovenlander.formate"
    },
    "vsicons.dontShowNewVersionMessage": true,
}

后面我又将 vim 插件换成了 neovim 插件,配置也需要变化:

{
    "workbench.editor.enablePreview": false,
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "editor.lineNumbers": "relative",
    "typescript.implementationsCodeLens.enabled": true,
    "files.eol": "\n",
    "files.trimFinalNewlines": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "typescript.referencesCodeLens.enabled": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
    "git.inputValidationSubjectLength": 72,
    "[css]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "vetur.format.options.tabSize": 4,
    "diffEditor.ignoreTrimWhitespace": false,
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "vetur.format.options.useTabs": true,
    "editor.detectIndentation": false,
    "[less]": {
        "editor.defaultFormatter": "MikeBovenlander.formate"
    },
    "editor.fontSize": 19,
    "files.autoSave": "afterDelay",
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "terminal.integrated.profiles.windows": {
        "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe (migrated)": {
            "path": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
            "args": [
                "--login",
                "-i"
            ]
        }
    },
    "redhat.telemetry.enabled": true,
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "editor.fontFamily": "'Courier New',monospace",
    "terminal.integrated.fontFamily": "Consolas,'Courier New',monospace",
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "security.workspace.trust.untrustedFiles": "open",
    "gitlens.hovers.currentLine.over": "line",
    "gitlens.hovers.enabled": false,
    "extensions.ignoreRecommendations": true,
    "workbench.iconTheme": "vscode-icons",
    "markdownShortcuts.icons.bold": false,
    "markdownShortcuts.icons.bullets": false,
    "markdownShortcuts.icons.italic": false,
    "markdownShortcuts.icons.strikethrough": false,
    "workbench.colorTheme": "NetBeans Light Theme",
    "[scss]": {
        "editor.defaultFormatter": "MikeBovenlander.formate"
    },
    "vsicons.dontShowNewVersionMessage": true,
    "todo-tree.tree.showScanModeButton": false,
    "[c]": {
        "editor.defaultFormatter": "ms-vscode.cpptools"
    },
    "C_Cpp.clang_format_style": "{ BasedOnStyle: Chromium, IndentWidth: 4, ColumnLimit: 0}",
    "editor.unicodeHighlight.ambiguousCharacters": false,
    // NEOVIM CONFIG
    "extensions.experimental.affinity": {
        "asvetliakov.vscode-neovim": 1
    },
    "vscode-neovim.neovimExecutablePaths.win32": "C:\\Program Files\\Neovim\\bin\\nvim.exe",
    "vscode-neovim.useWSL": true,
    "vscode-neovim.neovimExecutablePaths.linux": "/usr/bin/nvim",
}

Keyboard shortcuts #

[
    {
        "key": "ctrl+b ctrl+b",
        "command": "bookmarks.toggle",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+b ctrl+n",
        "command": "bookmarks.jumpToNext",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+l",
        "command": "-bookmarks.jumpToNext",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+b ctrl+p",
        "command": "bookmarks.jumpToPrevious",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+j",
        "command": "-bookmarks.jumpToPrevious",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+b ctrl+c",
        "command": "bookmarks.clear"
    },
    {
        "key": "ctrl+shift+enter",
        "command": "editor.action.insertLineAfter",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+enter",
        "command": "editor.action.insertLineBefore",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+k",
        "command": "-editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+k ctrl+v",
        "command": "markdown.showPreviewToSide",
        "when": "!notebookEditorFocused && editorLangId == 'markdown'"
    },
    {
        "key": "ctrl+k ctrl+v",
        "command": "markdown.extension.closePreview",
        "when": "markdownPreviewFocus"
    },
    {
        "key": "ctrl+k",
        "command": "-extension.vim_ctrl+k",
        "when": "editorTextFocus && vim.active && vim.use<C-k> && !inDebugRepl"
    },
    // -- 侧边栏命令
    // 切换侧边栏显示状态
    {
        "key": "alt+n alt+n",
        "command": "workbench.action.toggleSidebarVisibility"
    },
    // 切换二级侧边栏显示状态
    {
        "key": "alt+l alt+l",
        "command": "workbench.action.toggleAuxiliaryBar"
    },
    // 显示文件资源管理器
    {
        "key": "alt+n alt+1",
        "command": "workbench.files.action.focusFilesExplorer"
    },
    // 折叠所有文件夹
    {
        "key": "-",
        "command": "workbench.files.action.collapseExplorerFolders",
        "when": "filesExplorerFocus"
    },
    // 侧边栏显示激活文件
    {
        "key": "alt+n alt+a",
        "command": "workbench.files.action.showActiveFileInExplorer"
    },
    // 显示全局搜索
    {
        "key": "alt+n alt+2",
        "command": "workbench.action.replaceInFiles",
    },
    // 显示版本控制
    {
        "key": "alt+n alt+3",
        "command": "workbench.view.scm",
        "when": "workbench.scm.active"
    },
    // 显示debug
    {
        "key": "alt+n alt+4",
        "command": "workbench.view.debug",
        "when": "viewContainer.workbench.view.debug.enabled"
    },
    // 显示插件商店
    {
        "key": "alt+n alt+5",
        "command": "workbench.view.extensions",
        "when": "viewContainer.workbench.view.extensions.enabled"
    },
    // 显示书签面板
    {
        "key": "alt+n alt+6",
        "command": "bookmarksExplorer.focus"
    },
    // 显示TODO Tree
    {
        "key": "alt+n alt+7",
        "command": "todo-tree-view.focus"
    },
    // --- 文件命令
    // 保存文件
    {
        "key": "ctrl+s",
        "command": "workbench.action.files.save"
    },
    // 保存所有文件
    {
        "key": "ctrl+shift+s",
        "command": "workbench.action.files.saveAll"
    },
    // 关闭文件
    {
        "key": "alt+w",
        "command": "workbench.action.closeActiveEditor"
    },
    // 关闭其他所有文件
    {
        "key": "alt+o alt+w",
        "command": "workbench.action.closeOtherEditors"
    },
    // 关闭其他分屏
    {
        "key": "alt+o alt+g",
        "command": "workbench.action.closeEditorsInOtherGroups"
    },
    // 关闭所有文件
    {
        "key": "alt+shift+w",
        "command": "workbench.action.closeAllEditors"
    },
    // INSERT 模式下复制、粘贴、剪切
    {
        "key": "ctrl+c",
        "command": "-editor.action.clipboardCopyAction"
    },
    {
        "key": "ctrl+v",
        "command": "-editor.action.clipboardPasteAction"
    },
    {
        "key": "ctrl+x",
        "command": "multiclip.cut",
        "when": "-editorTextFocus"
    },
    {
        "key": "ctrl+c",
        "command": "editor.action.clipboardCopyAction",
        "when": "vim.mode != 'Normal' && vim.mode != 'Visual' && vim.mode != 'VisualLine' && vim.mode != 'VisualBlock' && vim.mode != 'CommandlineInProgress'"
    },
    {
        "key": "ctrl+v",
        "command": "editor.action.clipboardPasteAction",
        "when": "vim.mode != 'Normal' && vim.mode != 'Visual' && vim.mode != 'VisualLine' && vim.mode != 'VisualBlock' && vim.mode != 'CommandlineInProgress'"
    },
    {
        "key": "ctrl+x",
        "command": "multiclip.cut",
        "when": "vim.mode != 'Normal' && vim.mode != 'Visual' && vim.mode != 'VisualLine' && vim.mode != 'VisualBlock' && vim.mode != 'CommandlineInProgress'"
    },
    // --- 资源管理器中对文件或目录的操作
    // 新建文件
    {
        "key": "i",
        "command": "explorer.newFile",
        "when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
    },
    // 新建目录
    {
        "key": "o",
        "command": "explorer.newFolder",
        "when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
    },
    // 刷新资源管理器
    {
        "key": "f5",
        "command": "workbench.files.action.refreshFilesExplorer",
        "when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
    },
    // 重命名文件或目录
    {
        "key": "r",
        "command": "renameFile",
        "when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
    },
    // 删除文件或目录
    {
        "key": "d",
        "command": "deleteFile",
        "when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
    },
    // 剪切文件或目录
    {
        "key": "x",
        "command": "filesExplorer.cut",
        "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
    },
    // 复制文件或目录
    {
        "key": "y",
        "command": "filesExplorer.copy",
        "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
    },
    // 粘贴文件或目录
    {
        "key": "p",
        "command": "filesExplorer.paste",
        "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
    },
    // --- 面板命令
    // 切换面板显示状态
    {
        "key": "alt+j alt+j",
        "command": "workbench.action.togglePanel"
    },
    // 最大化面板
    {
        "key": "alt+j alt+m",
        "command": "workbench.action.toggleMaximizedPanel"
    },
    // 显示问题
    {
        "key": "alt+j alt+1",
        "command": "workbench.panel.markers.view.focus"
    },
    // 显示输出
    {
        "key": "alt+j alt+2",
        "command": "workbench.action.output.toggleOutput",
        "when": "workbench.panel.output.active"
    },
    // 显示调试控制台
    {
        "key": "alt+j alt+3",
        "command": "workbench.debug.action.toggleRepl",
        "when": "workbench.panel.repl.view.active"
    },
    // 显示终端
    {
        "key": "alt+j alt+4",
        "command": "workbench.action.terminal.toggleTerminal",
        "when": "terminal.active"
    },
    // go to next change
    {
        "key": "alt+d",
        "command": "workbench.action.editor.nextChange",
        "when": "editorTextFocus && !textCompareEditorActive"
    },
    {
        "key": "alt+d",
        "command": "workbench.action.compareEditor.nextChange",
        "when": "textCompareEditorVisible"
    },
    // go to previous change
    {
        "key": "shift+alt+d",
        "command": "workbench.action.editor.previousChange",
        "when": "editorTextFocus && !textCompareEditorActive"
    },
    {
        "key": "shift+alt+d",
        "command": "workbench.action.compareEditor.previousChange",
        "when": "textCompareEditorVisible"
    },
    // open link
    {
        "key": "ctrl+shift+u",
        "command": "editor.action.openLink"
    }
]

解决 vim 中文输入法的问题 #

使用 vim 的一个痛点是当你从 INSERT 模式切换到 NORMAL 模式下,如果你在 INSERT 模式中使用的是中文输入法,那么退回到 NORMAL 模式,输入无效,NORMAL 模式只接受英文输入。

可以下载 im-select,根据 readme 安装。

我自己使用的是 windows,将 im-select 放到目录 C:\im-select\im-select.ext,然后在 vscode settings 中添加以下设置:

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

1033 是英文输入法的代码,需要在设置-语言中提前添加英语(美国)

使用上述配置,当退回到 NORMAL 模式,输入法会自动切换到英语输入。

不定期更新...

(完)

目录