vscode基本配置指南

guoapeng
526 阅读8分钟

1. 介绍

vscode可以做很多事, 是真正的生产力工具, 但是如何将其配置得好用并符合自己的需求, 却是很复杂的一件事. 它的默认模式就像一辆自动挡的汽车, 不做任何改动也能开着上路, 如果想压榨一下它的生产力, 还是要懂得一些配置相关的知识或技巧.

VSCode安装

下载VSCode

VSCode有两种版本

  • User Installer版：会安装在当前计算机帐户目录,意味着如果使用另一个账号登陆计算机将无法使用别人安装的vscode。

  • System Installer版：安装在非用户目录,例如C盘根目录,任何帐户都可以使用。(建议使用此版本)

  • vscode默认提供的User Installer版,大多数人都是用的这个版本。

  • 下载地址code.visualstudio.com/download

安装步骤:

双击Installer按指引安装

2. 如何打开配置

vscode的配置入口并不在一个很显眼或很容易找到的地方, 它位于一个与配置不太关联的主菜单下的二级菜单, 这也是为什么此处要单独劈开一节介绍如何打开配置得原因.

  • 打开方式
    • 方法一:通过菜单打开 设置菜单位于 文件->首选项->设置. 打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修改默认配置。个人更倾向于编写json的方式进行配置.
    • 方法二: 使用快捷键打开 打开设置的快捷键通常为: Ctrl+Alt+s, 打开配置面板后, 右上角有个Open Settings(json)可以打开settings.json.
  • vscode 有两种配置方式, 一种是图形界面, 这种非常时候普通用户, 使用鼠标点击就能完成设置. vscode也可以通过配置文件来进行配置, 配置文件为json格式的settings.json

3. VScode用户设置

3.1. 设置字体大小

（1）editor.fontsize用来设置字体大小，可以设置editor.fontSize : 14;

      "editor.fontSize": 14,

3.2. 设置自动保存方式

（2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。

    "files.autoSave":"onFocusChange",

3.3. 设置自动补全

（3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;

3.4. 查询中过滤掉非必要的文件

vscode的搜索页面位于左侧, 本来就很窄很拥挤, 如果再出现一些明显非必要的结果,更显得拥挤不堪, 所以非常有必要做一些过滤, 这样每次的搜索可以直达目标, 省去一些手动折叠文件, 鼠标向下滚动等等操作, 非常有帮助. 当然你说连代码的产出物也是你搜索的范围, 目前来说我没有想出什么更好的办法, 只有使用快捷键打开配置, 将这些过滤条件关闭掉, 也不用重启, 每隔数秒配置会自动生效.

"search.exclude": {       
        "**/node_modules": true,
        "**/bower_components": true,
        "build/": true,
        "temp/": true,
        "library/": true
    },

3.5. 过滤文件

有些文件是系统,或者某些工具使用的配置文件, 我们不常使用, 将其列在项目中会分散注意力, 其实我们完全可以将这些文件从项目文件中将其忽略掉, 比如.git配置文件对象树, .idea配置文件, 这些文件我们几乎平时很少修改, 也不必去关心, 可以将其设置为忽略.

 "files.exclude": {
        "**/.git": true,
        "**/.idea": true
    }

3.6. 关闭自动检测更新

"extensions.autoCheckUpdates": false,

3.7. 配置大小写转换快捷键

编辑keybindings.json

{
        "key": "ctrl+shift+l",
        "command": "editor.action.transformToLowercase"
    },
    {
        "key": "ctrl+shift+u",
        "command": "editor.action.transformToUppercase"
    }

3.8. 配置快捷键

打开快捷键配置 file -> preference -> keyboard shotcuts 也可以通过配置文件进行配置keybindings.json

3.9. 安装与配置主体

  • 以安装panda主体为例:
  • 首先安装主题
    • 点开左侧边栏的extentions
    • 搜索panda theme找到对应的插件然后安装
  • 然后配置主题

    • 打开颜色主题, 选择Panda作为主题

    • 或者使用快捷键Ctl+Shift+p 打开命令面板,输入color theme 然后选择PandaSyntax

    • 或者直接修改settings.json

        "workbench.colorTheme": "Panda Syntax",

    • 说明在最终设置中我还是使用的 Solarized Dark 这个主题, 比较习惯它的风格.

