VSCode插件推荐(Web前端开发均适用)

迭代流星
• 阅读 14243

众多插件里难免有几个功能相近的,选一个合适自己的就好了,我会按照自己的习惯标上(推荐)~

这会不定期更新,如果你们有什么好用的插件,也可以在评论区推荐,我会试用后添加上去的,谢谢你们啦

插件列表

名称 简述
Auto Close Tag 自动闭合HTML标签
Auto Import Typescript或TSX中自动import提示
Auto Rename Tag 修改HTML标签时,自动修改匹配的标签
Beautify 美化格式化代码,可通过自行配置.jsbeautifyrc自定义
Better Align 对齐赋值符号和注释
Better Comments 编写更加人性化的注释(推荐)
Bookmarks 给代码行添加书签,快速换切
Code Runner 运行选中代码段(支持大量语言)
Code Spellchecker 单词拼写检查
Can I Use HTML5、CSS3、SVG的浏览器兼容性检查
Color Highlight 颜色值在代码中高亮显示
Color Info 小窗口显示颜色值,rgb,hsl,cmyk,hex等等
Color Picker 拾色器
Debugger for Chrome 调试Chrome
ESLint ESLint插件,高亮提示
Git History 查看git log
IntelliSense for CSS class names in HTML CSS class提示
HTML CSS Support css提示(支持vue)
HTMLHint HTML语法格式提示
Import Cost 行内显示导入(import/require)的包的大小
JavaScript (ES6) code snippets ES6语法代码提示
JSON Tools 格式化和压缩JSON
Log Wrapper 生成所选中变量的打印语句(console.log('name' + name))
Output Colorizer 彩色化输出框中的信息
Partial Diff 对比两段代码或文件
Path Intellisense 路径完成提示
Prettier 格式化代码(html,js,css,vue...) (推荐)
Prettify JSON 格式化JSON
Project Manager 多个项目间管理
Quokka.js 不需要手动运行,行内显示变量结果
REST Client 直接在编辑器中发送REST风格的HTTP请求,并显示返回http信息
Sass sass插件
Settings Sync VSCode设置同步到Gist
Stylelint css/sass/less代码风格规范
Version Lens package.json文件显示模块当前版本和最新版本
VueHelper Vue2代码段提示(包括Vue2 api、vue-router2、vuex2)
npm Intellisense 导入模块时,提示已安装模块名称
Vetur Vue语法高亮
vscode-icons 文件图标,方便定位文件
View In Browser 快读打开浏览器Ctrl+F1

个人的VSCode首选项设置(仅供参考)

