写作认知体系
  • 《技能记录》
  • tool
  • 开发工具
samy
2016-12-15

vscode常用插件及设置

# 简介

以下是直接常用及使用的插件推荐，但是插件越多，肯定会影响电脑的速度；根据自己电脑性能按需使用

# 常用插件

# GitLens

# Material Icon Theme

# Terminal

# Code Runner

# Code Spell Checker

# Golang TDD

# Vetur

# Todo Tree

# Docker

# Draw.io Integration

  • Edit .drawio, .dio, .drawio.svg【推荐】or .drawio.pngfiles in the Draw.io editor.
    • To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it.
    • .drawio.svg are valid .svg files that can be embedded in Github readme files! No export needed.
    • .drawio.png are valid .png files! No export needed. You should use .svg though whenever possible - they look much better!
    • To convert between different formats, use the Draw.io: Convert To... command.
  • Uses an offline version of Draw.io by default.
  • Multiple Draw.io themes are available.
  • Use liveshare to collaboratively edit a diagram with others.
  • Nodes/edges can be linked with code spans.

# Beautify

.jsbeautifyrc

{
    "brace_style": "none,preserve-inline",
    "indent_size": 2,
    "indent_char": " ",
    "jslint_happy": true,
    "unformatted": [""],
    "css": {
        "indent_size": 2
    }
}
1
2
3
4
5
6
7
8
9
10

# EditorConfig

# ESLint

# TSLint

结合StandandJS的标准;

package.json

 "tslint": "^5.0.0",
  "tslint-config-standard": "^8.0.1",
  "typescript": "^3.0.0"
1
2
3

tslint.js

{
  "extends": "tslint-config-standard"
}
1
2
3

settings.json

{
  "standard.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true
  }
}
1
2
3
4
5
6

# StandandJS

记得先移除eggjs中默认的规则 .eslintrc;

package.json

  "scripts": {
    "test": "standard --fix && standard &&  egg-bin test --timeout 600000",
    "ci": "standard && egg-bin cov",
    "fix": "standard --fix && standard",
  },
