vscode常用使用指南(持续更新...)

一、常用插件

使用键盘快捷键CMD+SHIFT+X或点击菜单View->Extensions进入插件管理

插件名称	用途
Auto Close Tag	自动给XML/HTML增加结束的tag
Auto Rename Tag	自动给XML/HTML重命名tag
Bracket Pair Colorizer	为匹配的括号着色
Code Runner	可以直接执行C, C++, Java, JS, PHP, Python等代码
Debugger for Chrome	在Chrome浏览器debug你的js代码
Eslint	js代码格式化或验证
GitLens — Git supercharged	git功能扩展
Highlight Matching Tag	高亮显示匹配的tag
Image preview	图片预览
indent-rainbow	代码缩进时的彩虹样式展示
IntelliJ IDEA Keybindings	IDEA快捷键
JavaScript (ES6) code snippets	ES6标准的js代码块
Code Runner	直接直接运行python、c、c++等代码
Chinese (Simplified) Language Pack for Visual Studio Code	此中文（简体）语言包为 VS Code 提供本地化界面
Material Icon Theme	Icon样式
npm	node包管理
One Dark Pro	全局样式
open in browser	在浏览器打开当前文件
Path Intellisense	自动补全文件的绝对路径
Project Manager	项目管理
Pylance	python的高性能处理扩展
Code Runner	python语言支持
Settings Sync	vscode settings多终端同步
Tiny Light	全局样式
Visual Studio IntelliCode	vscode开发辅助

二、编辑器基础配置

效果预览

{
    "workbench.iconTheme": "material-icon-theme",
    // "editor.fontFamily": "'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontFamily": "JetBrains Mono",
    "editor.fontSize": 12,
    "editor.fontLigatures": true,
    // oh my zsh相关配置
    "terminal.integrated.shell.osx": "zsh",
    // "terminal.integrated.fontFamily": "Meslo LG M for Powerline",
    "terminal.integrated.fontFamily": "JetBrains Mono",
    // 空格部分显示小黑点
    "editor.renderWhitespace": "all",
    // 重新设定tabsize
    "editor.tabSize": 2,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 每次保存的时候自动格式化
    "editor.formatOnSave": true,
    // 每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    "highlight-matching-tag.styles": {
        "opening": {
            "left": {
                "custom": {
                    "borderWidth": "0 0 0 1.5px",
                    "borderStyle": "solid",
                    "borderColor": "yellow",
                    "borderRadius": "5px",
                    "overviewRulerColor": "white"
                }
            },
            "right": {
                "custom": {
                    "borderWidth": "0 1.5px 0 0",
                    "borderStyle": "solid",
                    "borderColor": "yellow",
                    "borderRadius": "5px",
                    "overviewRulerColor": "white"
                }
            }
        }
    },
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "vue",
        "html",
        "typescript"
    ],
    // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatterOptions": {
        "wrap_attributes": "force-aligned",
        "js-beautify-html": {
            // - auto: 仅在超出行长度时才对属性进行换行。
            // - force: 对除第一个属性外的其他每个属性进行换行。
            // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
            // - force-expand-multiline: 对每个属性进行换行。
            // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
            "wrap_attributes": "force-expand-multiline"
            // #vue组件中html代码格式化样式
        }
    },
    "python.pythonPath": "/Users/xxx/Virtualenv/common-py3/bin/python",
    "python.languageServer": "Pylance",
    // python-代码检查
    "python.linting.pylintEnabled": false,
    "python.linting.flake8Enabled": true,
    "python.linting.flake8Path": "/Users/xxx/Virtualenv/common-py3/bin/flake8",
    "python.linting.flake8Args": [
        "--max-line-length=79"
    ],
    // python-格式化
    "python.formatting.provider": "yapf",
    "python.formatting.yapfPath": "/Users/xxx/Virtualenv/common-py3/bin/yapf",
    "editor.suggestSelection": "recentlyUsedByPrefix",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    // 工作台配置
    "workbench.colorTheme": "One Dark Pro",
    "workbench.colorCustomizations": {
        "scrollbarSlider.activeBackground": "#62fa1b",
        "scrollbarSlider.hoverBackground": "#fa2a1b",
        "scrollbarSlider.background": "#c97554",
        "editor.selectionBackground": "#404e3a",
        "editor.lineHighlightBackground": "#51524e",
        "minimap.selectionHighlight": "#5ae224"
    },
}

三、自动生效python虚拟环境

在python项目的根目录新建.vscode目录，并在目录中新建settings.json，在json文件中添加：

{
		"python.pythonPath": "/Users/xxx/Virtualenv/common-py3/bin/python"
}

此时，当打开Terminal时将自动生效指定目录的python环境

四、在vscode中使用JetBrains Mono字体

官网：https://github.com/JetBrains/JetBrainsMono

• macos系统

brew tap homebrew/cask-fonts
brew cask install font-jetbrains-mono

• windows系统

choco install jetbrainsmono

• 离线安装

  • 下载字体库：https://github.com/JetBrains/JetBrainsMono/releases/latest
  • 解压
  • mac系统，双击所有字体文件。
  • windows系统，右键安装所有字体文件。
  • linux系统，/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/install_manual.sh)"

• vscode中生效

在settings.json中添加

{
		"editor.fontFamily": "JetBrains Mono",
		"editor.fontLigatures": true,
}