vscode 插件安装原创
vscode 插件安装
# 通用
# Power Mode
光标抖动特效
// setting.json
// powermode 配置开始
"powermode.enabled": true, // 开启输入抖动
"powermode.shake.enabled": false, // 关闭窗口抖动
"powermode.presets":"particles", // 光标抖动样式
"powermode.combo.location": "off", // 关闭窗口右上角统计，但是这样抖动的颜色就不会改变了
// powermode 配置结束
# Chinese (Simplified) Language Pack for Visual Studio Code
作为中国人，不用解释了吧。
# compareit
快速比较两个代码文件不同。
- 在文件栏中选中文件，右击，选择
compare with cliboard。则会将当前编辑窗口内容与所选文件进行
对。 - 在文件栏中选中文件，右击，选择
compare with。则会将选中的文件与弹窗选中的文件进行对比。
# TODO Highlight
高亮显示TODO内容
# Bookmarks
为代码块添加标签
# Bracket Pair Colorizer
成对的大括号标记成不同的颜色！
# indent-rainbow
方便查看代码缩进，用五颜六色的色块来对代码的缩进做区分的。
# Activitus Bar
在 vscode 状态栏中显示侧边栏。
关闭侧边栏，在设置中搜索 activity , 取消 workbench > activity bar > Visible .
注意：当侧边栏有其他插件时，状态栏不会有其他插件的图标，如：LaTeX Workshop。
# Svg Preview
Svg 图片预览。
"svgPreview.autoOpen": true, // 自动打开预览
"svgPreview.style": {
"html": {
"background": "white" // 设置背景色为白色
}
}
# Color Highlight
代码中使用 hex 格式颜色时， 直接在 hex 颜色处显示起颜色背景。
# Markdown
Markdown All in One
Markdown Preview Github Styling
以github页面风格显示markdown文档。
Markmap
将 Markdown 语法的文本通过思维导图的方式进行可视化。
点击
vscode窗口的分支图标，即可预览对应md文件所生成的思维导图。在预览页面点击
export即可导出生成相应的html文件。
# c/c++
C/C++ for Visual Studio Code
来自微软官方的 C/C++ 插件，必备的插件，如果不安装，代码无法跳转，也没有自动补全。
C++ Intellisense
对官方工具的补充，对以下工具功能增强：
- 跳转到定义；
- 代码自动补全；
- 查找代码引用；
- 列举 symbols；
# vue
vue3 +ts
用于 VUE3 TS 代码提示。Vue Language Features (Volar)
TypeScript Vue Plugin (Volar)可以将代码片段切开，即使 template 与 script 分屏显示。
注意禁用 Vetur ，这是用于 VUE2 的代码提示。
# setting
VUE文件格式化
/// setting.json
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
若使用了 prettier 则取消该设置。
# taliwind css
Tailwind CSS IntelliSense
# prettier
自动格式化
// setting.json 中的配置
"editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化插件
"editor.formatOnPaste": true,
"editor.formatOnSave": true, // 开启自动保存
// prettier 配置
"prettier.printWidth": 80, // prettier 宽度
"prettier.singleQuote": true, // prettier 可以单引号
"prettier.semi": false, // prettier 设置语句末尾不加分号
"prettier.trailingComma": "none", // prettier 去掉最后一个逗号
// prettier 配置结束
# LaTeX Workshop
用于 Latex 。编译快捷键为：mac: win + alt + b
// setting.json
// LaTeX 配置开始
"latex-workshop.latex.autoBuild.run": "never", // 取消保存的时候自动编译
// "latex-workshop.message.error.show": false, // 编译出错时弹窗取消
// "latex-workshop.message.warning.show": false,// 编译警告时弹窗取消
// latex-utilities.liveReformat.enabled 开启latex代码自动补全
"latex-workshop.latex.tools": [
//latex 编译工具命令
{
"name": "xelatex",
"command": "xelatex", // 程序在电脑中的位置 绝对路径
"args": [
"-synctex=1",
"-interaction=nonstopmode",
"-file-line-error",
"-no-pdf", // 不生成PDF 否则 SVG 乱码
"%DOCFILE%"
]
},
{
"name": "pdflatex",
"command": "pdflatex", // 程序在电脑中的位置 绝对路径
"args": [
"-synctex=1",
"-interaction=nonstopmode",
"-file-line-error",
"-output-format=dvi",
"%DOCFILE%"
]
},
{
"name": "bibtex",
"command": "bibtex", // 程序在电脑中的位置 绝对路径
"args": ["%DOCFILE%"]
},
// 使用 dvisvgm 生成 SVG
{
"name": "dvisvgm",
"command": "dvisvgm", // 程序在电脑中的位置 绝对路径
"args": [
// "--synctex=1",
"--zoom=1",
"--exact",
// "--font-format=woff",
"%DOCFILE%.xdv"
]
}
],
// latex 编译方式 顺序
"latex-workshop.latex.recipes": [
// 使用 dvisvgm 将DVI转为 SVG
{
"name": "xdv->svg",
"tools": ["xelatex", "dvisvgm"]
}
],
"latex-workshop.showContextMenu": true, // 将`编译`放到鼠标右键中 快捷键 mac: win + alt + b
// latex 配置结束
# LaTex Utilities
结合 LaTeX Workshop 实现 Latex 的代码简写。
在要开启插件的 latex-utilities.liveReformat.enabled。
同时需要注意的是无法再 tikzpicture 中直接实现补全，要想在 tikzpicture 中实现自动补全，请在 \( \) 中实现。不过图像是颠倒的！！
点击查看
\documentclass[dvisvgm]{standalone}
\usepackage{tikz }
\begin{document}
\begin{tikzpicture}[> = latex, scale = .5]
\draw [fill=red](-4,0)node[above]{$C$}--(0,3)node[right]{$B$}--(4,0)node[above]{$A$}--(0,-3)node[right]{$D$}--(-4,0);
\( a \times b \frac{1}{} \)
\end{tikzpicture}
\end{document}
简写预览：
点击查看
| Trigger | Replacement |
|---|---|
| a1 | a_1 |
| a_11 | a_{11} |
| a ^ | a^ |
| a^11 | a^{11} |
| a+ | a + |
| a +b | a + b |
| ... | \dots |
| => | `\implies |
| =< | \impliedby |
| // | \frac{}{} |
| .../ | \frac{...}{} |
| iff | \iff |
| inn | \in |
| notin | \not\in |
| != | \neq |
| == | &= |
| ~= | \approx |
| ~~ | \sim |
| >= | \geq |
| <= | \leq |
| >> | \gg |
| << | \ll |
| xx | \times |
| ** | \cdot |
| to | \to |
| -> | \to |
| -> | |
| !> | \mapsto |
| sin | \sin |
| v,. | \vec{v} |
| abar | \overline{a} |
| ahat | \hat{a} |
| a~ | \tilde{a} |
| a. | \dot{a} |
| a.. | \ddot{a} |
| ...)a | ...) a |
| \|\setminus | |
| pmat | pmatrix |
| part | \frac{\partial }{\partial } |
| sq | \sqrt{} |
| sr | ^2 |
| cb | ^3 |
| EE | \exists |
| AA | \forall |
| aii | a_i |
| aip1 | a_{i+1} |
| set | { } |
| <> | \diamond |
| case | cases env. |
| st | \text{s.t.} |
| +- | \pm |
| -+ | \mp |
| nCr | \binom{n}{r} |
# Manim Sideview
# setting
// settings.json
// manim-sideview settings start
"manim-sideview.runOnSave": true, // 保存时运行
"manim-sideview.commandLineArgs": "-ql", // 视频质量 编辑时设置为 -ql ,这样渲染快
// "manim-sideview.commandLineArgs": "-qh", // 生成发布视频时设置为 -qh ，这样视频质量高
"manim-sideview.videoDirectory": "media/videos/{module_name}/480p15",
"manim-sideview.defaultManimPath": "/Users/carveybunt/Library/Python/3.8/bin/manims", // manim 执行程序绝对路径
// manim-sideview settings end
Command Line Args
视频质量- -ql
480P15 - -qh
1080p60
- -ql
Default Manim Path: The absolute path to the manim executable.
设置 manim 执行文件的绝对路径，例如:
/Users/用户名/Library/Python/3.8/bin/manim
# 使用
当打开任何 python 文件时，按下默认设置的 ctrl + r 快捷键，选择要执行的路径。
# 必须引入 manim
from manim import *
点击 vscode 窗口右上角插件图标运行。
# 打开动画库
mac 中 win+shift+p 输入 Show Mobject Gallery For manim。可以进行对应的快捷键设置，便于下次打开
# 切换其他类
第一次运行 manim-sideview 插件时，会出现选择要运行那个类的操作。
但是之后点击 manim-sideview 插件图标运行时，则不会出现。
此时要是想更换运行其他类，则需要点击 vscode 状态栏的 Active Job 图标按钮，以清楚当前运行的缓存，再次点击 manim-sideview 插件图标运行才会出现选择运行类的操作框。
# 多命令
若是想要在执行时添加额外没拿过来，则需要手动设置：
- 打开
vscode设置，找到插件manim-sideview，在其Manim-sideview: Command Line Args中添加对应的命令参数即可。 - 注意：各参数之间需要使用
" "隔开。参看github issues (opens new window)。例如：-ql" "-s。
# python
python 使用 vscode 开发时，需要安装的插件。
# python
# pylance
用于 python 代码提示。
# 引入指定第三方库
// settings.json
"python.analysis.extraPaths": ["manim"] // manim 是第三方库的执行路径
← 安装 vscode 快捷键→
