Skip to content

Commit 827298e

Browse files
author
ma.jinyun
committed
update VS Code Extensions
1 parent affecf7 commit 827298e

File tree

2 files changed

+133
-107
lines changed

2 files changed

+133
-107
lines changed

‎content/blog/MyVSCodePlugin.en.md‎

Lines changed: 68 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: My VS Code Configuration
2+
title: 我的 VS Code 常用配置
33
date: 2023-11-27 19:31:30
44
tags: ["Extensions", "vscode", "alias and tsconfig"]
55
series: ["vscode"]
@@ -9,62 +9,80 @@ featured: true
99
---
1010

1111

12-
## VS Code Extensions
12+
## 我安装的 VS Code 插件 (**Extensions**)
1313

14-
### 常规类
1514

16-
> vscode-fileheader、
17-
> Auto Close Tag,
18-
> Auto Rename Tag ,
19-
> CSSComb、
20-
> Prettier 、
21-
> CSSRem (px to rem & rpx & vw ),
22-
> Remove Comments,
23-
> Live Server,
24-
> Color Highlight ,
25-
> GitLens 代码编辑历史、
26-
> Git History 历史记录并搜索提交、消息、分支、
27-
> Import Cost（查看导入包的大小）、
28-
> CSS PEEK（类名与样式关联）、
29-
> Colorize 可视化 CSS 颜色
30-
> TODO Highlight,
31-
> Svg Preview,
32-
> Excel Viewer,
33-
> filesize、
34-
> Open in Browser,
35-
> toggle-upper-case、
36-
> indent-rainbow（代码缩进高亮）、
37-
> Better Comments (Comment Highlighting)
15+
### 快捷键
3816

17+
ctrl f：搜索
18+
ctrl g：定位到某行
19+
F12：跳转到函数定义
20+
ctrl - #回到定义
3921

40-
### 纠正类
22+
alt + ↑ 向上移动一行；
23+
alt + ↓ 向下移动一行
4124