{
  "editor.tabSize": 2,
  "files.associations": {
      "*.vue": "vue"
  },
  "eslint.autoFixOnSave": true,
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue"
      ]
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue",
      "vue-html"
  ],
  "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/dist": true
  },
  "emmet.syntaxProfiles": {
      "javascript": "jsx",
      "vue": "html",
      "vue-html": "html"
  },
  "git.confirmSync": false,
  "window.zoomLevel": 0,
  "vsicons.projectDetection.autoReload": true,
  "typescript.check.tscVersion": false,
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "workbench.colorTheme": "Solarized Light",
  "workbench.iconTheme": "vscode-great-icons",
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "tslint.autoFixOnSave": true,
  "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "beautify.tabSize": 2,
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "typescript.extension.sortImports.maxNamedImportsInSingleLine": 5,
  "typescript.extension.sortImports.omitSemicolon": true,
  "editor.codeLens": true,
  "editor.snippetSuggestions": "top",
  "react-native-storybooks.port": 6006
}
点赞
收藏
评论区
推荐文章
20pzqm 20pzqm
4年前
golang 基于grpc的插件框架——go-plugin 使用入门
golang基于grpc的插件框架——goplugin使用入门说说我对插件的理解大家都用过vscode,当我们想要在vscode中格式化json的时候,很简单,去插件市场安装一个jsontools就好了;想要使用eclipse的键盘快捷方式,安装一个eclipsekeymap就可以.由此可见,插件帮助我们扩展原有程序的功能,同时它与原有工程是解耦
Stella981 Stella981
4年前
Jira 使用手册
<tablestyle"width:100%;margin:200px0300px0;"<tr<thDate</th<thRevisionversion</th<thDescription</th<thauthor</th</tr<tr<td20180614</td<tdV1.0.0</td
Stella981 Stella981
4年前
Chrome神器插件—油猴Tampermonkey
原文链接: Chrome神器插件—油猴Tampermonkey(https://my.oschina.net/ahaoboy/blog/3045762)今天给大家推荐的一款”神器插件”叫油猴,英文为Tampermonkey常用的好用的插件汇总https://github.com/zhaoolee/ChromeAppHeroes(htt
Wesley13 Wesley13
4年前
Android非常有用的开源库介绍整理
Android开源库自己一直很喜欢Android开发,就如博客副标题一样,我想做个好的App。在摸索过程中,GitHub上搜集了很多很棒的Android第三方库,推荐给在苦苦寻找的开发者,而且我会不定期的更新这篇文章。本文的其他贡献者: \_\_\_\_sky\_\_\_\_(https://www.oschina.ne
Wesley13 Wesley13
4年前
vscode代码自动补全失效
前段时间,朋友说自己的vscode突然出现了代码不能自动补全的问题(主要是js,其他语言也可以参考)症状表现为,刚打开vscode有自动补全,过了一会,突然就没了,反反复复解决过程也是相当坎坷了开始其实就解决了,推测是插件引起的冲突,只不过以为失败了,而且开始只设想到了vscode的扩展插件。新建了一个文件夹,新建一个js文件,这
Wesley13 Wesley13
4年前
5个让你如虎添翼的Atom实用插件推荐
!(https://oscimg.oschina.net/oscnet/71e4848a32104c49b56cfc4a1ba83c52.png)Javascript/CSS/HTML等的前端编辑器Atom可以说是IDE神器,其强大功能来自于各种神奇的插件,下面推荐5个神奇的实用插件,这些插件只需要在Atom的Filesetting
Wesley13 Wesley13
4年前
Java 日期与时间
Java的日期Java没有内置的日期类,但可以导入java.time包,这个包中包含了许多类,可用于处理日期和时间。例如:<table<tbody<tr<thstyle"width:25%"Java类</th<thstyle"width:75%"描述</th</tr<tr<td<code
Stella981 Stella981
4年前
Intellij IDEA安装阿里代码规范插件
要养成一个好的编码习惯从自己编码开始,对自己代码的合理化命名,编码不仅对自己有好处,而且别人也容易读懂你的代码。所以下载阿里的代码规范插件来约束自己凌乱的代码。阿里规范插件GitHub地址:https://github.com/alibaba/p3cIDEA安装该插件步骤:1.打开IDEA,FileSetteingsPlug
林十二 林十二
2年前
vscode GraphQL插件踩坑
TLDRvscode的GraphQL语法插件,目前比较推荐GraphqlFoundation的GraphQL:LanguageFeatureSupport相关配置,见配置文件的语法规则,参考背景之前用的GraphQL插件,只开启了语法高亮.自己写的sche
小万哥 小万哥
2年前
2023 Visual Studio Code 插件推荐:18 个提高开发效率的常用插件
VisualStudioCode(简称VSCode)是一款强大的开源代码编辑器,它拥有众多功能强大的扩展插件,使得开发者可以根据自己的需求来定制编辑器的功能和外观。在本文中,我们将分享一些非常实用的VSCode插件,这些插件将提高您的开发效率,使编码变得更
程序员小五 程序员小五
1年前
融云IM干货丨uni-app有哪些常用的插件?
uniapp拥有丰富的插件生态,以下是一些常用的插件推荐:1.图片编辑插件:BaImageEditor:功能强大的uniapp图片编辑插件,支持涂鸦、贴图、滤镜、裁剪、旋转、添加文字、美颜等。BaImagePaint:uniapp图片涂鸦、画笔插件,支持大