戊成的BLOG
VS Code环境及插件
Wucheng
  2022-02-17 11:16:17   2024-11-30 17:19:24

C语言

使用vscode写C语言，首先要下载MinGW安装编译器

但是由于使用MinGW安装编译器实在太慢了，此处建议最好搜索直接下载

然后配置系统环境，右键此电脑-属性-高级系统设置-环境变量，在系统变量里添加编译器的地址，如:C:\MinGW\bin

随后就是配置vscode的环境
首先新建一个文件夹 .vscode，然后建两个文件 launch.json和 tasks.json把以下代码粘贴进去

launch.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "(Windows) Launch",
            "type": "cppvsdbg",
            "request": "launch",
            "program": "cmd",
            "preLaunchTask": "echo",
            "args": [
                "/C",
                "${workspaceFolder}/exe/${fileBasenameNoExtension}.exe",
                "&",
                "echo.",
                "&",
                "pause"
            ],
            "stopAtEntry": false,
            "cwd": "${workspaceFolder}\\exe\\",
            "environment": [],
            "externalConsole":true
        },
        {
            "name": "(gdb) Launch",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}\\exe\\${fileBasenameNoExtension}.exe", // workspacefolder为.vscode所在的文件夹,将要进行调试的程序的路径
            "args": [],
            "stopAtEntry": false,
            "cwd": "${workspaceFolder}\\exe\\",
            "environment": [],
            "externalConsole": true,
            "MIMode": "gdb",
            "miDebuggerPath": "D:\\Program Files\\CodeBlocks\\MinGW\\bin\\gdb.exe",// 自己电脑的gdb
            "preLaunchTask": "echo",//这里和task.json的label相对应
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ]
 
        }
    ]
}

tasks.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "gcc",
            "args": [
                "-g", 
                "${file}", 
                "-o", 
                "${workspaceFolder}/exe/${fileBasenameNoExtension}.exe",
                "-fexec-charset=GBK"//解决中文乱码
            ]
        }
    ],
    "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared", 
        "showReuseMessage": true,
        "clear": false
    }
}

注意事项

  • 记得把 "miDebuggerPath"后的路径改成自己编译器所在的位置
  • 为了看起来好看，我分开exe文件和源码文件，在 launch.json中我把输出放在了exe文件夹中，所以除了 .vscode文件还需要建一个 exe文件夹（当然如果喜欢源码和exe堆在一块那把上面带exe的全删掉就好了应该没有人会喜欢文件夹看起来特别乱吧）
  • 千万不要用中文命名！千万不要用中文命名！！千万不要用中文命名！！！

写HTML

这里强烈推荐两个插件
Live Server和 Preview on Web Server

Live Server配上vscode的自动保存可以实时查看修改的结果，就不用自己再去游览器F5了

而Preview on Web Server可以让你再vscode里面直接预览（就像写markdown一样），再也不用alt tab在vscode和游览器之间换来换去了！

安装好这两个插件后只需要在代码界面右键-Preview on side panel

Java

vscode对于Java的支持简直不要太贴心（比C语言好太多了），当安装好JDK后安装vscode关于Java的插件

然后 Ctrl+Shift+P在框内输入Java-创建Java项目-No build tools创建完成，然后就能直接开写了

当然，开始要记关键词的时候最好用vscode，熟悉了Java后还是更推荐用IDEA

Vue

vue的插件有两个，一个是Vetur，还有一个是 Vue 3 Snippets

Vetur可以在文件中直接打vetur通过提示直接把vue文件应有的框架直接搭出来

另一个插件则有丰富的代码片段

缩进配置

当然，如果仅安装了Vetur是不行的，有可能它的缩进你极难忍受，所以我们需要手动的修改一下配置，在VScode中的settings.json中添加如下配置

1
2
3
4
"vetur.format.scriptInitialIndent": false, // js部分是否有初始缩进
"vetur.format.styleInitialIndent": false, // style部分是否有初始缩进
"vetur.format.options.tabSize": 4, //缩进大小
"vetur.format.options.useTabs": false,

愉快的敲代码

TabOut

在IDEA中，我们打了一个括号/大括号后，写完内容后想让光标跳到右括号后，只需要一个Tab即可移动光标（虽然只有一次）

但是在VScode中，我们无法像IDEA这样方便的移动我们的光标。所以，这个插件就是为了解决这个问题，只要光标在由括号前，我们只需要按下tab，即可移动光标。

Error Lens

