vscode 常用插件+命令

jason_yang
938 阅读2分钟

1.插件

  1. Setting Sync 同步vscode所有插件
  2. KoroFileHeader 自动生成注解
  3. draw.io 思维导图工具
  4. any-rule 快捷键 shift + alt + p --- zz: 复制正则到代码
  5. GitHub Repositories github， 在线查看github（无需下载）， 点击左边总页签远程xx，输入git地址
  6. Regex Previewer 正则测试校验工具，（输入正则后, 点击上面test regex ,然后清空右边内容框，直接输入测试数据，正确会提示黄色。）

头部备注

快捷键：window：ctrl+alt+i,mac：ctrl+cmd+i

方法备注

快捷键：window：ctrl+alt+t,mac：ctrl+cmd+t

1.1离线安装.vsix

1.访问应用市场 marketplace.visualstudio.com/vscode 2.搜索工具如：Vue VSCode Snippets 3.点击右侧Resources -> Download Extension 下载vsix文件 4.在vscode 点击插件栏 install from VSIX 导入vsix文件

image.png

2.常用命令

#快捷键
#打开命令行
Ctrl+Shift+P
#mac：
command+Shift+P 
#实现同时录入多个地方
mac 长按alt 鼠标点击可以多选输入范围和录入

#查看当前已经安装的地址
苹果电脑： ~/.vscode/extensions
Linux： ~/.vscode/extensions

#显示已经安装的列表
code --list-extensions
#导入插件 安装插件
code --install-extension ms-vscode.cpptools
code --install-extension volar.vsix

#删除插件
code --uninstall-extension ms-vscode.csharp
code --disable-extensions

2.1快速包裹html外部标签

  <div>
    404 Not Found!
  </div>

如果想要在最外部包裹<template></template>

  • 1.command+Shift+P
  • 2.输入wrap，回车
  • 3.输入template
<!-- 结果 -->
<template>
  <div>
    404 Not Found!
  </div>
</template>

2.2 vscode 快速录入html

<!-- 嵌套录入 div>span 回车  -->
  <div>
   <span></span>
  </div>
  
  <!-- 样式录入 div.cur 回车-->
  <div class="cur">
  </div>

2.3 vue vscode snippets快速录入

 vtemplate
 vdata
 vmethod

2.4 自定义快捷模版

js fori

工具栏 > 文件 > 首选项 > 用户代码片段 打开配置文件javascript.json

"Print out fori": {
        "prefix": "fori",
        "body": [
            "for (let i = 0; i < $1; i++) {",
            "  $2$0",
            "}"
        ],
        "description": "Output Loop 'fori'"
    },
    "Print out forj": {
        "prefix": "forj",
        "body": [
            "for (let j = 0; j < $1; j++) {",
            "  $2$0",
            "}"
        ],
        "description": "Output Loop 'forj'"
    }

md

  1. 在全局的 shift alt + p 输入 open user settings，打开settings.json 添加md支持
  "[markdown]":  {
    "editor.quickSuggestions": true
  }

k8s md


{
	"Print to ssh": {
		"scope": "",
		"prefix": "ssh",
		"body": [
			"```sh",
			"",
			"```"
		],
		"description": "ssh console"
	},
        "Print to js": {
		"scope": "",
		"prefix": "js",
		"body": [
			"```js",
			"",
			"```"
		],
		"description": "js console"
	},
	"Print to eof": {
		"scope": "",
		"prefix": "eof",
		"body": [
			"cat > xxxxxxx.conf << EOF",
			"",
			"EOF"
		],
		"description": "eof console"
	},
	"Print to apply": {
		"scope": "",
		"prefix": "app",
		"body": [
			"kubectl apply -f xxxxx.yml",
		],
		"description": "eof apply"
	}, 
}

2.5 配置import @ 路径提示及代码智提

1、安装插件：Path Intellisense
2、配置：
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }
3、在项目package.json所在同级目录下创建文件jsconfig.json：
{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

2.6 vscode 使用Setting Sync同步插件

1.安装后通过登录git 同步信息

image.png

image.png

勾选gist

image.png 1.上传键：Shift + Alt + U 2.下载键：Shift + Alt + D （在macOS上：Shift + Option + U / Shift + Option + D）

2.7 vscode连接不到扩展商店解决方法

删除 application->Proxy的 Proxy的地址信息 image.png

2.8 vscode 支持垂直多选

Alt + 单击

2.9 vscode 大小写切换

  1. ctrl + p 打开输入命令行

image.png 2. 输入transform

image.png 3. 点击 键绑定，输入自己定义的快捷键 为了避免冲突，

  • shift + alt + U 做大写
  • shift + alt + L 做小写

2.10 vscode 返回上一次访问的页面

  • ctrl + - 返回
  • ctrl + + 前进

2.11 禁止鼠标拖拽移动内容

"editor.dragAndDrop": false,

2.12 格式化代码不换行 prettier

创建 .prettierrc

{
  "printWidth": 200,
  "eslintIntegration": true,
  "stylelintIntegration": true,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "files.insertFinalNewline": true,
  "useTabs": false,
  "endOfLine": "auto",
  "ignorePath": ".gnore",
  "trailingComma": "none"
}

2.13 常用快捷键

command+x # 删除

工具

随机

生成图片

url生成

const list = [
    {
      url: `https://picsum.photos/600/800?random=${Math.random()}`,
      name: 'Public Storage',
    },
    {
      url: `https://picsum.photos/600/800?random=${Math.random()}`,
      name: 'Public Storage 369',
    }
 ]

生成数据

插件 Random Everything

使用option按键多选，然后 shift + command + p ，输入random country 回车

插件 vscode faker

使用option按键多选，然后 shift + command + p ，输入faker company 回车

代码库

安装库

npm install @faker-js/faker --save-dev

package.json

  "type": "module",

使用代码

//index.js
import { faker } from '@faker-js/faker';

// 生成随机数据
const mockUser = {
  name: faker.person.fullName(),
  email: faker.internet.email(),
  phone: faker.phone.number(),
  address: faker.location.streetAddress(),
  city: faker.location.city(),
  zipCode: faker.location.zipCode(),
};
console.log(mockUser);

测试

node index.js
avatar
文章
阅读
粉丝