VSCode 篇

发表于 更新于 分类于 ， 本文字数： 1.5k 阅读时长 ≈ 6 分钟

1、使用 jetbrains 快捷键需删除以下快捷键防止冲突

  • Debug:Start Without Debugging —— Control-D —— 弹出 Debug

2、VSCode 推荐的插件

常用

插件名 描述
antd Design Token antd 的 token 插件
any-rule 正则大全
Apc Customize UI++ vscode 页面定制
Auto Close Tag 自定闭合标签
Auto Import 自动导入
Auto Rename Tag 同步修改标签名
Bracket Lens 代码块提示
code runner 代码执行
Code Spell Checker 拼写检测
CodeRabbit PR Review 工具
CodeSnap 代码截图
Codex – OpenAI’s coding agent
Color Highlight 代码高亮
Console Ninja console vscode 管理工具
Container Tools 微软官方的容器工具集
CSS Peek css 索引调整
Deploy 部署脚本执行
Dev Containers 将 docker 容器作为开发环境
Docker docker 管理
Docker DX
DotENV env 高亮
Draw.io Integration drawio 集成
EditorConfig editorconfig 配置高亮
ENV ENV 格式化工具
Error Lens
ES7+ React/Redux/React-Native snippets react 代码片段
ESLint
filesize
Git History
GitHub Actions
GitHub Pull Requests
GitHub Repositories github 仓库管理
GitLens - Git supercharged
glTF Tools gltf 模型预览插件
GraphQL graphql 语法支持
Graphviz (dot) language support for Visual Studio Code 图可视化语法支持
Graphviz Preview 图可视化预览
Hex Editor 二进制预览
Import Cost 导包的大小
indent-rainbow 彩色缩进
IntelliJ IDEA Keybindings idea 键盘映射
JavaScript (ES6) code snippets es6 代码片段
JavaScript standardjs styled snippets js 代码片段
Jest
Jest Snippets jest 代码片段
Jinno 实时预览组件, 通过 ai 创建独立环境和填入组件参数
JS CodeFormer: Javascript Refactoring & Code Automation 代码重构和生成
JSON Crack json 层级解析预览
Jump To Alias File 文件别名跳转
Kubernetes
Language Support for Java(TM) by Red Hat java 语法支持
LeetCode
Live Server 静态服务
Live Share 实时分享编辑
Markdown All in One markdown 语法和预览
Markdown Preview Enhanced markdown 预览增强
Material Icon Theme vscode 文件夹的 icon 图标
MDX mdx 语法高亮
Mermaid
Mermaid Editor 流程图预览
Mermaid Markdown Syntax Highlighting
Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java 文档生成
Nuxtr nuxt 插件
Paste JSON as Code json 转各种类型声明
Path Autocomplete 路径补全
Path Intellisense path 补全
Peacock 给不同窗口配置各自的颜色
Prettier - Code formatter
Prisma
Project Manager
Quokka.js 在 vscode 中的显示计算结果
React Style Helper react style module 补全提示
react-intl-linter react i18 替换
React-Native/React/Redux snippets for es6/es7 react 代码片段
React/Redux/react-router Snippets react 代码片段
Regex Previewer 正则匹配测试
Remote - SSH ssh 远程开发
Remote - SSH: Editing Configuration Files ssh 配置文件高亮
Remote Explorer ssh 远程资源管理
Remote Repositories ssh 远程 git 仓库控制
Sass (.sass only) sass 语法高亮
SCSS Formatter Vue Extension Box 包里面包含
Simple React Snippets react 代码片段
SQL Formatter
stylus stylus 语法高亮
Svg Preview 预览 svg 的图案
Tailwind CSS IntelliSense tailwind 高亮
TODO Highlight
Todo Tree
Version Lens
Vim
Vira Theme material 的主题废弃更新版
Vite
vscode-pdf
vscode-random 随机数据生成
Vue (Official)
Vue 3 Snippets
Vue 3 Support - All In One
Vue Extension Box vue 扩展插件打包安装
Vue Peek
Vue VSCode Snippets
vue-helper Element-Ul, Element Plus, Ant Desigin Vue 文档增强
WakaTime
Wallaby.js 实时测试结果
WebGL GLSL Editor
WSL
WXML - Language Service 微信 wxml 语法支持
XML Formatter
YAML

不显示

插件名 描述
GitHub Copilot
GitHub Copilot Chat

不常用

插件名 描述
Amazon Q
Biome 开箱即用的校验&格式化&排序一体插件
Bito AI Code Reviews
Cline
Cody: AI Code Assistant AI 编程助手
Continue 代码补全助手, 并有类似 Cursor 核心的行内编辑功能
Qoder CN (Formerly Lingma) 通义 ai 代码提示生成
Rome Rome 格式化工具
Roo Code
TRAE AI: Coding Assistant 自动补全工具
uni-app-schemas
uni-app-snippets
uni-cloud-snippets
uni-helper
uni-highlight
uni-ui-snippets
MarsCode: AI Coding Assistant Trae 豆包旗下的编程助手
augment 类似 cursor 和 Claude code 的 compose 插件

禁用

插件名 描述
.NET Install Tool
C/C++
c#
Clang-Format c 语言格式化
PHP Debug
rust-analyzer rust 语法支持

3、其他

3.1 使用 WSL 的 Linux 终端

  1. 安装 Remote - WSL 插件
  2. 打开终端，选择 WSL Bash

1.png

