鹏叔(https://www.pengtech.net)

导航

vscode基本配置指南

1. 介绍

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 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 原生高性能括号着色无缝迁移方案

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.

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

7. 配置 plugin

7.1. prettier

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,
    //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,

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

9. 相关阅读

vscode 常用快捷键

基于 Code-server 快速部署自己的云开发环境

如何升级 vscode

10. 参考文档

VScode 用户设置

posted on 2019-06-17 12:50  eagle.supper  阅读(292)  评论(0)  编辑  收藏  举报