VSCode安装和配置指南

• 1. 介绍
• 2. Windows 上安装 VSCode 安装
  • 2.1. 下载 VSCode
• 3. Fedora 上安装 VS Code
• 4. 如何打开配置
• 5. VScode 用户设置
  • 5.1. 设置字体大小
  • 5.2. 设置自动保存方式
  • 5.3. 设置自动补全
  • 5.4. 查询中过滤掉非必要的文件
  • 5.5. 过滤文件
  • 5.6. 关闭自动检测更新
  • 5.7. 配置大小写转换快捷键
  • 5.8. 配置快捷键
  • 5.9. 安装与配置主题
  • 5.10. 关闭 Open editor
  • 5.11. 在侧边栏快速定位文件
  • 5.12. vscode 整合 gitbash
  • 5.13. vscode 高亮括号对
• 6. 安装 plugins
  • 6.1. 插件列表
  • 命令行安装插件
• 7. 配置 plugin
  • 7.1. prettier - Code formatter
  • 7.2. 配置 prettier tabwidth
• 8. 完整配置
• 9. 相关阅读
• 10. 参考文档

1. 介绍

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

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

相关阅读:

• vscode 常用快捷键
• 如何升级 vscode

2. Windows 上安装 VSCode 安装

2.1. 下载 VSCode

VSCode 有两种版本

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

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

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

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

安装步骤:

双击 Installer 按指引安装

3. Fedora 上安装 VS Code

Fedora 上安装 VS Code 可以参考我的文章 - Fedora linux 上安装 Visual Studio Code

4. 如何打开配置

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

打开方式

• 方法一:通过菜单打开
  设置菜单位于 文件->首选项->设置.
  打开用户设置。VScode 支持选择配置，也支持编辑 setting.json 文件修改默认配置。个人更倾向于编写 json 的方式进行配置.
• 方法二: 使用快捷键打开
  打开设置的快捷键通常为: Ctrl+Alt+s, 打开配置面板后, 右上角有个 Open Settings(json)可以打开 settings.json.

vscode 有两种配置方式

• 一种是图形界面, 这种非常时候普通用户, 使用鼠标点击就能完成设置.
• vscode 也可以通过配置文件来进行配置, 配置文件为 json 格式的 settings.json

5. VScode 用户设置

5.1. 设置字体大小

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

"editor.fontSize": 14,

5.2. 设置自动保存方式

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

"files.autoSave":"onFocusChange",

5.3. 设置自动补全

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

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

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

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

5.5. 过滤文件

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

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

5.6. 关闭自动检测更新

"extensions.autoCheckUpdates": false,

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

编辑 keybindings.json

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

5.8. 配置快捷键

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

5.9. 安装与配置主题

以安装 Solarized Dark+ 主题为例:

1. 首先安装主题

   • 点开左侧边栏的 extentions
   • 搜索 Solarized 找到对应的插件然后安装

2. 然后配置主题

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

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

   • 或者直接修改 settings.json

     "workbench.colorTheme": "Solarized Dark+",

5.10. 关闭 Open editor

open editor 对我来说其实没有什么用处, 而占有了太多的侧边栏位置将 workspace 视图挤得只有一点点, 而且在顶部. 如果谁有更好的办法, 可以在评论区留言告诉我, 在此表示感谢!

而我使用 workspace 的频率远远大于 open editor, 即使我需要看那些打开的文件, 我也可以使用快捷键打开

"explorer.openEditors.visible": 0

5.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?

5.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"

5.13. vscode 高亮括号对

安裝插件：Bracket Pair Colorizer 2

// 開啟 bracket pair colorization；1.67 以上可省略此開啟設定
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active",
// 設定顏色
"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 原生高性能括号着色无缝迁移方案

6. 安装 plugins

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

6.1. 插件列表

