VSCode常用插件

已于 2024-02-03 21:38:53 修改
阅读量2.2k 收藏 9
点赞数 1
分类专栏： Web前端 文章标签： vscode
于 2022-09-09 09:39:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao3756/article/details/126776733
版权

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,

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"
  },

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"
  • 或者在项目根目录下创建.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"
   };

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"]
}

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
        },
    }

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%"
    ],
  • 升级 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
  },

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
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vscode-excel-to-markdown-table:VSCode扩展，可将Excel副本粘贴为降价表格式
05-17
excel到markdown表自述文件 此VSCode扩展将Excel数据转换为Markdown表格式。 通过命令Excel to Markdown table和键盘快捷键Shift+Alt+V （可选）通过在标题的前面加上^[lcr]来对齐列，以实现左对齐，居中对齐和右对齐。 例如， ^lHeader用于左对齐名为Header的列。 基于以及@jonmagic和@thisdavej的工作 贡献者 @deshorsley，用于错误修复和测试范围！ @tylerhaigh进行重构和测试覆盖！ @usagi用于新的行处理和重构！ 已知的问题 没有任何
VScode使用全指南 (环境配置，插件推荐，美化) (C++,Python,LaTeX,R...)
lovely_yoshino的博客
12-26 6374
谨以本文记录我用vscode一年的坑比经历，为了这编辑器学了git，json，正则(去死吧qwq) 简介那堆废话就不说了，直接开始！ 1.安装 打开官网直接下载(推荐测试版insider)， 安装时让有一个界面有好几个打钩的，全打上，一路下一步 wow，好用的插件全在图里 2.基础的用法 第一次打开以后发现这玩意居然是英文的，莫慌，看到左侧有一个这样的工具栏 - 第一个是资源管理器，第二个是git，第三个是调试，第四个是扩展市场 选择第四个，输入chinese，选择第一个插件，点击install(安装)
vs code导入excel文件并且解析excel文件数据
最新发布
weixin_45342302的博客
01-02 1522
实习工作需要通过vs code导入excel文件并且解析excel文件数据，学习整理了一下相关方法分享给大家^_^
Excel转json工具
10-14
Excel转json工具
vscode常用插件压缩包
07-13
vscode常用插件压缩包
vscode-faker:使用Faker在VS Code中生成伪造数据
05-02
VSCode Faker 在Visual Studio Code中生成伪造数据。 伪数据基于 。 可以生成的伪数据： 地址 商业 公司 数据库 日期 金融 黑客 图像 互联网 洛雷姆 名称 电话 随机的 系统 安装 输入cmd + shift + p启动命令选项板，然后选择Extensions: Install Extension 。 搜索伪造者并安装。 用法 输入cmd + shift + p 选择假数据类别 选择子类别 变更地区 打开用户设置或按cmd + ， 插入faker.locale ，后跟区域设置标识符，如下所示 " faker.locale " : " id_ID " 请参阅 执照 麻省理工学院:copyright:
在VS Code中查看Word, PDF, Excel
微小冷的学习笔记
11-21 5969
但这个插件有一个坑点，就是会更改markdown文件的格式，所以安装之后，可以取消对markdown文件的默认开启方式。方法很简单，只需右键单击一个markdown文件，选择打开方式，在命令栏中选择最下面的为*.md配置默认编辑器，最后点击文本编辑器就可以了。
使用Vscode 编辑器 导出、导入和运行Excel中的VBA代码
Thinking In Java
08-20 4009
使用VS code 编辑器 导出、导入和运行Excel中的VBA代码
分享六个 Vue3 开发必备的 VSCode 插件
热门推荐
前端程序员、项目经理、人工智能博主
11-07 1万+
今天分享的 6 个插件，大家可以按需安装使用。我比较强烈推荐实用Volar 和Vue VSCode Snippets 这 2 个插件。
VS Code常用插件记录
知识的海洋
04-12 2344
在使用VSCode时，常用到的插件。
在VS中使用代码导入Excel表中的数据
06-12
这里面有一些基础的关于怎么从数据库中把表信息导入到Excel文件中，还有怎么将Excel表中的数据显示到DataGridView中去的代码，写的很基础。
vscode常用插件包Linux C
10-30
ubuntu下安装vscode，linux c常用插件包vsix
vscode常用插件整理汇总
10-15
本文给大家整理汇总了17个常用的vscode装B插件,都是作者费心整理出来的,希望大家能够喜欢
VsCode常用插件(前端开发)
07-13
VsCode常用插件(前端开发)，上传备用，免费下载。
vscode插件包.rar
08-05
中文插件 C++插件等
vscode常用插件、非常好用、解决了棘手的问题！！
05-05
安装之后，敲代码的速度更快！奥利给
vscode插件离线安装包
08-30
vscode插件离线安装包
idea+vscode常用插件.rar
12-20
idea：alibaba code guide，git commit template vscode: jquery anni,,prettify json, auto rename tags
Vscode常用插件及安装-改.pdf
04-12
Vscode常用插件及安装-改.pdf
在vscode中配置git
08-25
在VSCode中配置Git，首先需要进行以下几个步骤： 1. 克隆Git仓库：获取要克隆的Git地址，可以使用命令`git clone <repository-url>`进行克隆。 2. 打开VSCode：重新打开VSCode，确保处于正确的工作目录。 3. 配置Git路径：在VSCode中打开设置（Preferences -> Settings），搜索并找到Git配置项。在配置中找到`git.path`，并设置为Git可执行文件的路径，例如`"git.path": "S:/1install/Git/bin/git.exe"`。 4. 绑定远程代码库：在VSCode终端中使用命令`git remote add origin <repository-url>`将本地仓库与远程代码库进行绑定。 通过以上步骤，你就可以在VSCode中成功配置Git，并进行版本控制和代码管理了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vscode配置git](https://blog.csdn.net/qq_40837795/article/details/129115300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [vscode环境中配置git](https://blog.csdn.net/allen1880/article/details/128203694)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

富贵儿别怕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值