vscode使用技巧安利

vscode是很优秀的文本编辑器,甚至可以说是强大的ide开发工具,由于其良好的用户体验,丰富的扩展插件,让其受到很多开发者的青睐,这里就只介绍一些常用插件的安装和使用教程。

1. Project Manager插件

  1. 保存项目

1537739081536

选save project,将会看到已经保存的各种项目。

1537739280372

2.切换项目

1537878360081

或者点击左下角即可在上方列出保存的项目,点击要切换的项目即可进入该项目里工作。

1537739128756

2. 修改默认终端

如果要改为git bash,那么在settings.json中添加如下代码

1
2
3
{
"terminal.integrated.shell.windows": "D:\\DevelopmentTools\\Git\\bin\\bash.exe"
}

以上设置存在一个问题,那就是设置第三方的终端后并不方便切换多个终端,这个时候你可以安装Terminal Manager 来方便切换不同的终端。

1559763601959

4. 修改Code Runner输出的字符编码

如果要改为utf-8,那么在settings.json中添加如下代码

1
2
3
{
"code-runner.runInTerminal": true
}

5. 安装go插件

Visual Studio Code 安装以下go插件失败解决方案

gocode
gopkgs
go-outline
go-symbols
dlv
godef
goreturns
golint

确保配置了GOROOTGOPATHPath环境变量。其中GOPATH一定要指向你的go项目里。配置如下:

1
2
3
GOROOT:  D:\DevelopmentTools\Golang\go1.9.2.windows-amd64\go
Path: %GOROOT%\bin
GOPATH: F:\myproject\goproject

在GOPATH里创建vscode_go_plugin_install.sh脚本文件,内容如下:

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
#!/bin/bash
cd $GOPATH/src
mkdir github.com
cd $GOPATH/src/github.com
mkdir acroca cweill derekparker go-delve josharian karrick mdempsky pkg ramya-rao-a rogpeppe sqs uudashr
cd $GOPATH/src/github.com/acroca
git clone https://github.com/acroca/go-symbols.git
cd $GOPATH/src/github.com/cweill
git clone https://github.com/cweill/gotests.git
cd $GOPATH/src/github.com/derekparker
git clone https://github.com/derekparker/delve.git
cd $GOPATH/src/github.com/go-delve
git clone https://github.com/go-delve/delve.git
cd $GOPATH/src/github.com/josharian
git clone https://github.com/josharian/impl.git
cd $GOPATH/src/github.com/karrick
git clone https://github.com/karrick/godirwalk.git
cd $GOPATH/src/github.com/mdempsky
git clone https://github.com/mdempsky/gocode.git
cd $GOPATH/src/github.com/pkg
git clone https://github.com/pkg/errors.git
cd $GOPATH/src/github.com/ramya-rao-a
git clone https://github.com/ramya-rao-a/go-outline.git
cd $GOPATH/src/github.com/rogpeppe
git clone https://github.com/rogpeppe/godef.git
cd $GOPATH/src/github.com/sqs
git clone https://github.com/sqs/goreturns.git
cd $GOPATH/src/github.com/uudashr
git clone https://github.com/uudashr/gopkgs.git


cd $GOPATH/src
mkdir -p golang.org/x
cd golang.org/x
git clone https://github.com/golang/tools.git
git clone https://github.com/golang/lint.git

cd $GOPATH/src
go install github.com/mdempsky/gocode
go install github.com/uudashr/gopkgs/cmd/gopkgs
go install github.com/ramya-rao-a/go-outline
go install github.com/acroca/go-symbols
go install github.com/rogpeppe/godef
go install github.com/sqs/goreturns
go install github.com/derekparker/delve/cmd/dlv
go install github.com/cweill/gotests
go install github.com/josharian/impl
go install golang.org/x/tools/cmd/guru
go install golang.org/x/tools/cmd/gorename
go install golang.org/x/lint/golint


exit 0

清空GOPATH目录里及其子目录里的所有通过vscode在线安装插件时生成的所有文件和目录。

运行以下命令完成安装:

1
$ bash $GOPATH/vscode_go_plugin_install.sh

6. 转到定义文件在新标签页打开

vscode转到定义默认是直接在当前标签页直接打开并覆盖的(预览模式打开),这样的或就不好在多个文件间快速进行切换了,那么怎么解决这个问题呢?其实vscode自身就有这方面需求的解决方案。

vc

注意观察标签页上文字是否是斜体。可通过双击对应文件或者标签页进行预览模式和固定模式切换。

(1)如果是斜体说明是预览模式打开文件。默认打开其他文件时此标签页上的文件会被其他文件覆盖

(2)如果不是斜体说明是固定模式打开文件,即固定该文件在此标签页上不被其他文件覆盖。

名称简述
Auto Close Tag自动闭合HTML标签
Auto Importimport提示
Auto Rename Tag修改HTML标签时,自动修改匹配的标签
Better Align对齐赋值符号和注释
Better Comments编写更加人性化的注释
Code Runner运行选中代码段(支持多数语言)
Code Spell checker单词拼写检查
Color Highlight颜色值在代码中高亮显示
Color Info小窗口显示颜色值,rgb,hsl,cmyk,hex等等
Color Picker拾色器
CSS-in-JSCSS-in-JS高亮提示和转换
Debugger for Chrome调试Chrome
Document This注释文档生成
DotENV.env文件高亮
EditorConfig for VS CodeEditorConfig插件
Emoji在代码中输入emoji
endy将输入光标跳转到当前行最后面
ESLintESLint插件,高亮提示
File Peek根据路径字符串,快速定位到文件
filesize状态栏显示当前文件大小
Find-Jump快速跳转到指定单词位置
Font-awesome codes for htmlFontAwesome提示代码段
ftp-sync同步文件到ftp
Git Blame在状态栏显示当前行的Git信息
Git History(git log)查看git log
gitignore.gitignore文件语法
GitLens显示文件最近的commit和作者,显示当前行commit信息
GraphQL for VSCodegraphql高亮和提示
Guides高亮缩进基准线
HTML CSS Class CompletionCSS class提示
HTML CSS Supportcss提示(支持vue)
HTMLHintHTML格式提示
htmltagwrap快捷包裹html标签
htmltagwrap包裹HTML
Import Beautifyimport分组、排序、格式化
Import Cost行内显示导入(import/require)的包的大小
Indenticator缩进高亮
IntelliSense for css class namescss class输入提示
JavaScript (ES6) code snippetsES6语法代码段
JS Refactor代码重构工具,提取函数、变量重命名等等
JSON to TSJSON结构转化为typescript的interface
jumpy快速跳转到指定单词位置
markdownlintMarkdown格式提示
Node modules resolve快速导航到Node模块
npm运行npm命令
npm Intellisense导入模块时,提示已安装模块名称
Path Autocomplete路径完成提示
Path Intellisense另一个路径完成提示
Polacode将代码生成图片
PostCss Sortingcss排序
Prettier - Code formatterprettier官方插件
Prettify JSON格式化JSON
Project Manager快速切换项目
vscode-icons文件图标,方便定位文件
VueHelperVue2代码段(包括Vue2 api、vue-router2、vuex2)ctrl+鼠标 可以定位函数等位置


----------- 本文结束 -----------




如果你觉得我的文章对你有帮助,你可以打赏我哦~
0%