42-
> AutoCorrect 用于「自动纠正」或「检查并建议」文案、给 CJK（中文、日语、韩语）与英文混写的场景，补充正确的空格，同时尝试以安全的方式自动纠正标点符号
43-
> Code Spell Checker（检测单词错误）、
44-
> Bracket Pair Colorizer 括号高亮配对
45-
> Error Lens
25+
ctrl `: 打开内置shell
26+
Shift + Alt +A 块区域注释
27+
ctrl shift k：删除当前行
28+
tab：填入自动补全内容
4629

30+
### 配置
4731

32+
// 出现推荐值时，按下Tab键是否自动填入最佳推荐值
33+
"editor.tabCompletion": "on",
4834

49-
### 工具类
35+
### 常规类
5036

51-
> Turbo Console Log 无需手动添加日志。通过单击一个按钮添加控制台日志、
52-
> Remove Comments 删除代码中的所有注释。
53-
> Regex Previewer,
54-
> CodeSnap（生成代码选中图片 Take beautiful screenshots of your code in VS Code!）、
55-
> Markdown Preview Enhanced,
56-
> Material icons ,
57-
> File Nesting Updater,
58-
>
37+
vscode-fileheader、
38+
Auto Close Tag、
39+
Auto Rename Tag 、
40+
CSSComb、
41+
Prettier 、
42+
CSSRem （px to rem & rpx & vw ）、
43+
Remove Comments、
44+
Live Server、
45+
Color Highlight 、
46+
GitLens 代码编辑历史、
47+
Git History 历史记录并搜索提交、消息、分支、
48+
Import Cost（查看导入包的大小）、
49+
CSS PEEK（类名与样式关联）、
50+
Colorize 可视化 CSS 颜色
51+
indent-rainbow（代码缩进高亮）、
5952

6053

61-
### 主动提示
54+
### 纠正类
6255

63-
> Path Intellisense,
64-
> cssModules、
65-
> Parameter Hints（入参格式提示）、
66-
> Quokka.js
56+
AutoCorrect 用于「自动纠正」或「检查并建议」文案 、给 CJK（中文、日语、韩语）与英文混写的场景，补充正确的空格，同时尝试以安全的方式自动纠正标点符号
57+
Code Spell Checker（检测单词错误）、
58+
Bracket Pair Colorizer 括号高亮配对
59+
Error Lens
60+
VSCode React Refactor （提取成函数）
6761

62+
### 工具类
63+
64+
Turbo Console Log 无需手动添加日志。通过单击一个按钮添加控制台日志、
65+
Remove Comments 删除代码中的所有注释。
66+
Regex Previewer、
67+
CodeSnap（生成代码选中图片 Take beautiful screenshots of your code in VS Code!）、
68+
Markdown Preview Enhanced、
69+
Material icons 、
70+
File Nesting Updater、
71+
Better Comments (Comment Highlighting)
72+
Svg Preview、
73+
Excel Viewer、
74+
filesize、
75+
Open in Browser、
76+
toggle-upper-case、
77+
78+
### 主动提示
79+
80+
Path Intellisense、
81+
TODO Highlight、
82+
ES7+ React/Redux/React-Native snippets （语法提示）
83+
cssModules、
84+
Parameter Hints（ 入参格式提示 ）、
85+
Quokka.js
6886

6987
### AI 类工具
7088

@@ -80,16 +98,16 @@ featured: true
8098
> Peacock 打开多个 VS Code 实例显示不同颜色
8199

82100

83-
84-
85101
## JSON Settings
102+
86103
```json
87104
/*
88105
* @Author: ASCII-ART
89106
* @Date: 2017-10-26 14:04:17
90-
* @Last Modified by: ASCII-ART
91-
* @Last Modified time: 2023-07-18 09:53:04
107+
* @Last Modified by: markyun
108+
* @Last Modified time: 2024-09-26 16:52:59
92109
*/
110+
93111
{
94112

95113
"editor.multiCursorModifier": "ctrlCmd",
@@ -510,7 +528,7 @@ resolve: {
510528
},
511529
```
512530
最后，如果插件编辑器的语言状态，都成功加载了对应的配置，就能正常工作了。
513-
![image.png](https://cdn.nlark.com/yuque/0/2023/png/203859/1702005780118-d3891327-5acc-4e43-97f4-f83b73b53132.png)
531+
![image.png](https://cdn.nlark.com/yuque/0/2023/png/203859/1702005780118-d3891327-5acc-4e43-97f4-f83b73b53132.png#averageHue=%23383739&clientId=u666fbd0b-50c6-4&from=paste&height=306&id=u3ed33181&originHeight=459&originWidth=859&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=47186&status=done&style=none&taskId=u10ecb9ee-1d23-4f48-b6a0-2330d68dad8&title=&width=572.6666666666666)
514532

515533

516534
## 使用 .gitignore_global 忽略 .vscode 文件夹
@@ -561,16 +579,11 @@ git config --global core.excludesfile ~/.gitignore_global
561579
562580
```
563581
564-
##
565-
566582
## 内置终端
567583
568584
569585
可以快速了解当前环境变量，在终端中运行 printenv。
570586
```jsx
571587
printenv
572588
```
573-
![image.png](https://cdn.nlark.com/yuque/0/2023/png/203859/1698304214991-b1464bac-7230-4940-bf27-d3075af7e95c.png)
574-
可以轻松地将终端分成两边。我经常用一边运行开发服务器，用另一边执行随机的终端命令（git 命令、linting 命令、随机任务等）。超级方便。
575-
576-
589+
![image.png](https://cdn.nlark.com/yuque/0/2023/png/203859/1698304214991-b1464bac-7230-4940-bf27-d3075af7e95c.png#averageHue=%23161514&clientId=u1af1eb05-a548-4&from=paste&height=879&id=u471e72e9&originHeight=1318&originWidth=1870&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=182436&status=done&style=none&taskId=u309e460b-bec0-47e9-9ee9-1e7a13fe74a&title=&width=1246.6666666666667)

‎content/blog/MyVSCodePlugin.md‎

Lines changed: 65 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -11,60 +11,78 @@ featured: true
1111

1212
## 我安装的 VS Code 插件 (**Extensions**)
1313

14-
### 常规类
1514

16-
> vscode-fileheader、
17-
> Auto Close Tag,
18-
> Auto Rename Tag ,
19-
> CSSComb、
20-
> Prettier 、
21-
> CSSRem (px to rem & rpx & vw ),
22-
> Remove Comments,
23-
> Live Server,
24-
> Color Highlight ,
25-
> GitLens 代码编辑历史、
26-
> Git History 历史记录并搜索提交、消息、分支、
27-
> Import Cost（查看导入包的大小）、
28-
> CSS PEEK（类名与样式关联）、
29-
> Colorize 可视化 CSS 颜色
30-
> TODO Highlight,
31-
> Svg Preview,
32-
> Excel Viewer,
33-
> filesize、
34-
> Open in Browser,
35-
> toggle-upper-case、
36-
> indent-rainbow（代码缩进高亮）、
37-
> Better Comments (Comment Highlighting)
15+
### 快捷键
3816

17+
ctrl f：搜索
18+
ctrl g：定位到某行
19+
F12：跳转到函数定义
20+
ctrl - #回到定义
3921

40-
### 纠正类
22+
alt + ↑ 向上移动一行；
23+
alt + ↓ 向下移动一行
4124

42-
> AutoCorrect 用于「自动纠正」或「检查并建议」文案、给 CJK（中文、日语、韩语）与英文混写的场景，补充正确的空格，同时尝试以安全的方式自动纠正标点符号
43-
> Code Spell Checker（检测单词错误）、
44-
> Bracket Pair Colorizer 括号高亮配对
45-
> Error Lens
25+
ctrl `: 打开内置shell
26+
Shift + Alt +A 块区域注释
27+
ctrl shift k：删除当前行
28+
tab：填入自动补全内容
4629

30+
### 配置
4731

32+
// 出现推荐值时，按下Tab键是否自动填入最佳推荐值
33+
"editor.tabCompletion": "on",
4834

49-
### 工具类
35+
### 常规类
5036

51-
> Turbo Console Log 无需手动添加日志。通过单击一个按钮添加控制台日志、
52-
> Remove Comments 删除代码中的所有注释。
53-
> Regex Previewer,
54-
> CodeSnap（生成代码选中图片 Take beautiful screenshots of your code in VS Code!）、
55-
> Markdown Preview Enhanced,
56-
> Material icons ,
57-
> File Nesting Updater,
58-
>
37+
vscode-fileheader、
38+
Auto Close Tag、
39+
Auto Rename Tag 、
40+
CSSComb、
41+
Prettier 、
42+
CSSRem （px to rem & rpx & vw ）、
43+
Remove Comments、
44+
Live Server、
45+
Color Highlight 、
46+
GitLens 代码编辑历史、
47+
Git History 历史记录并搜索提交、消息、分支、
48+
Import Cost（查看导入包的大小）、
49+
CSS PEEK（类名与样式关联）、
50+
Colorize 可视化 CSS 颜色
51+
indent-rainbow（代码缩进高亮）、
5952

6053

61-
### 主动提示
54+
### 纠正类
6255

63-
> Path Intellisense,
64-
> cssModules、
65-
> Parameter Hints（入参格式提示）、
66-
> Quokka.js
56+
AutoCorrect 用于「自动纠正」或「检查并建议」文案 、给 CJK（中文、日语、韩语）与英文混写的场景，补充正确的空格，同时尝试以安全的方式自动纠正标点符号
57+
Code Spell Checker（检测单词错误）、
58+
Bracket Pair Colorizer 括号高亮配对
59+
Error Lens
60+
VSCode React Refactor （提取成函数）
6761

62+
### 工具类
63+
64+
Turbo Console Log 无需手动添加日志。通过单击一个按钮添加控制台日志、
65+
Remove Comments 删除代码中的所有注释。
66+
Regex Previewer、
67+
CodeSnap（生成代码选中图片 Take beautiful screenshots of your code in VS Code!）、
68+
Markdown Preview Enhanced、
69+
Material icons 、
70+
File Nesting Updater、
71+
Better Comments (Comment Highlighting)
72+
Svg Preview、
73+
Excel Viewer、
74+
filesize、
75+
Open in Browser、
76+
toggle-upper-case、
77+
78+
### 主动提示
79+
80+
Path Intellisense、
81+
TODO Highlight、
82+
ES7+ React/Redux/React-Native snippets （语法提示）
83+
cssModules、
84+
Parameter Hints（ 入参格式提示 ）、
85+
Quokka.js
6886

6987
### AI 类工具
7088

@@ -80,16 +98,16 @@ featured: true
8098
> Peacock 打开多个 VS Code 实例显示不同颜色
8199

82100

83-
84-
85101
## JSON Settings
102+
86103
```json
87104
/*
88105
* @Author: ASCII-ART
89106
* @Date: 2017-10-26 14:04:17
90-
* @Last Modified by: ASCII-ART
91-
* @Last Modified time: 2023-07-18 09:53:04
107+
* @Last Modified by: markyun
108+
* @Last Modified time: 2024-09-26 16:52:59
92109
*/
110+
93111
{
94112

95113
"editor.multiCursorModifier": "ctrlCmd",
@@ -561,16 +579,11 @@ git config --global core.excludesfile ~/.gitignore_global
561579
562580
```
563581
564-
##
565-
566582
## 内置终端
567583
568584
569585
可以快速了解当前环境变量，在终端中运行 printenv。
570586
```jsx
571587
printenv
572588
```
573-
![image.png](https://cdn.nlark.com/yuque/0/2023/png/203859/1698304214991-b1464bac-7230-4940-bf27-d3075af7e95c.png#averageHue=%23161514&clientId=u1af1eb05-a548-4&from=paste&height=879&id=u471e72e9&originHeight=1318&originWidth=1870&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=182436&status=done&style=none&taskId=u309e460b-bec0-47e9-9ee9-1e7a13fe74a&title=&width=1246.6666666666667)
574-
可以轻松地将终端分成两边。我经常用一边运行开发服务器，用另一边执行随机的终端命令（git 命令、linting 命令、随机任务等）。超级方便。
575-
576-
589+
![image.png](https://cdn.nlark.com/yuque/0/2023/png/203859/1698304214991-b1464bac-7230-4940-bf27-d3075af7e95c.png#averageHue=%23161514&clientId=u1af1eb05-a548-4&from=paste&height=879&id=u471e72e9&originHeight=1318&originWidth=1870&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=182436&status=done&style=none&taskId=u309e460b-bec0-47e9-9ee9-1e7a13fe74a&title=&width=1246.6666666666667)

0 commit comments

Comments
 (0)