想要方便的查看报错吗？Error Lens可以直接在报错行旁边直接提示！

TONGYI Lingma

阿里出品的通义千问孪生产品——通义灵码，作为一款Ai代码补全工具，通义灵码毫无疑问是合格的。免费，不用翻墙，还能直接进行问答，这就足够了！

Latex

在写毕业论文的时候LaTeX可没少折磨我，本人并不是很想用线上的Overleaf（虽然它确实很方便，也不需要操心什么配置），但是在本地使用很显然VScode是一个不二之选。所以在此推荐——LaTeX Workshop

然后我们再到setting.json中添加以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

"latex-workshop.latex.autoBuild.run": "never",
"latex-workshop.showContextMenu": true,
"latex-workshop.intellisense.package.enabled": true,
"latex-workshop.message.error.show": false,
"latex-workshop.message.warning.show": false,
"latex-workshop.latex.tools": [
    {
        "name": "xelatex",
        "command": "xelatex",
        "args": [
            "-synctex=1",
            "-interaction=nonstopmode",
            "-file-line-error",
            "%DOCFILE%"
        ]
    },
    {
        "name": "pdflatex",
        "command": "pdflatex",
        "args": [
            "-synctex=1",
            "-interaction=nonstopmode",
            "-file-line-error",
            "%DOCFILE%"
        ]
    },
    {
        "name": "latexmk",
        "command": "latexmk",
        "args": [
            "-synctex=1",
            "-interaction=nonstopmode",
            "-file-line-error",
            "-pdf",
            "-outdir=%OUTDIR%",
            "%DOCFILE%"
        ]
    },
    {
        "name": "bibtex",
        "command": "bibtex",
        "args": [
            "%DOCFILE%"
        ]
    }
],
"latex-workshop.latex.recipes": [
    {
        "name": "XeLaTeX",
        "tools": [
            "xelatex"
        ]
    },
    {
        "name": "PDFLaTeX",
        "tools": [
            "pdflatex"
        ]
    },
    {
        "name": "BibTeX",
        "tools": [
            "bibtex"
        ]
    },
    {
        "name": "LaTeXmk",
        "tools": [
            "latexmk"
        ]
    },
    {
        "name": "xelatex -> bibtex -> xelatex*2",
        "tools": [
            "xelatex",
            "bibtex",
            "xelatex",
            "xelatex"
        ]
    },
    {
        "name": "pdflatex -> bibtex -> pdflatex*2",
        "tools": [
            "pdflatex",
            "bibtex",
            "pdflatex",
            "pdflatex"
        ]
    },
],
"latex-workshop.latex.clean.fileTypes": [
    "*.aux",
    "*.bbl",
    "*.blg",
    "*.idx",
    "*.ind",
    "*.lof",
    "*.lot",
    "*.out",
    "*.toc",
    "*.acn",
    "*.acr",
    "*.alg",
    "*.glg",
    "*.glo",
    "*.gls",
    "*.ist",
    "*.fls",
    "*.log",
    "*.fdb_latexmk"
],
"latex-workshop.latex.autoClean.run": "onFailed",
"latex-workshop.latex.recipe.default": "lastUsed",
"latex-workshop.view.pdf.internal.synctex.keybinding": "double-click",

在编译的时候我们最好当然是选用 pdflatex -> bibtex -> pdflatex*2，因为我们需要bibtex来进行引用文章然后再编译，所以最好使用此项一键式搞定。

至于文章引用，可以自行百度（）

Git

Git在VScode中的插件也是有两个，无脑安装就完事了

一个是Git History，另一个是GitLens。一个插件可以查看修改的历史，一个可以在行中显示是谁做的修改，以及对修改的操作等

错误提示

Error lens

这个插件可以直接爆红的时候在旁边直接显示错误提示,不需要指针特地移上去等弹出框了,报错真的很好用!

  1. C语言
    1. launch.json
    2. tasks.json
    3. 注意事项
  2. 写HTML
  3. Java
  4. Vue
    1. 缩进配置
  5. 愉快的敲代码
    1. TabOut
    2. Error Lens
    3. TONGYI Lingma
  6. Latex
  7. Git
  8. 错误提示
  1. C语言
    1. launch.json
    2. tasks.json
    3. 注意事项
  2. 写HTML
  3. Java
  4. Vue
    1. 缩进配置
  5. 愉快的敲代码
    1. TabOut
    2. Error Lens
    3. TONGYI Lingma
  6. Latex
  7. Git
  8. 错误提示