vscode的使用与插件开发

发表于 | 分类于 | 阅读次数:

Visual Studio Code（VS code）是开发神器，通过插件配置不仅可以开发前端，还可以开发后端(java/go等)，下面介绍一下vscode的常用插件与插件如何开发一个自己的插件。

git-bash

1
2
3
4
5
6
7
8
#https://code.visualstudio.com/docs/editor/integrated-terminal
    "terminal.integrated.profiles.windows": {
      "Cygwin": {
        "path": "D:\\Developer\\Git\\bin\\bash.exe",
        "args": ["--login"]
      }
    },
    "terminal.integrated.defaultProfile.windows": "Cygwin",

nodejs

1
2
3
4
5
6
7
#curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
. ~/.bashrc
#显示有远端的版本
nvm ls-remote
#安装对应的版本
nvm install 12.22.7

安装常用工具：

1
2
3
4
5
6
7
8
9
10
11
npm install  hexo-cli -g
npm install hexo-server -g
npm install hexo-deployer-git -g
npm install yarn -g
npm install http-server -g
#yarn global add serve

npm config set registry https://registry.npmmirror.com --global
npm config set disturl https://npmmirror.com/dist --global
yarn config set registry https://registry.npmmirror.com --global
yarn config set disturl https://npmmirror.com/dist --global

常用插件

安装以下插件：

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
#javascript
eslint
Color Picker
npm
Debugger for Chrome
Eclipse Keymap
#react
ES7 React/Redux/GraphQL/React-Native snippets
#vue
Vetur
Vue VSCode Snippets
#git
GitLens
zerofinance-git
#其他公共插件
Local History
XML Tools
Prettier
#https://zhuanlan.zhihu.com/p/54031899
koroFileHeader
AutoFileName
Import Cost

#java
Java Extension Pack
Spring Boot Extension Pack
Java Code Generators
Tomcat for Java
Docker

#android/ios plugin
Android iOS Emulator
React Native Tools
#see debug:https://github.com/Microsoft/vscode-react-native/blob/master/doc/debugging.md#debugging-on-ios-device
#Install ios-deploy: npm install -g ios-deploy

可以在项目的.vscode目录下添加extensions.json，并添加以下内容，当第一次打开时会提示是否需要安装这些推荐的插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "anseki.vscode-color",
        "eg2.vscode-npm-script",
        "msjsdiag.debugger-for-chrome",
        "alphabotsec.vscode-eclipse-keybindings",
        "dsznajder.es7-react-js-snippets",
        "eamodio.gitlens",
        "zerofinance.zerofinance-git",
        "xyz.local-history",
        "DotJoshJohnson.xml",
        "esbenp.prettier-vscode",
        "OBKoro1.korofileheader",
        "JerryHong.autofilename",
        "wix.vscode-import-cost"
    ]
}

可以通过命令行批量安装：

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
#前端------
code --install-extension dbaeumer.vscode-eslint
code --install-extension anseki.vscode-color
code --install-extension eg2.vscode-npm-script
code --install-extension msjsdiag.debugger-for-chrome
code --install-extension alphabotsec.vscode-eclipse-keybindings
#react
code --install-extension dsznajder.es7-react-js-snippets
#vue
code --install-extension octref.vetur
code --install-extension sdras.vue-vscode-snippets
#git
code --install-extension eamodio.gitlens
code --install-extension zerofinance.zerofinance-git
#others
code --install-extension xyz.local-history
code --install-extension DotJoshJohnson.xml
code --install-extension esbenp.prettier-vscode
code --install-extension OBKoro1.korofileheader
code --install-extension JerryHong.autofilename
code --install-extension wix.vscode-import-cost
#前端------

#java------
code --install-extension vscjava.vscode-java-pack
code --install-extension Pivotal.vscode-boot-dev-pack
code --install-extension sohibe.java-generate-setters-getters
#java------

#docker------
code --install-extension PeterJausovec.vscode-docker
#docker------

#android/ios plugin------
code --install-extension DiemasMichiels.emulate
code --install-extension vsmobile.vscode-react-native
#android/ios plugin------

#其它命令说明，不需要执行
#列出已经安装的插件
code --list-extensions
#安装某个插件
code --install-extension ms-vscode.cpptools
#卸载某个插件
code --uninstall-extension ms-vscode.csharp

代码注释

