VSCode

 ·  ☕ 5  · 👀...

介绍

技术 特性 适用场景 说明
VisualStudio Code 多语言开发工具 - 官网
- 教程

配置

配置文件路径

系统 配置文件路径
Window %APPDATA%\Code\User\settings.json
Mac $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

设置默认终端

ctrl+反引号 调出终端面板

设置自动保存

方法1:
【File】->【Auto Save】,勾选。
方法2:
【Code】->【Preferences】->【Settings】-> Commonly Used -> Files:Auto Saved

说明
off 不自动保存
afterDelay 固定间隔时间,自动保存
onFocusChange 当焦点离开编辑器的当前窗口时,自动保存
onWindowChange 当编辑器窗口失去焦点时,自动保存

MAC 添加 VSCode 到右键菜单

  1. 打开自动操作
  2. 选择 【新建】->【快速操作】
  3. 左边 【资源库】->【实用工具】->【运行shell脚本】
说明
工作流程到当前 文件夹
位于 访达.app
运行Shell脚本 这里需要手动创建
Shell /bin/zsh
传递输入 作为自变量

脚本内容:

1
2
3
4
for f in "$@"
do
    open -a "Visual Studio Code" "$f"
done
  1. 【Command+S保存】->【保存为 Open With VSCode】
  2. 实用方式:文件夹->右键-> 服务-> Open With VSCode

配置 java 开发环境

配置同步

获取Gist ID

  • 【Your gists】->点击你的gists项目->浏览器地址栏最后一串就是。

获取Token

【Settings】->【Developer settings】->【Personal access tokens】->【Generator new token】

设置

【Command+p】->输入“>sync”

安装插件

插件 说明
Java Extension Pack 包括:
- Language Support for Java(TM) by Red Hat
- Debugger for Java
- Java Test Runner
- Maven for Java
- Java Dependency Viewer
- Visual Studio IntelliCode
Lombok Annotations Support for VS Code 简化POJO
Spring Boot Tools
Spring Initializr Java Support
Spring Boot Dashboard Spring Boot in Visual Studio Code
Tomcat
Jetty for Java
CheckStyle -

配置 maven

【首选项】–>【设置】–>【搜索maven.executable.path】–>【Maven for Java】
Maven › Executable: Path:/usr/local/maven/bin/mvn

【首选项】–>【设置】–>【搜索maven】–>【Java】
Path to Maven’s settings.xml:/usr/local/maven/conf/settings.xml

配置 java.home

1
2
# 查看jdk 安装路径
> /usr/libexec/java_home -V 

【首选项】–>【设置】–>【搜索java.home】–>【Java】–>【在 setting.json 中编辑】

1
2
3
{
    "java.home": "/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home",
}

编写以下java类进行测试:

1
2
3
4
5
public class HelloVSCode{
    public static void main(String[] args) {
            System.out.println("***");
    }
}

snippets

Go

Java

插件

基础

说明
Chinese (Simplified) Language Pack for Visual Studio Code 简体中文语言包
File Utils 提供了一个更加简洁的方法来创建、复制、移动、重命名、删除文件/文件夹。
vscode-icons Icon 集合
Color Highlight
Setting Sync 通过Github Gist备份配置、Snippets、Themes、File Icons、Launch、Keybindings、Workspace等等

Go

说明
Go go语言开发插件

Flutter

插件 说明
Flutter plugin 支持Flutter开发人员工作流程(运行、调试、热重载等)
Dart plugin 提供了代码分析(代码验证、键入代码、完成代码等)

Git

插件 说明
GitLens
Git Project Manager Git Project Manager 可以然你直接一键搜索并打开某个的基于 Git 管理的项目。
Git History 可视化查看 Git 历史记录的插件。

开发

插件 说明
Code Runner 代码一键运行,支持超过40种语言
Color Highlight 直观展示你定义的颜色。
Debugger for Chrome 用 Chrome 来 Debug 你的 JavaScript 代码,或则其它支持 Chrome Debugger 协议的平台。
EditorConfig 支持 EditorConfig 的一个插件,用来在不同编辑器中保持代码格式的一致性。
Project Manager 这个插件提供一个方便易用的工程管理器,能够快速的在不同工程之间切换。
Indent-Rainbow 一个简单的插件可以使得对齐更加具有可读性。
Better Comments 注释美化
Prettier - Code formatter 代码格式化
LeetCode 在VSCode中刷LeetCode题
PolaCode 2019 可以把代码保存成美观的图片,主题不同,代码配色方案也不同,也可以自己设置边框颜色、大小、阴影
koroFileHeadermd 在vscode中用于生成文件头部注释和函数注释的插件。快捷键:
头部注释:ctrl+command+i
函数注释:ctrl+command+t
Beautify
Beautify Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code
TODO Highlight 在很多的其他代码编辑器中都有 TODO 标注功能的,如你写到某一部分的代码时,其中部分的功能需要稍后再来实现,这是就可以在对应的代码处添加一个 TODO 类型的注释,那么后期就可以快速地跳转到这部分继续写,而且当项目很大的时候,TODO 就变得更加有用,因为有时候 TODO 可能有几十个,帮助你标注那些功能需要继续实现或优化。
但是我试了一下,没什么效果
Vim

代码生成

hexo

说明
New File by Type 根据文件或项目类型创建文件,并自动生成模板代码
vscode-code-generate 根据模板快速生成代码的 VSCode 插件

Node.js

插件 说明
npm Intellisense 这个插件支持在代码中导入 npm 模块时的自动补全。

Terraform

插件 说明
Aliyun Serverless VSCode Extension 阿里云 Serverless 产品 函数计算 Function Compute 的 VSCode 插件,该插件结合了 函数计算 Fun 工具 以及 函数计算 SDK ,是基于 VSCode 的开发调试部署工具。
Azure Terraform Visual Studio Code 让开发人员在创作、测试 Terraform 和结合 Azure 使用它时更加高效。 Visual Studio Code 中的扩展提供了 Terraform 命令支持、资源图可视化和 CloudShell 集成。
Terraform Terraform
sentinel sentinel 插件。

常见问题

Mac下VSCode打开zsh乱码

问题描述

iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。

解决办法

方法1:使用⌘,打开settings界面,搜索terminal,在Font Family中添加字体Meslo LG M for Powerline。
方法2:在VSCode的settings.json文件,加入 : “terminal.integrated.fontFamily”: “Meslo LG M for Powerline”,

VSCode Vim 中文输入法切换

  1. 安装 im-select
  2. setting.json
1
2
3
4
5
6
"vim.autoSwitchInputMethod.enable": true,
// "vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.US",
// 笔者改成了ABC输入法
"vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.ABC"
"vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
"vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}"

参考


Wanglibing
Wanglibing
Engineer,Lifelong learner