3.10. 关闭Open editor

open editor对我来说其实没有什么用处, 而占有了太多的侧边栏位置将 workspace视图挤得只有一点点, 而且在顶部.
而我使用workspace的频率远远大于open editor, 即使我需要看那些打开的文件, 我也可以使用快捷键打开

"explorer.openEditors.visible": 0

3.11. 在侧边栏快速定位文件

虽然右键点击标签页,选择reveal in sidebar可以定位到侧边栏, 我希望给它定义一个快捷键, 这样可以减少鼠标操作. 取这个功能reveal的首字母构成一个快捷键组合Ctrl + Alt + r 修改keybindings.json

    {
        "key": "ctrl+alt+r",
        "command": "workbench.files.action.showActiveFileInExplorer"
    }

参考文档: How to reveal current file in Explorer?

3.12. vscode整合gitbash

打开用户设置: File -> Preference -> settings, 切换到json模式

添加如下配置到Settings并保存, 其中bash.exe的路径根据自己实际安装位置做相应替换.

"terminal.integrated.profiles.windows": {
        "Git-Bash": {
            "path": "C:\\Program Files\\Git\\usr\\bin\\bash.exe"
        }
    },
    "terminal.integrated.defaultProfile.windows": "Git-Bash"

3.13. vscode高亮括号对

    // 開啟 bracket pair colorization；1.67 以上可省略此開啟設定
    "editor.bracketPairColorization.enabled": true,
    // 設定顏色
    "workbench.colorCustomizations": {
        // 層級括號顏色，從 1 至 6 層，此處只設定了 5 層
        "editorBracketHighlight.foreground1": "#ffd700",
        "editorBracketHighlight.foreground2": "#DC143C",
        "editorBracketHighlight.foreground3": "#87cefa",
        "editorBracketHighlight.foreground4": "#ffd700",
        "editorBracketHighlight.foreground5": "#da70d6",
        "editorBracketHighlight.foreground6": "#87cefa",
        // 異常括號的顏色，比如多出來的結尾括號
        "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000",
    }

参考文章: VS Code 開啟效能提升 1 萬倍的「內建」bracket pair colorization
vscode1.60原生高性能括号着色无缝迁移方案

4. 安装plugins

Angular Snippets (Version 13) Go Intellij IDEA Keybindings Markdown Preview Mermaid Support

4.1. 插件列表

