vscode使用技巧安利

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

¶1. Project Manager插件

保存项目

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

2.切换项目

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

¶2. 修改默认终端

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

1
2
3

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

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

¶4. java插件

安装Language Support for Java™ by Red Hat和Code Runner插件，该插件现在需要java11，所以要在本地安装好jdk11，然后在settings.json中添加如下代码

"java.home": "D:\\Development\\Java\\jdk-11",
"code-runner.runInTerminal": true,
"code-runner.executorMap": {
    "java": "cd $dir && javac -encoding utf-8 $fileName && java $fileNameWithoutExt",
},

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

安装Code Runner插件。如果要改为utf-8,那么在settings.json中添加如下代码

1	"code-runner.runInTerminal": true

¶6. 安装go插件

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

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

确保配置了GOROOT、GOPATH和Path环境变量。其中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脚本文件，内容如下:

#!/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

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

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

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

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

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

名称	简述
Auto Close Tag	自动闭合HTML标签
Auto Import	import提示
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-JS	CSS-in-JS高亮提示和转换
Debugger for Chrome	调试Chrome
Document This	注释文档生成
DotENV	.env文件高亮
EditorConfig for VS Code	EditorConfig插件
Emoji	在代码中输入emoji
endy	将输入光标跳转到当前行最后面
ESLint	ESLint插件，高亮提示
File Peek	根据路径字符串，快速定位到文件
filesize	状态栏显示当前文件大小
Find-Jump	快速跳转到指定单词位置
Font-awesome codes for html	FontAwesome提示代码段
ftp-sync	同步文件到ftp
Git Blame	在状态栏显示当前行的Git信息
Git History(git log)	查看git log
gitignore	.gitignore文件语法
GitLens	显示文件最近的commit和作者，显示当前行commit信息
GraphQL for VSCode	graphql高亮和提示
Guides	高亮缩进基准线
HTML CSS Class Completion	CSS class提示
HTML CSS Support	css提示（支持vue）
HTMLHint	HTML格式提示
htmltagwrap	快捷包裹html标签
htmltagwrap	包裹HTML
Import Beautify	import分组、排序、格式化
Import Cost	行内显示导入（import/require）的包的大小
Indenticator	缩进高亮
IntelliSense for css class names	css class输入提示
JavaScript (ES6) code snippets	ES6语法代码段
JS Refactor	代码重构工具，提取函数、变量重命名等等
JSON to TS	JSON结构转化为typescript的interface
jumpy	快速跳转到指定单词位置
markdownlint	Markdown格式提示
Node modules resolve	快速导航到Node模块
npm	运行npm命令
npm Intellisense	导入模块时，提示已安装模块名称
Path Autocomplete	路径完成提示
Path Intellisense	另一个路径完成提示
Polacode	将代码生成图片
PostCss Sorting	css排序
Prettier - Code formatter	prettier官方插件
Prettify JSON	格式化JSON
Project Manager	快速切换项目
vscode-icons	文件图标，方便定位文件
VueHelper	Vue2代码段（包括Vue2 api、vue-router2、vuex2）ctrl+鼠标可以定位函数等位置