插件	版本	安装命令	描述
Angular Snippets (Version 13)	v13.0.0	ext install johnpapa.Angular2	The extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML
gitlens	v11.7.0	ext install eamodio.gitlens	GitLens 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-keybindings	v1.5.0	ext install k–kato.intellij-idea-keybindings	Port of IntelliJ IDEA key bindings for VS Code. Includes keymaps for popular JetBrains products like IntelliJ Ultimate, WebStorm, PyCharm, PHP Storm, etc.
lebab	2.6.0	ext install mrmlnc.vscode-lebab	Lebab transpiles your ES5 code into readable ES2015 (sugar-syntax). It does exactly the opposite of what Babel does.
markdown-mermaid	v1.13.0	ext install bierner.markdown-mermaid	Adds Mermaid diagram and flowchart support to VS Code’s builtin markdown preview
bookmarks	v13.2.2	ext install alefragnani.bookmarks	Improve your Bookmarks experience with Tabnine code completions
formate: CSS/LESS/SCSS formatter(not requried for me I have replaced the formatters with Prettier which is more powerful)	v1.2.1	ext install mikebovenlander.formate	Formate is an CSS/LESS/SCSS format extension to format properties and align property values to improve readability.
Markdown All in One	v3.4.0	ext install yzhang.markdown-all-in-one	All you need for Markdown(keyboard shortcuts, table of contents, auto preview and more)
mardownlint	v0.47.0	ext install DavidAnson.vscode-markdownlint	Markdown/CommonMark linting and style checking for Visual Studio Code
Go	v0.33.1	ext install golang.go	Rich Go language support for Visual Studio Code
Bracket Pair Colorizer	v1.0.62	ext install CoenraadS.bracket-pair-colorizer	Rich Go language support for Visual Studio Code
rust-analyzer	v0.3.1301	ext install rust-lang.rust-analyzer	this extention provides support for the Rust programming language.
Gradle Language Support	v0.2.3	ext install naco-siren.gradle-language	Gradle Language Support
Import Cost	v3.3.0	ext install wix.vscode-import-cost	This 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 Highlighter	v1.0.1	ext install zerefdev.todo-highlighter	zerefdev.todo-highlighter
Todo Tree	v0.0.223	ext install Gruntfuggly.todo-tree	This 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 Hat	v0.2.3	ext install redhat.java	Provides Java ™ language support via Eclipse ™ JDT Language Server, which utilizes Eclipse ™ JDT, M2Eclipse and Buildship.
shell-format	v7.2.5	ext install foxundermoon.shell-format	A formatter for shell scripts, Dockerfile, gitignore, dotenv, /etc/hosts, jvmoptions, and other file types.
CodeCursor(Cursor for VS Code)	v0.4.0	ext install ktiays.aicursor	Cursor integration for Visual Studio Code.
vscode-icons	v12.3.0	ext install vscode-icons-team.vscode-icons	Bring icons to your Visual Studio Code and Icons Customization.
Prettier - Code formatter	v9.10.4	ext install esbenp.prettier-vscode	Prettier is an opinionated code formatter..
Colorize	v0.11.1	ext install kamikillerto.vscode-colorize	Instantly visualize css colors in your css/sass/less/postcss/stylus/XML… files.
indent-rainbow	v8.3.1	ext install oderwat.indent-rainbow	A simple extension to make indentation more readable.
live server	v5.7.9	ext install ritwickdey.LiveServer	Launch a local development server with live reload feature for static & dynamic pages.
Thunder Client	v2.10.0	ext install rangav.vscode-thunder-client	Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design.
Angular Language Service	v17.3.2	ext install Angular.ng-template	Angular Language Service.
Tailwind CSS IntelliSense	v0.10.5	ext install bradlc.vscode-tailwindcss	Tailwind CSS IntelliSense
XML	v0.26.1	ext install redhat.vscode-xml	XML Language Support by Red Ha

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

命令行安装插件

你知道你可以从终端安装 VSCode 插件吗？不过，现在你知道了！

要从你的终端安装扩展程序，你需要知道扩展程序名称和发布者名称，再按照 发布者名称.扩展程序名称 的顺序找到它。

先了解一下 vscode 插件相关命令

# 查看已安装的所有插件的列表
code --list-extensions

# 安装插件
# 请将<插件名称>替换为您要安装的插件的实际名称，将[版本号]替换为您要安装的特定版本号。
# 例如，如果要安装名为"Path Intellisense"的插件，版本号为"1.2.3"，则命令如下：
# code --install-extension path-intellisense@1.2.3
code --install-extension <插件名称>@[版本号]

# 安装最新版的插件
code --install-extension <插件名称>

# 要禁用单个插件，可以使用以下命令
code --disable-extension <在这里输入插件的ID>

# 如果要禁用所有插件，可以使用以下命令
code --disable-extensions

# 卸载个插件，可以使用以下命令
code --uninstall-extension <在这里输入插件的ID>

