VSCode 常用插件和使用配置记录

2019年12月21日


# Django # Python # JavaScript # HTML # 工具 # Markdown # VSCode

Visual Studio Code ( 简称 VSCode ) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持大量插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

常用插件

功能类

  • Settings Sync 同步/备份你当前的 VSCode配置环境到你的 GitHub账户,更换电脑或重装系统后,一键恢复所有 VSCode 配置和插件。
  • Auto Rename Tag Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
  • Azure Repos Connect to Azure Repos and work with Git and Team Foundation Version Control (TFVC) repositories. Manage your pull requests, work items, and more.
  • Beautify Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.
  • Bracket Pair Colorizer A customizable extension for colorizing matching brackets
  • C# FixFormat This extension helps to format C# code. When OmniSharp will support all features - will be deprecated.
  • Chinese (Simplified) Language Pack for Visual Studio Code 此中文(简体)语言包为 VS Code 提供本地化界面。
  • Color Highlight Highlight web colors in your editor
  • Color Info Provides quick information about css colors
  • CSS Peek Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
  • Debugger for Chrome Debug your JavaScript code running in Google Chrome from VS Code.
  • Document This Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.
  • ESLint Integrates ESLint JavaScript into VS Code.
  • Git History View git log, file history, compare branches or commits
  • GitLens — Git supercharged Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
  • HTML CSS Support CSS support for HTML documents
  • HTML Snippets Full HTML tags including HTML5 Snippets
  • HTMLHint VS Code integration for HTMLHint - A Static Code Analysis Tool for HTML
  • IntelliSense for CSS class names in HTML CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
  • jQuery Code Snippets Over 130 jQuery Code Snippets for JavaScript code.
  • jshint Integrates JSHint into VS Code. JSHint is a linter for JavaScript
  • Markdown All in One All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
  • Markdown Preview Enhanced Markdown Preview Enhanced ported to vscode
  • markdownlint Markdown linting and style checking for Visual Studio Code
  • Path Intellisense Visual Studio Code plugin that autocompletes filenames
  • Rainbow Brackets 为括号(包括圆括号,方括号和大括号)提供配对的彩虹色。

主题类

使用配置记录

不同代码文件 Tab 键设定

settings.json 中添加以下代码:

"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.detectIndentation": false,
"[html]": {
        "editor.tabSize": 4
},
"[css]": {
        "editor.tabSize": 4
},
"[json]": {
        "editor.tabSize": 4
},
"[javascript]": {
        "editor.tabSize": 2
},
"[typescript]": {
        "editor.tabSize": 2
},
"[markdown]": {
        "editor.tabSize": 2
}

鼠标滚轮滚动行数

settings.json 中添加以下代码:

"editor.mouseWheelScrollSensitivity": 3,

字体设置

settings.json 中添加以下代码(前提条件是系统已经安装或存在下面的字体):

"editor.fontFamily": "'Fira Code',Consolas, 'Courier New',Monaco,monospace",

标题栏显示文件全路径名

settings.json 中添加以下代码:

"window.title": "${activeEditorLong}"

文件自动保存

如果要在焦点切换出当前文档就保存,在 settings.json 中添加以下代码:

"files.autoSave": "onFocusChange"

HTML 中 CSS Class 智能提示

  1. 安装插件:HTML CSS Support
  2. settings.json 中添加以下代码:
"editor.parameterHints": true,
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true

查看 HTML 样式在 CSS 中的定义

安装插件:CSS Peek,当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

菜单/侧边栏等字体大小调整

VS Code 默认的菜单、左侧管理器等栏目字体是11px,感觉字体稍小,尤其在暗调主题下,难以识别。可以根据自己的需要修改默认配置文件,得到合适的显示效果。

修改样式文件修改权限

  • 找到VS Code工作区配置文件,位于:安装目录\VSCode\resources\app\out\vs\workbench\workbench.main.css
  • 对文件增加修改权限,具体:右键属性-->安全-->编辑(更改权限)--见下图

workbench.main.css

修改样式文件配置

  • 打开workbench.main.css文件,搜索/替换所有11px12px或者自己认为合适的值,这样比较简单,总共有超过30多处
  • 另外一种方式:菜单->帮助->切换开发人员工具,找到需要修改的地方对应的样式表文件内容并修改

修改后遗症

  • VS Cdoe 编辑器标题栏会显示[不受支持],不过不影响使用

调试出现各种变量未定义错误

解决办法:调试界面,断点,取消选择“Uncaught Exceptions”选项