2.png

3.1.1 Windows 访问 Ubuntu 的文件系统

1
C:\Users\xxx\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs\home\xxx

3.1.2 Ubuntu 访问 Windows 的 home 目录

创建链接

1
ln -s /mnt/c/User/用户名 ~/win10

使用链接 cd 进入 home 目录

1
cd ~/win10

4、插件使用技巧

JavaScript standardjs styled snippets

cd - const x = await x
cf - const 箭头函数
te - 三元表达式
i - if 语句
ife - if else 语句
tc - try catch
tcf - try catch finally
fn - function 函数
asf - async function 函数
aiife - async 立即执行函数

JavaScript (ES6) code snippets

class

con - 生成构造函数
met - 类中生成方法
pge - get 函数
pse - set 函数

基本

fof - for…of 方法
fin - for…in 方法
nfn - const 箭头函数
sti - setInterval 定时器
sto - setTimeout 定时器
prom - return new Promise
ec —— 导出 const 变量
ef —— 导出函数

1
export function name (arguments) {}

log 类

cer - console.error
clg - console.log

导出

ecl —— 默认导出类

1
export default class ClassName {}

Simple React Snippets

uef

1
useEffect(()=>{},[])

ucb

1
useCallback((val)=>{},[])

usf

1
const [,set] = useState()

keybindings

  • 上移窗口
  • 下移窗口
  • 左移窗口
  • 右移窗口
  • 上下分割窗口
  • 左右分割窗口
  • 创建文件
  • 关闭编辑区
  • 取消高亮
  • 重命名
  • 格式化
  • 折叠代码
  • 回到开头
  • 回到结尾
  • 合并下一行
  • 向下5行
  • 向上5行
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
/* mac start */
// 向上移动窗口
{
  "key": "shift+up",
  "command": "vim.remap",
  "when": "vim.mode == 'Normal'",
  "args": {
    "after": [
      "<c-w>",
      "k"
    ],
  }
},
// 向下移动窗口
{
  "key": "shift+down",
  "command": "vim.remap",
  "when": "vim.mode == 'Normal'",
  "args": {
    "after": [
      "<c-w>",
      "j"
    ],
  }
},
// 向左移动窗口
{
  "key": "shift+left",
  "command": "vim.remap",
  "when": "vim.mode == 'Normal'",
  "args": {
    "after": [
      "<c-w>",
      "h"
    ],
  }
},
// 向右移动窗口
{
  "key": "shift+right",
  "command": "vim.remap",
  "when": "vim.mode == 'Normal'",
  "args": {
    "after": [
      "<c-w>",
      "l"
    ],
  }
},
// 上下切分窗口
{
  "key": "ctrl+cmd+\\",
  "command": "workbench.action.splitEditorUp"
},
/* mac end */

通过 vim 快速删除 import 中的其中一个模块

1
2
3
4
5
6
7
8
9
10
"vim.argumentObjectOpeningDelimiters": [
  "(",
  "[",
  "{",
],
"vim.argumentObjectClosingDelimiters": [
  ")",
  "]",
  "}"
],

快捷键 daa 删除, 可以应用在数组, 对象, 函数参数中

代码片段

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
{
  "Print to console": {
    "scope": "javascript,typescript",
    "prefix": "tuq",
    "body": [
      "import { useQuery } from '@tanstack/react-query';",
      "import { useMemo } from 'react';",
      "import { $2 } from '@/api';",
      "import { isSuccessApi } from '@/utils';",
      "",
      "export const ${TM_FILENAME_BASE}QueryKey = '$TM_FILENAME_BASE';",
      "",
      "export function ${TM_FILENAME_BASE}(options${3|?|}: {",
      "  params${3|?|}: ${4|any;|}",
      "  options?: {",
      "    enabled?: boolean;",
      "  };",
      "}) {",
      "  const { data: response, ...rest } = useQuery({",
      "    queryFn: () => $2(${6}),",
      "    queryKey: [${TM_FILENAME_BASE}QueryKey${5}] as const,",
      "    ...options${3|?|}.options,",
      "  });",
      "",
      "  const data = useMemo(() => {",
      "    if (!isSuccessApi(response))",
      "      return;",
      "    return response.data;",
      "  }, [response]);",
      "",
      "  return {",
      "    data,",
      "    response,",
      "    ...rest,",
      "  };",
      "}"
    ],
    "description": "创建 tanstack query hook"
  }
}
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
{
	"tum": {
		"scope": "javascript,typescript", 
		"prefix": "tum",
		"body": [
			"import { useMutation } from '@tanstack/react-query';",
			"import { $2 } from '@/api';",
			"import { queryClient } from '@/main';",
			"import { ${1|useXxxQuery|}QueryKey } from '@/hooks/query/${1|useXxxQuery|}';",
			"",
			"export function $TM_FILENAME_BASE() {",
			"  const { mutateAsync, ...rest } = useMutation({",
			"    mutationFn: (params: ${3|any|}) => $2(params),",
			"    onSuccess: () => {",
			"      const queryKeys = [${1|useXxxQuery|}QueryKey];",
			"      Promise.all(queryKeys.map(key => queryClient.invalidateQueries({",
			"        queryKey: [key],",
			"      })));",
			"    },",
			"  });",
			"",
			"  return [",
			"    mutateAsync,",
			"    {",
			"      ...rest,",
			"    },",
			"  ] as const;",
			"}"
		],
		"description": "tum"
	}
}