koroFileHeader添加注释，在全局的settings.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
"editor.fontSize": 14,
"terminal.integrated.fontSize": 14,
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
},
// 注释
"fileheader.configObj": {
  // 将该选项设置为true即可开启
  "autoAdd": false
},
// 头部注释
"fileheader.customMade": {
    "Author": "dave.zhao",
    "Date": "Do not edit",
    "LastEditors": "dave.zhao",
    "LastEditTime": "Do not edit",
    "Description": ""
},
// 函数注释
"fileheader.cursorMode": {
    "Date": "Do not edit",
    "description": "",
    "param": ""
}

注意：Author和LastEditors填写自己的名字

文件头注释快捷键：window：ctrl+alt+i,mac：ctrl+cmd+i

函数注释快捷键：window：ctrl+alt+t,mac：ctrl+cmd+t

常用配置

可以放在全局的settings.json中，也可以放在各个项目的settings.json中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "eslint.validate": ["javascript", "javascriptreact"],
    "javascript.updateImportsOnFileMove.enabled": "always",
    // 代码缩进修改成4个空格
    "editor.detectIndentation": false,
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    // 每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    // 让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    // 去掉代码结尾的分号
    "prettier.semi": false,
    // 使用带引号替代双引号
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    "prettier.printWidth": 250,
    // 让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true
}

Java

https://code.visualstudio.com/docs/languages/java
https://code.visualstudio.com/docs/remote/wsl
https://code.visualstudio.com/docs/java/java-tutorial
https://code.visualstudio.com/docs/java/java-project
https://code.visualstudio.com/docs/java/java-debugging
https://code.visualstudio.com/docs/java/extensions
https://code.visualstudio.com/docs/java/java-spring-boot

插件：

1
2
3
4
5
6
7
https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack
https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack
https://marketplace.visualstudio.com/items?itemName=adashen.vscode-tomcat
#wget http://mirrors.aliyun.com/apache/tomcat/tomcat-8/v8.5.61/bin/apache-tomcat-8.5.61-windows-x64.zip
#https://tomcat.apache.org/tomcat-8.5-doc/appdev/sample/
#WSL
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

Settings.json

terminal.integrated.shell.windows设置为git-bash的话不能启动java项目。

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
{
    "editor.fontSize": 16,
    # "terminal.integrated.shell.windows": "D:\\Developer\\Git\\bin\\bash.exe",
    "git.autofetch": true,
    "terminal.integrated.fontSize": 16,
    "java.home": "D:\\Developer\\java\\jdk-11.0.9",
    "java.configuration.runtimes": [
        {
          "name": "JavaSE-1.8",
          "path": "C:\\Program Files\\Java\\jdk1.8.0_271",
          "default":  true
        },
        {
          "name": "JavaSE-11",
          "path": "D:\\Developer\\java\\jdk-11.0.9"
         }
      ],
      "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
      },
      "maven.executable.path": "D:\\Developer\\apache-maven-3.3.9\\bin\\mvn.cmd",
      "java.configuration.maven.globalSettings": "D:\\Developer\\apache-maven-3.3.9\\conf\\settings.xml",
      "java.configuration.maven.userSettings": "D:\\Developer\\apache-maven-3.3.9\\conf\\settings.xml",
      "editor.suggestSelection": "first",
      "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
      "java.project.importOnFirstTimeStartup": "automatic"
}

WSL for Settings.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
{
    "editor.fontSize": 16,
    "git.autofetch": true,
    "terminal.integrated.fontSize": 16,
    "java.home": "/Developer/java/jdk-11.0.9",
    "java.configuration.runtimes": [
        {
          "name": "JavaSE-1.8",
          "path": "/Developer/java/jdk1.8.0_271",
          "default":  true
        },
        {
          "name": "JavaSE-11",
          "path": "/Developer/java/jdk-11.0.9"
         }
      ],
      "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
      },
      "maven.executable.path": "/Developer/apache-maven-3.3.9/bin/mvn",
      "java.configuration.maven.globalSettings": "/Developer/apache-maven-3.3.9/conf/settings.xml",
      "java.configuration.maven.userSettings": "/Developer/apache-maven-3.3.9/conf/settings.xml",
      "editor.suggestSelection": "first",
      "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}

