VSCode常用插件_vscode excel

VSCode常用插件

1. aiXcoder Code Completer

AiXcoder 是一个强大的代码完成器和代码搜索引擎，基于最先进的深度学习技术。
它有可能为您推荐一整行代码，这将帮助您更快地编写代码。
AiXcoder 还提供了一个代码搜索引擎，可以帮助您在 GitHub 上搜索 API 用例。

2. Auto Close Tag

自动补全结束标签

3. Auto Rename Tag

重命名一个HTML / XML标签时,自动重命名配对的HTML / XML标签

4. Color Info

光标在颜色上悬停即可出现色彩模型

5. CSS Peek

在HTML文件中右键单击选择器可快速到指定的css样式
安装完成后打开HTML文件，按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。
这个仅仅对html中引用外部样式(即单独css文件) 有用,对vue内部样式没有用

6. ENV

为.env文件添加格式和语法高亮支持

7. Excel Viewer

使VSCode可以预览excel文件

8. filesize

在底部状态栏显示当前文件的大小

9. GitLens

查看项目提交记录、文件修改记录等

10. Image preview

可以预览图片

• 配置内容

 // 图片预览配置
  "gutterpreview.currentColorForSVG": "white",  // svg预览中使用的默认颜色
  "gutterpreview.enableReferenceLookup": true, // 指示是否应该从引用解析资源的标志
  "gutterpreview.imagePreviewMaxHeight": 100, // 预览图片高度最大值
  "gutterpreview.paths": {}, // 指示图像预览是否应显示在左侧的行栏
  "gutterpreview.showUnderline": true, // 是否对已识别的url加下划线
  "gutterpreview.sourceFolder": "src",
  "gutterpreview.showImagePreviewOnGutter": true, // 指示图像预览是否应显示在左侧的行栏
  "gutterpreview.imagePreviewMaxWidth": 0,
1
2
3
4
5
6
7
8
9

11. indent-rainbow

高亮（每行代码之前的）缩进

12. Icon Fonts

对热门的字体图标提供代码提示

13. JavaScript(ES6) code snippets

js语法提示

14. HTML Boilerplate

在.html文件中输入html快速生成html文档结构

15. HTML CSS Support

css智能提示

16. HTML Snippets

是h5代码片段及提示

17. Live Server

本地服务器及热加载

18. One Dark Pro

主题

19. open in browser

使用默认浏览器打开当前文件

20. Path Autocomplete

自动路径补全

• 配置内容

  // 导入文件时是否携带文件的扩展名
  "path-autocomplete.extensionOnImport": true,
  //配置@的路径提示
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },
1
2
3
4
5
6

21. Prettier - Code formatter

代码格式化

• vscode 配置setting.json

"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[css]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[html]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[scss]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[less]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[vue]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},

	 /*  prettier的配置 */
  "prettier.printWidth": 100, // 超过最大值换行
  "prettier.tabWidth": 2, // 缩进字节数
  "prettier.useTabs": true, // 句尾添加分号
  "prettier.singleQuote": false, // 使用单引号代替双引号
  "prettier.proseWrap": "preserve", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.bracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.tslintIntegration": false,
  "prettier.arrowParens": "avoid",

	/*  保存时自动格式化 */
	"editor.formatOnSave": true,
	"editor.formatOnType": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode"
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

• 或者在项目根目录下创建.prettierrc.js

module.exports = {
 	printWidth: 130,
 	tabWidth: 2,
  	useTabs: true,
  	singleQuote: false,
	proseWrap: "always",
  	bracketSpacing: true,
  	endOfLine: "auto",
   	eslintIntegration: false,
  	htmlWhitespaceSensitivity: "ignore",
  	ignorePath: ".prettierignore",
 	bracketSameLine: false,
   jsxSingleQuote: false,
   parser: "babylon",
  	requireConfig: false,
   stylelintIntegration: false,
   trailingComma: "none",
   tslintIntegration: false,
   arrowParens: "avoid"
   };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

22. Project Manager

管理多个项目, 轻松切换