插件版本安装命令描述
Angular Snippets (Version 13)v13.0.0ext install johnpapa.Angular2The extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML
gitlensv11.7.0ext install eamodio.gitlensGitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.
intellij-idea-keybindingsv1.5.0ext install k--kato.intellij-idea-keybindingsPort of IntelliJ IDEA key bindings for VS Code. Includes keymaps for popular JetBrains products like IntelliJ Ultimate, WebStorm, PyCharm, PHP Storm, etc.
lebab2.6.0ext install mrmlnc.vscode-lebabLebab transpiles your ES5 code into readable ES2015 (sugar-syntax). It does exactly the opposite of what Babel does.
markdown-mermaidv1.13.0ext install bierner.markdown-mermaidAdds Mermaid diagram and flowchart support to VS Code's builtin markdown preview
bookmarksv13.2.2ext install alefragnani.bookmarksImprove your Bookmarks experience with Tabnine code completions
formate: CSS/LESS/SCSS formatter(not requried for me replaced by Prettier)v1.2.1ext install mikebovenlander.formate~~ Formate is an CSS/LESS/SCSS format extension to format properties and align property values to improve readability. ~~
Markdown All in Onev3.4.0ext install yzhang.markdown-all-in-oneAll you need for Markdown(keyboard shortcuts, table of contents, auto preview and more)
mardownlintv0.47.0ext install DavidAnson.vscode-markdownlintMarkdown/CommonMark linting and style checking for Visual Studio Code
Gov0.33.1ext install golang.goRich Go language support for Visual Studio Code
Bracket Pair Colorizerv1.0.62ext install CoenraadS.bracket-pair-colorizerRich Go language support for Visual Studio Code
rust-analyzerv0.3.1301ext install rust-lang.rust-analyzerthis extention provides support for the Rust programming language.
Gradle Language Supportv0.2.3ext install naco-siren.gradle-languageGradle Language Support
Import Costv3.3.0ext install wix.vscode-import-costThis extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.
Todo Highlighterv1.0.1ext install zerefdev.todo-highlighterzerefdev.todo-highlighter
Todo Treev0.0.223ext install Gruntfuggly.todo-treeThis extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).
Language Support for Java(TM) by Red Hatv0.2.3ext install redhat.javaProvides Java ™ language support via Eclipse ™ JDT Language Server, which utilizes Eclipse ™ JDT, M2Eclipse and Buildship.
shell-formatv7.2.5ext install foxundermoon.shell-formatA formatter for shell scripts, Dockerfile, gitignore, dotenv, /etc/hosts, jvmoptions, and other file types.
CodeCursor(Cursor for VS Code)v0.4.0ext install ktiays.aicursorCursor integration for Visual Studio Code.
vscode-iconsv12.3.0ext install vscode-icons-team.vscode-iconsBring icons to your Visual Studio Code and Icons Customization.
Prettier - Code formatterv9.10.4ext install esbenp.prettier-vscodePrettier is an opinionated code formatter..
Colorizev0.11.1ext install kamikillerto.vscode-colorizeInstantly visualize css colors in your css/sass/less/postcss/stylus/XML... files.
indent-rainbowv8.3.1ext install oderwat.indent-rainbowA simple extension to make indentation more readable.
live serverv5.7.9ext install ritwickdey.LiveServerLaunch a local development server with live reload feature for static & dynamic pages.

Ctrl+shift+p 或者按F1 打開命令行提示框， 輸入安裝命令進行插件安裝

5. 完整配置

{
    "editor.minimap.enabled": false,
    "editor.fontSize": 14,
    "breadcrumbs.enabled": true,
    "editor.renderControlCharacters": true,
    "editor.renderWhitespace": "none",
    "workbench.colorTheme": "Solarized Dark",
    "update.mode": "none",
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "extensions.autoCheckUpdates": false,
    "files.autoSave": "onFocusChange",
    "search.exclude": {       
        "**/node_modules": true,
        "**/bower_components": true,
        //hexo 生成的文件
        "**/db.json": true,
        //hexo 生成的文件
        "public/**/*": true,
        "build/": true,
        "temp/": true,
        "library/": true,
        "**/*.anim": true
    },
    "files.exclude": {
        "**/.git": true,
        "**/.idea": true,
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true
    },
    "gitlens.currentLine.scrollable": false,
    "gitlens.currentLine.pullRequests.enabled": false,
    "gitlens.currentLine.enabled": false,
    "gitlens.hovers.currentLine.over": "line",
    "gitlens.codeLens.enabled": false,
    // 開啟 bracket pair colorization；1.67 以上可省略此開啟設定
    "editor.bracketPairColorization.enabled": true,
    // 設定顏色
    "workbench.colorCustomizations": {
        // 層級括號顏色，從 1 至 6 層，此處只設定了 5 層
        "editorBracketHighlight.foreground1": "#ffd700",
        "editorBracketHighlight.foreground2": "#DC143C",
        "editorBracketHighlight.foreground3": "#87cefa",
        "editorBracketHighlight.foreground4": "#ffd700",
        "editorBracketHighlight.foreground5": "#da70d6",
        "editorBracketHighlight.foreground6": "#87cefa",
        
        // 異常括號的顏色，比如多出來的結尾括號
        "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000",
    },
    "terminal.integrated.profiles.windows": {
        "Git-Bash": {
            "path": "C:\\Program Files\\Git\\usr\\bin\\bash.exe"
        }
    },
    "terminal.integrated.defaultProfile.windows": "Git-Bash",
    "prettier.tabWidth": 4
}

6. 说明

本文原文位于鹏叔的技术博客空间 - vscode基本配置指南, 若要获取最近更新请访问原文.

7. 参考文档

VScode用户设置

avatar
文章
阅读
粉丝