Remote Debug:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#launch.json
{
    "configurations": [
        // {
        //     "type": "java",
        //     "name": "Spring Boot-TelepresenceK8sApplication<telepresence-k8s>",
        //     "request": "launch",
        //     "cwd": "${workspaceFolder}",
        //     "console": "internalConsole",
        //     "mainClass": "com.ctl.telepresencek8s.TelepresenceK8sApplication",
        //     "projectName": "telepresence-k8s",
        //     "args": ""
        // },
        {
            "type": "java",
            "name": "Debug (Attach)-Spring Boot-TelepresenceK8sApplication<telepresence-k8s>",
            "request": "attach",
            "projectName": "telepresence-k8s",
            "hostName": "localhost",
            "port": 8000
        }
    ]
}

Developing inside a Container

参考：

首先要安装vscode-remote-extensionpack插件：

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

.devcontainer/devcontainer.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
// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.137.0/containers/java
{
	"name": "employee",
	"build": {
		"dockerfile": "Dockerfile",
		"args": {
			"VARIANT": "8"
		}
	},

	// Set *default* container specific settings.json values on container create.
	"settings": { 
		"terminal.integrated.shell.linux": "/bin/bash",
		"java.home": "/Developer/java/jdk-11.0.9",
		"maven.executable.path": "/Developer/apache-maven-3.3.9/bin/mvn",
      	"java.configuration.maven.globalSettings": "/Developer/apache-maven-3.3.9/conf/settings.xml",
      	"java.configuration.maven.userSettings": "/Developer/apache-maven-3.3.9/conf/settings.xml",
		"java.configuration.runtimes": [
			{
			  "name": "JavaSE-1.8",
			  "path": "/Developer/java/jdk1.8.0_241",
			  "default":  true
			},
			{
			  "name": "JavaSE-11",
			  "path": "/Developer/java/jdk-11.0.9"
			}
		]
	},
	
	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [
		"vscjava.vscode-java-pack"
	],
  
  #If you do have login access, you can use a remote filesystem bind mount instead: 
	"workspaceMount": "source=${localWorkspaceFolder},target=/Developer/workspace/employee,type=bind,consistency=cached",
	"workspaceFolder": "/Developer/workspace/employee",
	"mounts": [
		"source=F:\\docker,target=/Developer/docker,type=bind,consistency=cached",
		// "source=try-node-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
		"source=F:\\apache-tomcat-7.0.50,target=/Developer/apache-tomcat-7.0.50,type=bind,consistency=cached",
		"source=C:\\Users\\Dave.zhao\\.kube,target=/root/.kube,type=bind,consistency=cached"
	],
	"remoteEnv": {
		"KUBERNETES_NAMESPACE": "default"
	},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": ". /etc/profile && java -version",

	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "dev"
}

.devcontainer/Dockerfile

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
# FROM java:8-jdk
FROM centos:7
RUN mkdir /Developer /config
WORKDIR /Developer
ENV APPNAME=employee \
    VERSION=3.0.0-SNAPSHOT \
    CONFIG=/config/
# RUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo Asia/Shanghai > /etc/timezone
RUN yum install -y wget sudo
# RUN groupadd dev && useradd -r -g dev dev
ARG USERNAME=dev
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Create the user
# [Optional] Add sudo support. Omit if you don't need to install software after connecting.
RUN groupadd --gid $USER_GID $USERNAME \
  && useradd --uid $USER_UID --gid $USER_GID -m $USERNAME \
  && echo $USERNAME ALL=\(ALL\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
  && chmod 0440 /etc/sudoers.d/$USERNAME

RUN chown -R $USERNAME.$USERNAME /Developer /config
ADD apache-maven-3.3.9.tar.gz /Developer/
RUN mkdir -p /Developer/java /Developer/workspace
ADD java/* /Developer/java/

ADD script.sh /Developer/
RUN bash /Developer/script.sh

script.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
#!/bin/bash

#关闭内核安全(如果是vagrant方式，第一次完成后需要重启vagrant才能生效。)
sed -i 's;SELINUX=.*;SELINUX=disabled;' /etc/selinux/config
setenforce 0
getenforce

cat /etc/NetworkManager/NetworkManager.conf|grep "dns=none" > /dev/null
if [[ $? != 0 ]]; then
  echo "dns=none" >> /etc/NetworkManager/NetworkManager.conf
  systemctl restart NetworkManager.service
fi

ln -sf /usr/share/zoneinfo/Asia/Chongqing /etc/localtime

#logined limit
cat /etc/security/limits.conf|grep 100000 > /dev/null
if [[ $? != 0 ]]; then
cat >> /etc/security/limits.conf  << EOF
*               soft    nofile             100000
*               hard    nofile             100000
*               soft    nproc              100000
*               hard    nproc              100000
EOF
fi

sed -i 's;4096;100000;g' /etc/security/limits.d/20-nproc.conf

#systemd service limit
cat /etc/systemd/system.conf|egrep '^DefaultLimitCORE' > /dev/null
if [[ $? != 0 ]]; then
cat >> /etc/systemd/system.conf << EOF
DefaultLimitCORE=infinity
DefaultLimitNOFILE=100000
DefaultLimitNPROC=100000
EOF
fi

#echo "vm.swappiness = 10" >> /etc/sysctl.conf
cat /etc/sysctl.conf|grep "net.ipv4.ip_local_port_range" > /dev/null
if [[ $? != 0 ]]; then
cat >> /etc/sysctl.conf  << EOF
net.ipv4.tcp_fin_timeout = 30
net.ipv4.tcp_keepalive_time = 300
net.ipv4.tcp_tw_reuse = 1
net.ipv4.tcp_tw_recycle = 1
net.ipv4.ip_local_port_range = 1024 65535
net.ipv4.ip_forward = 1
EOF
sysctl -p
fi

su - root -c "ulimit -a"

# yum -y install gcc kernel-devel
mv -f /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
#wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.163.com/.help/CentOS7-Base-163.repo
wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo

sudo mv /etc/yum.repos.d/epel.repo /etc/yum.repos.d/epel.repo.backup
sudo mv /etc/yum.repos.d/epel-testing.repo /etc/yum.repos.d/epel-testing.repo.backup

yum -y install bind-utils bridge-utils ntpdate setuptool iptables \
 system-config-securitylevel-tui system-config-network-tui \
 ntsysv net-tools lrzsz telnet lsof vim dos2unix unix2dos zip unzip

cat >> /etc/profile << EOF
export JAVA_HOME=/Developer/java/jdk1.8.0_241
export M2_HOME=/Developer/apache-maven-3.3.9
export GRADLE_USER_HOME=/Developer/.gradle
export PATH=\$JAVA_HOME/bin:\$M2_HOME/bin:\$PATH
EOF

. /etc/profile
# /home/$USERNAME/.bashrc

参考以下文件：devcontainer.zip 或者：https://github.com/zhaoxunyong/java-k8s/tree/1.0.4.RELEASE/spring-k8s-feign/spring-cloud-k8s-account-service/.devcontainer

注意：

如果有变动，需要执行”Remote-Containers: Rebuild Container”。

另外不支持远程docker(2375端口)方式打开本地的目录(因为无法远程mount目录)，但可以通过”Remote-Containers: Clone Repository in Container Volume”的方式或者：

https://code.visualstudio.com/docs/remote/containers-advanced#_converting-an-existing-or-predefined-devcontainerjson

If you do not have login access to the remote host, use a Docker “volume” for your source code.
Update .devcontainer/devcontainer.json as follows (replacing remote-workspace with a unique volume name if desired):
workspaceMount”: “source=employee-workspace,target=/Developer/workspace/employee,type=volume”,

If you used a volume instead of a bind mount, use Ctrl+Shift+` to open a terminal inside the container.

#You can run git clone from here to pull down your source code and use File > Open… / Open Folder… to open the cloned repository.

Docker-from-docker

.devcontainer/devcontainer.json

1
2
3
4
5
6
7
"extensions": [
  "ms-azuretools.vscode-docker"
],
"mounts": [ 
  "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind",
  "source=${env:HOME}${env:USERPROFILE}/.kube,target=/home/dev/.kube,type=bind"
],

script.sh

1
2
3
4
5
6
7
8
9
10
11
#https://www.cnblogs.com/763977251-sg/p/11837130.html
#Docker installation
#https://aka.ms/vscode-remote/samples/docker-from-docker
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
sudo yum makecache fast
sudo yum -y install docker-ce

touch /var/run/docker.sock
sudo gpasswd -a dev docker
chown dev.dev /var/run/docker.sock

插件开发

参考代码https://github.com/zhaoxunyong/vs-code-git-plugin，具体细节待补充。

参考