"devDependencies": {
    "standard": "^12.0.1"
  },
   "standard": {
    "globals": [
      "describe",
      "it",
      "before"
    ],
    "ignore": [
      "node_modules",
      "logs",
      "run",
      "ztest",
      "public",
      "web/node_modules"
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.vscode/settings.json

 "standard.autoFixOnSave": true,
1

# Remote-SSH

1：修改代码后，连接上打开终端(Ctrl + ~)后，在重启部署命令； 2：Host命名不要设置特殊字符；

Users/samy/.ssh/config 这个配置设置连接，会影响部分服务器的性能；可能会导致服务器部分卡顿；

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host 测试_电子_Read
    HostName 120.78.79.x
    User samy
    Port 960x
Host 测试_ki_内容
    HostName 120.77.205.1x
    User samy
    Port 960x
Host 正式_忆x
    HostName 39.96.171.1x
    User samy
    Port 960x
1
2
3
4
5
6
7
8
9
10
11
12
13

# Go

settings.json

{
  // "files.autoSave": "onFocusChange",
  "go.buildFlags": [],
  "go.lintFlags": [],
  "go.vetFlags": [],
  "go.useCodeSnippetsOnFunctionSuggest": false,
  "go.vetOnSave": "package",
  "go.buildOnSave": "package",
  "go.lintOnSave": "package",
  "go.formatTool": "goreturns",
  // for win env
  "go.goroot":"E:\\Program Files\\Go",
  // 全局的，配置vscode工具格式，及常用的库
  "go.toolsGopath":"E:\\software\\work\\go\\global",
  // 项目的，单独项目特殊的才配置这个;// 命令行运行的话，还是会以全局配置的准
  // "go.toolsGopath":"D:\\samy\\study\\project\\go\\go_base\\project",
  "go.gopath": "D:\\samy\\study\\project\\go\\go_base\\base_api",
  // "go.gopath": "D:\\samy\\study\\project\\go\\go_base\\extend_lib",
  // "go.gopath": "D:\\samy\\study\\project\\go\\go_base\\project",

  // for mac env
  // "go.goroot":"/usr/local/go",
  // "go.toolsGopath":"/Users/samy/Documents/software/work/go/global",
  // "go.gopath": "/Users/samy/Documents/study/projects/go/go_base/base_api",
}
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

# Format Files

插件使用

自己配置代码格式化快捷键及保存时自动格式化

一、实现vs code中代码格式化快捷键：【Shift】+【Alt】+F

二、实现保存时自动代码格式化：

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

"editor.formatOnType": true, "editor.formatOnSave": true

4）随便写代码进行测试即可。

# .gitignore Generator

# imgcook

# React PropTypes Generate

# React PropTypes Intellisense

# Draw.io Integration

流程图使用； .drawio.svg后缀；

# vscode-author-generator

注释用；

# koroFileHeader 【推荐】

在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，使用简单！

  1. 文件头部注释：

    在当前编辑文件中使用快捷键:window：ctrl+alt+i/mac：ctrl+cmd+i,即可生成文件头部注释。设置自动生成头部文件了，保存新文件时会生成头部注释

  2. 函数注释：

    • 将光标放在函数行或者将光标放在函数上方的空白行
    • 使用快捷键window：ctrl+alt+t,mac：ctrl+cmd+t，即可生成函数注释。
    • 事实上，函数注释在文件的任意位置都可生成，这里需要自己控制。
"fileheader.customMade": {
    "Author": "samy",
    "email": "yessz#foxmail.com",
    "Date": "Do not edit",
    "LastEditors": "samy",
    "LastEditTime": "Do not edit",
    "Description": "",
    "custom_string_obkoro1_copyright": "Copyright © 2015~${now_year} BDP FE",
},
"fileheader.configObj": {
    "specialOptions": {
        "Author": "author",
        "Date": "time",
        "LastEditors": "modAuthor",
        "LastEditTime": "modTime",
        "Description": "desc"
    },
    "autoAdd": true, // 自动添加头部注释开启才能自动添加
    "prohibitAutoAdd": [ "json", "md" ], // 禁止.json .md文件，自动添加头部注释
},
"fileheader.cursorMode": {
    "desc": "",
    "param ": "",
    "return": ""
}
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

可以会有快捷键冲突；要修改；

查看/配置快捷键

ctrl+k ctrl+s :打开下面界面搜索ctrl+alt，更改你的快捷键就ok了 我这里改成了ctrl+alt+
1

# 其他

# Prettier

# Debugger for Chrome

# Visual Studio Intellicode

# Path Intellisense

# npm Intellisense

# Docker Compose

# Open in GitHub, Bitbucket, Gitlab

# Paste JSON as code

example.json

{
  "_id":"5a3f85005194eb262881795e",
  "name":"第一单元：色彩",
  "book":"5a3f84fe5194eb262881795a",
  "user": "samy",
  "ancestors":[
  ]
}
1
2
3
4
5
6
7
8

# REST Client

example.http

GET https://example.com/comments/1 HTTP/1.1

###
GET https://example.com/topics/1 HTTP/1.1

###
POST https://example.com/comments HTTP/1.1
content-type: application/json

{
    "name": "sample",
    "time": "Wed, 21 Oct 2015 18:27:50 GMT"
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# SVG Viewer

# 快捷键

# 一次搜索所有文件的文本

Windows: Ctrl + Shift + F Mac: Command + Shift + F

# 进程资源管理器

在windows任务管理器中看到过这一点，在VsCode 中按Ctrl + Alt + Delete可以打开该任务管理器。

# Expand Bracket Selection

打开键盘快捷键(Ctrl + Shift + P 或 command + Shift + p)，搜索 Expand Bracket Selection。

![](~/ExpandBracketSelection.gif)

# 重新打开 关闭的编辑页面

Windows: Ctrl + Shift + T Mac: command + Shift + T

# 通过匹配文本打开文件

Windows: Ctrl + T Mac: command + T

# 集成终端

Windows: Ctrl + Mac: control +

# 查看正在运行插件

通过打开命令面板(Ctrl + Shift + P)并输入Show running extensions来查看所有你安装的正在运行的插件。

![](~/11-24-12.jpg)

# 重新加载

Windows: Ctrl + Alt + R Mac: Control + Option + R

# 选择左侧/右侧的所有内容

Windows: Ctrl + Shift + Home/End Mac: command + Shift + Home/End

苹果笔记本没home键，可以用组合键实现

  • fn键+左方向键是HOME
  • fn键+右方向键是END
  • fn+上方向键是page up
  • fn+下方向键是page down

![](~/select_home_end.gif)

# 逐个选择文本

可以通过快捷键Ctrl + Shift +右箭头(Mac: option + Shift +右箭头)和Ctrl + Shift +左箭头(Mac: option + Shift +左箭头)逐个选择文本。

# 选择（垂直选中）

快捷键：alt+shift+鼠标左键拖动

快捷键（Mac）：shift+option+鼠标左键拖动

# 块选择

Ctrl+Shift+Alt+方向键 （Shift+Alt+鼠标选择）【修改一整块内容】

# 移至文件的开头/结尾

要使光标移到文件的第一行或最后一行，最快的方法是按Ctrl + Home (Mac: command + Home)键开头，然后按Ctrl + End (Mac: command + End)键结尾。

# 重复的行

只需按 Shift + Alt + 向下箭头 (Mac: command + Shift + 向下箭头)

# 向上/向下移动一行

按Alt + 向上箭头(Mac: option+ 向上箭头)当前行向上移动，按Alt + 向下箭头(Mac: option+ 向下箭头))当前行向下移动。

# 批量替换当前文件中所有匹配的文本

按Ctrl + F2 (Mac: command + F2)一次改所有出现的文本。

# 删除一行

使用Ctrl + X剪切命令(Mac：command + X)来删除一行。

或者使用 Ctrl + Shift + K (Mac: command + Shift + K)命令。

# 删除上一个单词

要删除前一个单词，可以按Ctrl + Backspace (Mac: option + delete)。这在你打错字的时候非常有用。

# 复制光标向上或者向上批量添加内容

按Ctrl + Alt +向上箭头(Mac: command + Option +向上箭头)将光标添加到上面，按Ctrl + Alt +向下箭头(Mac: command + Option + 向下箭头)将光标添加到下面。【多行缩进】

![](~/copy_point_content.gif)

# 设置代码风格

类ESLint风格： 自动的格式化你的代码为ESLint风格

{
    // #vsCode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // #重新设定tabsize
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化 
    "editor.formatOnSave": true,
    // #每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    // #添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #让prettier使用eslint的代码格式进行校验 
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号 
    "prettier.semi": false,
    //  #使用单引号替代双引号 
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    // #格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
}
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
上次更新: 2022/04/15, 05:41:32
vscode插件开发实践
vscode推荐插件分类

← vscode推荐插件分类→

Copyright © 2015-2022 友一升 | yessz
×