command lines to install necessary vscode plugins

code --install-extension johnpapa.Angular2
code --install-extension ryanolsonx.solarized
code --install-extension eamodio.gitlens
code --install-extension k--kato.intellij-idea-keybindings
code --install-extension bierner.markdown-mermaid
code --install-extension alefragnani.bookmarks
code --install-extension yzhang.markdown-all-in-one
code --install-extension DavidAnson.vscode-markdownlint
code --install-extension golang.go
code --install-extension naco-siren.gradle-language
code --install-extension wix.vscode-import-cost
code --install-extension zerefdev.todo-highlighter
code --install-extension Gruntfuggly.todo-tree
code --install-extension redhat.java
code --install-extension foxundermoon.shell-format
code --install-extension vscode-icons-team.vscode-icons
code --install-extension esbenp.prettier-vscode
code --install-extension kamikillerto.vscode-colorize
code --install-extension oderwat.indent-rainbow
code --install-extension ritwickdey.LiveServer
code --install-extension rangav.vscode-thunder-client
code --install-extension Angular.ng-template
code --install-extension redhat.vscode-xml

7. 配置 plugin

7.1. prettier - Code formatter

prettier 很强大, 配置也很灵活, 但是它的默认配置用起来并不是很顺手.
要配置一套适合自己项目的 prettier 几乎可以用一个文章的内容进行介绍.

7.2. 配置 prettier tabwidth

prettier 的默认 tabwidth 为 2 个字符, 这对大多数文档类型都不适合, 所以要将其修改为合适的字符.

例如:

"prettier.tabWidth": 4,

但是不同的文档类型, 可能需要 tabWidth. 此时可以在项目的根目录放置一个 prettier 配置文件, 为不同的文档类型定义不同的 tabwidth.

prettier.config.js

module.exports = {
    tabWidth: 4,
    overrides: [
        {
            files: "*.md",
            options: {
                tabWidth: 2,
            },
        },
    ],
};

prettier.config.js 是一个用 JavaScript 格式编写的配置文件。它也可以放在项目的根目录或任何子目录中。Prettier 将自动搜索此文件并使用它来配置自己。如果您的项目中同时有.pareterrc 和.pareter.config.js 文件，则以.pareterconfig.js 为优先。
也可以使用.prettierrc 作为配置文件, 但是写法稍有不同.
参考文档 https://prettier.io/docs/en/configuration.html#configuration-overrides

8. 完整配置

{
  "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,
    // tauri mobile build & cache
    "**/android/app/build/": true,
    "**/android/**/build/": true,
    "**/.angular/cache/": true,
    //hexo 生成的文件
    "public/**/*": true,
    "build/": true,
    "temp/": true,
    "library/": true,
    "**/*.anim": true,
    ".deploy_git/": true,
    "**/dist": true,
    "src-tauri/target/": true
  },
  "files.exclude": {
    "**/.git": true,
    "**/.idea": true,
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.angular": true
  },
  "gitlens.currentLine.scrollable": false,
  "gitlens.currentLine.pullRequests.enabled": false,
  "gitlens.currentLine.enabled": false,
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.codeLens.enabled": false,
  "workbench.editor.pinnedTabSizing": "shrink",
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.editor.labelFormat": "short",
  "workbench.settings.settingsSearchTocBehavior": "hide",
  "workbench.editor.wrapTabs": false,
  "workbench.iconTheme": "vscode-icons",
  "editor.indentSize": "tabSize",
  // 開啟 bracket pair colorization；1.67 以上可省略此開啟設定
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  // 設定顏色
  "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 Code formatter 配置
  "prettier.tabWidth": 4,
  "prettier.embeddedLanguageFormatting": "off",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[xml]": {
    "editor.defaultFormatter": "redhat.vscode-xml"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[python]": {
    "editor.formatOnType": true
  },
  "editor.formatOnSaveMode": "modificationsIfAvailable",
  "editor.trimAutoWhitespace": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
  // fix vscode hotkeys overrided by other app issue on fedora
  "keyboard.dispatch": "keyCode"
}

9. 相关阅读

• Vultr + Code-server 自建 Cloud IDE
• vscode 常用快捷键
• Fedora linux 上安装 Visual Studio Code
• 如何升级 vscode

10. 参考文档

VScode 用户设置

如何安装 VSCode 扩展 | Linux 中国