优雅的使用vscode（插件分享）

前言
美化类插件
帮助开发类插件
Docker
使用vscode优雅的编写Markdown
- Markdown实时预览
- Markdown贴图
其他配置

Author: 颖奇L’Amore

Blog: www.gem-love.com

MacOS高效使用文章合集：here

前言▸

我不是vscode的重度用户，平时基本是使用Goland IDEA之类的IDE写代码，vscode主要用来写小脚本（代码量较少）或者Markdown文档。

美化类插件▸

vscode-icons 可以给文件加图标

Atom One Light Theme 一个护眼主题
配置颜色：

{"[Atom One Light]": {
    "editor.background": "#C7EDCC",   
    "sideBar.background": "#C7EDCC",
    "activityBar.background": "#C7EDCC",       
    }
}

帮助开发类插件▸

Auto Close Tag 自动添加HTML和XML的闭合标签
Code Runner 一键运行代码
GitHub Copilot 帮助你的AI补全代码非常好用
Highlight Matching Tag 配对的标签自动匹配
open in browser 对于html等文件邮件点击open in browser直接浏览器打开
Output Colorizer 对输出的日志高亮
Sourcery 自动检测Python语法并可以优化
TODO Highlight 对TODO和FIXME高亮

其中，Copilot需要登录GitHub才能使用
Code Runner我的配置：

{
    "files.associations": {
        "*.py": "python"
    },
    "code-runner.clearPreviousOutput": true,
    "code-runner.saveAllFilesBeforeRun": true,
    "code-runner.executorMap": {
        "javascript": "node",
        "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
        "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "php": "php",
        "python": "/usr/bin/python3 -u",
        "perl": "perl",
        "perl6": "perl6",
        "ruby": "ruby",
        "go": "go run",
        "lua": "lua",
        "groovy": "groovy",
        "powershell": "powershell -ExecutionPolicy ByPass -File",
        "bat": "cmd /c",
        "shellscript": "bash",
        "fsharp": "fsi",
        "csharp": "scriptcs",
        "vbscript": "cscript //Nologo",
        "typescript": "ts-node",
        "coffeescript": "coffee",
        "scala": "scala",
        "swift": "swift",
        "julia": "julia",
        "crystal": "crystal",
        "ocaml": "ocaml",
        "r": "Rscript",
        "applescript": "osascript",
        "clojure": "lein exec",
        "haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
        "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
        "racket": "racket",
        "scheme": "csi -script",
        "ahk": "autohotkey",
        "autoit": "autoit3",
        "dart": "dart",
        "pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
        "d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
        "haskell": "runhaskell",
        "nim": "nim compile --verbosity:0 --hints:off --run",
        "lisp": "sbcl --script",
        "kit": "kitc --run",
        "v": "v run",
        "sass": "sass --style expanded",
        "scss": "scss --style expanded",
        "less": "cd $dir && lessc $fileName $fileNameWithoutExt.css",
        "FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"
    },
    "code-runner.runInTerminal": true,
    "python.defaultInterpreterPath": "/usr/bin/python3",
    "python.PythonPath" : "/usr/bin/python3"
}

Docker▸

Docker插件可以允许vscode直接访问并修改容器内的文件，或者attach shell进容器，启动镜像、容器等功能也是ok的，非常方便

使用vscode优雅的编写Markdown▸

Markdown实时预览▸

Markdown Preview Enhanced 插件允许实时预览Markdown

Markdown贴图▸

Paste Image插件允许你将图片直接复制进来,使用cmd option v便会自动文件创建到当前目录下并自动帮助你写上相关md语法来引入该图

但是我平时都是直接将图片存到远程图床，我使用的是七牛云（也可以用其他很多图床，imgur 微博 gitee等都是免费的，uPic都支持），下载uPic配置好开机自启动和相应图床。然后给upload from clipboard加一个快捷键例如我是shift+cmd+8

然后把output format改为Markdown

这样想要将图片插入md只要先用截图工具截图(我用的snipaste)，图片自动保存到剪切板，然后摁一下shift+cmd+8上传到图床，此时上传后的结果自动保存到剪切板，再直接cmd+v粘贴进来即可。当然，uPic的upload from screenshot更方便，直接截图+上传，设定一个快捷键(我是cmd+shift+9)直接就可以，对于直接贴一个图进来是比较方便的，如果需要对图片进行加工(加文字框框等)还是用第三方截图工具然后upload from clipboard。

其他配置▸

经常vscode打开文件夹提示不信任文件夹，可以直接禁用该功能

{
    "security.workspace.trust.untrustedFiles": "open",
    "security.workspace.trust.enabled": false
}

vscode打开TERMINAL可能加载不出来powerlevel10k的图标，这时可以看一下iTerm用的什么字体

然后将字体加入Font Family

{
    "editor.fontFamily": "MesloLGS NF, Menlo, Monaco, 'Courier New', monospace"
}