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

nodejs

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

安装常用工具：

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.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/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
#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
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

代码注释

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
}

插件开发

参考代码https://github.com/zhaoxunyong/vs-code-git-plugin

参考