23. TODO Highlight

高亮 todo/fixme 标签

24. Vant Snippets

vant智能提示

25. Vetur

vue工具

26. vscode-icons

vscode图标

27. Vue 3 Snippets

vue3 和vue2 代码块 智能提示

28. vue-helper

vue增强

29. VueHelper

vue, vue-router, vuex 智能提示

30. Material Icon Theme

为文件和文件夹提供图标

31. Less IntelliSense

less 智能提示

32. SCSS IntelliSense

sass智能提示

33. Sass

语法高亮，自动提示功能

34. Regex Previewer

实时测试正则表达式的使用工具，它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。

35. vscode-faker

流行的js库，能快速插入用例数据。

36. vue peek

• 解决带@的相对目录不能跳转问题
• 或者使用jsconfig.json试试

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        },
        "target": "ES6",
        "allowSyntheticDefaultImports": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}
1
2
3
4
5
6
7
8
9
10
11
12

37. koroFileHeader

用于生成文件头部注释和函数注释的插件，支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！

• 配置内容

  "fileheader.customMade": {
        // 头部注释默认字段
        "Author": "作者名",
        "Date": "Do not edit", // 设置后默认设置文件生成时间
        "LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
        "LastEditors": "最后编辑人", // 设置后，保存文件更改默认更新最后编辑人
        "Description": "",
        "FilePath": "Do not edit", // 设置后，默认生成文件相对于项目的路径
        "custom_string_obkoro1": "@ascription 归属"
    },
    // 函数注释
    "fileheader.cursorMode": {
        // 默认字段
        "description": "",
        "param": "",
        "return": ""
    },
    // 插件配置项
    "fileheader.configObj": {
        "autoAdd": true, // 检测文件没有头部注释，自动添加文件头部注释
        "autoAddLine": 300, // 文件超过多少行数 不再自动添加头部注释
        "autoAlready": true, // 只添加插件支持的语言以及用户通过`language`选项自定义的注释
        "supportAutoLanguage": [], // 设置之后，在数组内的文件才支持自动添加
        // 自动添加头部注释黑名单
        "prohibitAutoAdd": [
            "json"
        ],
        "prohibitItemAutoAdd": [
            "项目的全称禁止项目自动添加头部注释, 使用快捷键自行添加"
        ],
        "folderBlacklist": [
            "node_modules"
        ], // 文件夹或文件名禁止自动添加头部注释
        "wideSame": false, // 头部注释等宽设置
        "wideNum": 13, // 头部注释字段长度 默认为13
        "functionWideNum": 0, // 函数注释等宽设置 设为0 即为关闭
        // 头部注释第几行插入
        "headInsertLine": {
            "php": 2 // php文件 插入到第二行
        },
        "beforeAnnotation": {}, // 头部注释之前插入内容
        "afterAnnotation": {}, // 头部注释之后插入内容
        "specialOptions": {}, // 特殊字段自定义
        "switch": {
            "newlineAddAnnotation": true // 默认遇到换行符(\r\n \n \r)添加注释符号
        },
        "moveCursor": true, // 自动移动光标到Description所在行
        "dateFormat": "YYYY-MM-DD HH:mm:ss",
        "atSymbol": [
            "@",
            "@"
        ], // 更改所有文件的自定义注释中的@符号
        "atSymbolObj": {}, //  更改单独语言/文件的@
        "colon": [
            ": ",
            ": "
        ], // 更改所有文件的注释冒号
        "colonObj": {}, //  更改单独语言/文件的冒号
        "filePathColon": "路径分隔符替换", // 默认值： mac: / window是: \
        "showErrorMessage": false, // 是否显示插件错误通知 用于debugger
        "writeLog": false, // 错误日志生成
        "CheckFileChange": false, // 单个文件保存时进行diff检查
        "createHeader": true, // 新建文件自动添加头部注释
        "useWorker": false, // 是否使用工作区设置
        "designAddHead": false, // 添加注释图案时添加头部注释
        "headDesignName": "random", // 图案注释使用哪个图案 
        "headDesign": false, // 是否使用图案注释替换头部注释
        // 自定义配置是否在函数内生成注释 不同文件类型和语言类型
        "cursorModeInternalAll": {}, // 默认为false 在函数外生成函数注释
        "openFunctionParamsCheck": true, // 开启关闭自动提取添加函数参数
        "functionParamsShape": [
            "{",
            "}"
        ], // 函数参数外形自定义 
        // "functionParamsShape": "no type" 函数参数不需要类型
        "functionBlankSpaceAll": {}, // 函数注释空格缩进 默认为空对象 默认值为0 不缩进
        "functionTypeSymbol": "*", // 参数没有类型时的默认值
        "typeParamOrder": "type param", // 参数类型 和 参数的位置自定义
        // 自定义语言注释，自定义取消 head、end 部分
        // 不设置自定义配置language无效 默认都有head、end
        "customHasHeadEnd": {}, // "cancel head and function" | "cancel head" | "cancel function" 
        "throttleTime": 60000, // 对同一个文件 需要过1分钟再次修改文件并保存才会更新注释
        // 自定义语言注释符号，覆盖插件的注释格式
        "language": {
            // js后缀文件
            "js": {
                "head": "/$$",
                "middle": " $ @",
                "end": " $/",
                // 函数自定义注释符号：如果有此配置 会默认使用
                "functionSymbol": {
                    "head": "/******* ", // 统一增加几个*号
                    "middle": " * @",
                    "end": " */"
                },
                "functionParams": "typescript" // 函数注释使用ts语言的解析逻辑
            },
            // 一次匹配多种文件后缀文件 不用重复设置
            "h/hpp/cpp": {
                "head": "/*** ", // 统一增加几个*号
                "middle": " * @",
                "end": " */"
            },
            // 针对有特殊要求的文件如：test.blade.php
            "blade.php": {
                "head": "<!--",
                "middle": " * @",
                "end": "-->",
            }
        },
        // 默认注释  没有匹配到注释符号的时候使用。
        "annotationStr": {
            "head": "/*",
            "middle": " * @",
            "end": " */",
            "use": 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

38. Color Highlight

文档内颜色高亮

39. Vue VSCode Snippets

快速生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。
该插件支持：Volar、Vue2 和 Vue3。

40. Volar

Vue 团队官方推荐 Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

41. Vite

Vite 插件可以让我们打开项目后，就能自动启动开发服务器，允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。

42. npm Intellisense

可以让我们在编写JavaScript的时候有npm依赖包的提示。

43. Live Sass Compiler

实时将Sass或Scss编译为CSS。

44. Autoprefixer

分析CSS并自动添加供应商前缀。
使用方法: 在要补全的CSS文件中ctrl+shift+p，然后选择Autoprofixer，这样就可以自动补全了

• 2.x版本的配置

    "autoprefixer.formatOnSave": true,
    "autoprefixer.browsers": [
       "last 3 versions",
        "ie >= 10",
        "ie_mob >= 10",
        "ff >= 30",
        "chrome >= 34",
        "safari >= 6",
        "ios >= 6",
        "android >= 4.4",
      	"> 5%"
    ],
1
2
3
4
5
6
7
8
9
10
11
12

• 升级 autoprefixer到最新版的时候，发现配置项变黑了，说明更新了, 需要换成

  //保存自动给css添加前缀
  "autoprefixer.formatOnSave": true,
  "autoprefixer.options": {
    // 定义浏览器参数
    "overrideBrowserslist": [
     	"last 3 versions",
        "ie >= 10",
        "ie_mob >= 10",
        "ff >= 30",
        "chrome >= 34",
        "safari >= 6",
        "ios >= 6",
        "android >= 4.4",
     	"> 5%"
    ],
    // 是否添加浏览器前缀，默认：true 
    "cascade": true,
    // 是否移除不必要的浏览器前缀，默认：true      
    "remove": true
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

45. TypeScript Vue Plugin (Volar)

ts插件

46. Turbo Console Log

快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log

ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
1
2
3
4