前端开发vscode的常用插件

vscode前端开发常用插件汇总 1.HTML Snippets 超级实用且初级的 H5代码片段以及提示 2.HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式 3.Debugger for Chrome 让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试 https://github.com/Microsoft/vscode-chrome-debug/blob/master/images/demo.gif?raw=true ​ github. 阅读详情

VsCode开发Vue的常用插件(配置文件)


  1. Atom One Dark Theme
  2. Auto Close Tag
  3. Auto Complete Tag
  4. Auto Rename Tag
  5. Bracket Pair Colorizer 2
  6. CSS Navigation
  7. EditorConfig for VS Code
  8. ESLint
  9. GitLens — Git supercharged
  10. Highlight Matching Tag
  11. Import Cost
  12. indent-rainbow
  13. JSON to TS
  14. Kite AutoComplete AI Code
  15. Material Icon Theme
  16. npm Intellisense
  17. px to rem & rpx (cssrem)
  18. SCSS Everywhere
  19. Settings Sync
  20. stylelint
  21. Trailing Spaces
  22. Version Lens
  23. Vetur
  24. Visual Studio IntelliCode
  25. Vue i18n
  26. vue-helper
{
  // vscode性能优化
  "telemetry.enableTelemetry": false,
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/.vscode": true,
    "**/__pycache__": true,
    "**/.pytest_cache": true,
    "**/node_modules": true,
    "venv": true,
    "*.sublime-*": true,
    "env*": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/env": true,
    "**/venv": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/env/**": true,
    "**/venv/**": true,
    "env-*": true
  },
  // 编辑器设置
  "editor.fontSize": 15,
  "editor.fontWeight": 500,
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', 'Source Code Pro', monospace",
  "editor.tokenColorCustomizations": {
    "comments": "#968372", // 注释颜色
    "keywords": "#FEDE5D", // 关键字颜色
    "textMateRules": [
      {
        "name": "italic font",
        "scope": [
          "comment",
          "keyword",
          "storage",
          "keyword.control.import",
          "keyword.control.default",
          "keyword.control.from",
          "keyword.operator.new",
          "keyword.control.export",
          "keyword.control.flow",
          "storage.type.class",
          "storage.type.function",
          "storage.type",
          "storage.type.class",
          "variable.language",
          "variable.language.super",
          "variable.language.this",
          "meta.var.expr",
          "constant.language.null",
          "support.type.primitive",
          "entity.name.method.js",
          "entity.other.attribute-name",
          "punctuation.definition.comment",
          "text.html.basic entity.other.attribute-name.html",
          "text.html.basic entity.other.attribute-name",
          "tag.decorator.js entity.name.tag.js",
          "tag.decorator.js punctuation.definition.tag.js",
          "source.js constant.other.object.key.js string.unquoted.label.js",
        ],
        "settings": {
          "fontStyle": "italic",
        }
      },
    ]
  },
  "editor.letterSpacing": 0.5,
  "editor.fontLigatures": true, // 这个控制是否启用字体连字,true启用,false不启用,这里选择启用
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "window.title": "${dirty} ${rootName}${separator}${activeEditorMedium}",
  "breadcrumbs.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.minimap.maxColumn": 200,
  "editor.minimap.showSlider": "always",
  "editor.unfoldOnClickAfterEndOfLine": true,
  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "terminal.integrated.cursorStyle": "underline",
  "terminal.integrated.fontSize": 15,
  "terminal.integrated.shell.osx": "/bin/zsh",
  // git配置
  "git.autofetch": true,
  "git.rebaseWhenSync": true,
  "git.autofetchPeriod": 60,
  "git.fetchOnPull": true,
  "git.ignoreLegacyWarning": false,
  "git.showPushSuccessNotification": true,
  "git.autoStash": true,
  "git.autoRepositoryDetection": "openEditors",
  "git.ignoreLimitWarning": true,
  "git.inputValidationLength": 100,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  // 图标主题配置
  "material-icon-theme.activeIconPack": "vue_vuex",
  "material-icon-theme.folders.theme": "specific",
  "material-icon-theme.hidesExplorerArrows": false,
  "material-icon-theme.folders.color": "#26a69a",
  // 主题配置
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Atom One Dark",
  "workbench.colorCustomizations": {
    "terminal.background": "#333842",
  },
  // emmet语法
  "emmet.showExpandedAbbreviation": "always",
  "emmet.triggerExpansionOnTab": true,
  "emmet.optimizeStylesheetParsing": false,
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "nvue": "html"
  },
  // css智能提示
  "html-css-class-completion.enableEmmetSupport": true,
  "html-css-class-completion.enableFindUsage": true,
  "html-css-class-completion.enableScssFindUsage": true,
  "html-css-class-completion.includeGlobPattern": "**/*.{css,scss,sass,html}",
  "html-css-class-completion.remoteStyleSheets": [
    "https://m.sadais.com/sadais-front/piui/piui.css"
  ],
  // lint 配置
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.packageManager": "yarn",
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
  },
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  // 标签高亮插件配置
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 .125rem",
          "borderStyle": "solid",
          "borderColor": "#ff508a",
          "borderRadius": ".25rem",
          "overviewRulerColor": "white"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 .125rem 0 0",
          "borderStyle": "solid",
          "borderColor": "#ff508a",
          "borderRadius": ".25rem",
          "overviewRulerColor": "white"
        }
      }
    }
  },
  // 插件配置
  "sync.gist": "1e774801956fbf0bb71a84c4b1bc958e",
  "kite.showWelcomeNotificationOnStartup": false,
  "bracket-pair-colorizer-2.showBracketsInGutter": true,
  "bracket-pair-colorizer-2.showBracketsInRuler": true,
  // TS配置
  "typescript.referencesCodeLens.showOnAllFunctions": true,
  "explorer.confirmDelete": false,
  "editor.suggestSelection": "first",
  "editor.gotoLocation.multipleDeclarations": "goto",
  "editor.gotoLocation.multipleDefinitions": "goto",
  "editor.gotoLocation.multipleTypeDefinitions": "goto",
  "CSSNavigation.alsoSearchDefinitionsInStyleTag": true,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.cursorSurroundingLinesStyle": "all",
  "editor.cursorBlinking": "expand",
}
vscode-textmate:一个使用Text Mate语法帮助标记文本的库 VSCode TextMate TextMate定义的语法文件的解释器。 TextMate语法使用oniguruma方言( )。 支持从JSON或PLIST格式加载语法文件。 该库在VS Code中使用。 目前不支持跨语法注入。 正在安装 npm install vscode-textmate 使用 const fs = require ( 'fs' ) ; const path = require ( 'path' ) ; const vsctm = require ( 'vscode-textmate' ) ; const oniguruma = require ( 'vscode-oniguruma' ) ; /** * Utility to read a file as a promise */ function readFile ( path ) { return 立即下载

相关推荐

2025-08-19利用opencv检测图片中文字及图片的坐标

该代码实现了图片中中文文本的检测与位置计算功能。主要使用CnOcr库进行OCR识别,结合OpenCV和PIL库处理图像。功能包括:1)检测图片中的中文文本及位置坐标;2)计算每个文本的像素宽度和高度;3)在原图上绘制文本边界框并标注识别结果。代码通过put_chinese_text函数解决中文显示问题,最终输出各文本内容、坐标位置及尺寸信息。适用于需要获取图片中文字精确位置的应用场景。

m0_58149406的博客 395

探索VSCode TextMate:代码编辑器背后的语法引擎

如果你是一位开发者,那么对Visual Studio Code (VSCode)肯定不陌生。作为一款流行的源代码编辑器,它的强大之处在于其丰富的扩展性和高度定制化。而在这背后,有一个关键组件默默地在为我们提供语法高亮和语言规则支持——那就是。 ## 项目简介 VSCode TextMate是微软为VSCode贡献的一个开源项目,它是一个实现了TextMate grammars规范的解析器。Te

gitblog_00006的博客 1693

SAP 配额修改 + 修改记录写入实现

采购配额修改并写入修改记录 cdhdr 和 cdpos

GAVIN 1099

VScode插件加载不出来解决办法

插件又能看见了,或许这些操作就是一场乌龙(重启个电脑就完了)最后重启电脑(我怀疑以上操作都没用,因为我没试过重启电脑)我的问题:如图,一直加载不出插件,重新安装,用魔法都不行。点击左下角齿轮,点击第一行。

unravel_tom的博客 4575

C++ 类

本文介绍了C++中类的核心概念和使用方法。

weixin_54859557的博客 1016

K230开发板实战:YOLOv8n模型部署全流程(附常见报错解决方案)

本文详细介绍了在K230开发板上部署YOLOv8n模型的完整流程,包括模型选型、配置文件优化和运行时调优。特别针对常见的'生成部署文件异常'等问题提供了实用解决方案,帮助开发者高效完成嵌入式AI模型的部署与优化。

g8f9d0s1a2的博客 1048

习惯的 vscode 配置

{ "update.enableWindowsBackgroundUpdates": false, "update.mode": "none", "update.showReleaseNotes": false, "telemetry.enableCrashReporter": false, "telemetry.enableTelemetry": false, "extensions.autoCheckUpdates": false, "exten.

好好学习,天天向上 ~ 348

Mac上Office合法安装与激活全指南:2021/2024/M365区别解析

Office是微软办公套件的核心产品,其在macOS平台的部署逻辑与Windows截然不同——不依赖传统密钥激活,而是基于Microsoft账户与设备标识的云端绑定机制。理解这一原理,是解决‘无法验证开发者’‘打不开’‘功能受限’等常见问题的前提。Office 2021代表永久许可模型,Office 2024 LTSC面向企业离线场景,Microsoft 365则是持续订阅服务,三者在授权验证方式、更新策略与系统兼容性上存在本质差异。实际应用中,需结合macOS版本、芯片架构(Intel/Apple Sil

weixin_33491377的博客 1290

记录VScode调试过慢的问题

问题: 最近在使用VScode的过程中调试慢到让人接受不了,遂寻找解决方案,重装VScode、在网上找了好多答案,尝试后均无法解决调试过慢的问题 解决方案: 由于之前在突然发现无法切换conda中的虚拟环境,于是添加conda的相关路径到系统的环境变量中,最后发现删除该环境变量即可正常进行调试 我使用的环境变量路径如下: D:\Anaconda3 D:\Anaconda3\Scripts D:\Anaconda3\Library\bin ...

whatever_ittakes的博客 6472

SpringBoot 插件化开发详细总结

SpringBoot 插件化开发方案总结

congge 1万+

“EXB文件的格式和编程“

首先,打开文件并读取文件头,然后解析文件头中的元数据信息。接下来,循环读取数据块,每次读取块头部分,解析块的大小和类型,并读取相应大小的块数据。文件头(Header):EXB文件通常包含一个文件头,用于存储关于文件的元数据信息。读取EXB文件时,首先需要解析文件头,以了解文件的属性和数据结构。总结起来,EXB文件是一种常见的二进制数据文件格式,在编程中处理EXB文件需要了解其基本结构和元数据信息。通过以上代码,您可以根据自己的需求扩展处理其他类型的数据块,或者根据EXB文件的具体规范进行解析和处理。

HackCyberX的博客 1536

vscode python常用插件_vscode前端开发常用插件

1. Chinese (Simplified) Language Pack for Visual Studio Code简体中文插件2. VSCode Great Icons设置文件图标主题3. Auto Close Tag自动闭合 HTML/XML 标签4.Auto Rename Tag自动完成另一侧标签的同步修改5.Beautify格式化代码6. Bracket Pair Colorizer给...

weixin_39735247的博客 133

数学工具箱:Clarke与Park变换

本文详细解析了FOC(磁场定向控制)中的核心数学工具——Clarke变换与Park变换。首先阐述了坐标变换的必要性:将复杂的三相交流系统简化为直流系统,便于精确控制。Clarke变换将三相静止坐标系转换为两相静止坐标系,减少变量数量;Park变换进一步将两相静止坐标系转换为两相旋转坐标系,实现交流量到直流量的转换。文章提供了两种变换的数学公式、物理意义图解及C语言实现代码,并简要介绍了逆变换过程。这些变换为电机控制提供了关键的数学基础,后续将结合GD32F303的FPU特性进行优化实现。

汽车电子软件领域知识分享 180

web前端开发必备的几款 vscode 插件及常用快捷键

web前端开发必备的几款 vscode 插件及常用快捷键。

诗渊的博客 4248

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

vscode前端开发 - 常用插件

文章目录vscode前端开发 - 常用插件 vscode前端开发 - 常用插件 不多比比,对着我的装就完事了,绝对好用,有哪个前端开发能拒绝vscode呢 Auto Close Tag: 自动闭合HTML/XML标签 Auto Rename Tag: 修改开始标签会自动同步闭合标签一起变化 Beautify: 美化代码 change-case: 变量输入提示 Chinese (Simplified) Language Pack for Visual Studio Code: vscode

反手一个bug的博客 532

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

2022 前端开发 vscode 常用插件及其他工具推荐

总结了下自己的 2022 的常用前端插件以及工具推荐,虽然 vscode 自带的插件同步功能已经很齐全了,但是还是自己总结了一篇以备不时之需。

cos的博客 2852

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

vscode前端开发个人常用插件

每入职一个新公司,第一天当然就要拿新电脑,然后安装vscode,准备开发环境,所以写个帖子专门记录一下自己常用的一些插件 Auto Close Tag Auto Rename Tag Beautify Bracket Pair Colorizer Debugger for Chrome ESLint HTML CSS Support HTML Snippets JavaScript (ES6) code snippets Markdown Preview Enhanced open in browser

weixin_41320468的博客 372

前端开发 Vscode常用插件

Vscode常用插件一、安装位置指引二、常用代码插件☆auto close tag☆Auto Comment Blocks☆Auto Rename Tag☆Beautify☆Code Spell Checker☆Debugger for Chrome☆ESLint☆ filesize☆ Git History☆ GitLens — Git supercharged☆IntelliSense for CSS class names in HTML☆Image preview☆JavaScript (ES6)

自己记录用的博客 1810

VSCode必备插件汇总

Hbuilder、webStorm、Dreamwearver 之前都有用过,VSCode 是微软开发的的一款代码编辑器,功能很强大,安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启 VSCode 使得插件生效。下面汇总了一些前端开发比较常用的插件。 1.Beautify(格式化代码,值得注意的是,beautify 插件支持自定义格式化代码规则) 2.Auto Close Tag(自动闭合 HTML/XML 标签) 3.Auto Rename Ta

MrQiu的博客 3566

vscode前端vutur插件_前端开发常用的VS Code插件总结

主题主题这东西,找个自己喜欢习惯的就好了1、Atom One Dark Theme2、vscode-iconsvscode默认的目录结构没有图标,不友好,这个图标插件小巧美观必备1、ESLint代码规范限制和团队协作,避免低级错误的利器2、GitLens查看git的提交历史,直接在代码里面预览最后的编辑人和时间利器3、Prettier限制代码规范,美化代码结构4、Bracket Pair Colo...

weixin_39751453的博客 178

VScode前端常用插件

VScode前端常用插件 VSCode下载 下载链接:https://code.visualstudio.com/Download Windows有三种版本 User Installer:此版本安装在当前计算机帐户目录,这意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。 System Installer:此版本可以安装在非用户目录,例如C盘根目录,任何帐户都可以使用。 .zip:便携版,解压缩即可使用。 vscode默认提供的user版本,大多数人都是用的这个版本。 添加插件: 打开V

至简的博客 9972

vscode前端开发常用插件

文章目录[隐藏] 3. Auto Close Tag4.Auto Rename Tag7. ESLint13.Code Runner17. Path Intellisense 1. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件 2. VSCode Great Icons 设置文件图标主题 3. Auto Cl...

https://ligo100.cn 小何博客欢迎访问。 257

VSCode 常用插件

   Visual Studio Code(简称VS Code/VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac以及Linux。 VSC中文网:http://www.vsco...

weixin_33939843的博客 4174

VScode前端开发常用插件

1,HTML Snippets 快速的生成html标签—H5代码片段以及提示 2、HTML CSS support 自动补齐css 3、jQuery Code Snippets 4、vscode-icons #让 vscode 资源树目录加上图标,给不同的文件类型添加图标 5、Path Intellisense 自动路劲补全,默认不带这个功能的 Path Autocomplete 路径自动补齐 6、Auto Rename Tag 在修改标签名时,能在你修改开始(结束)标签的时候修改对应的结束(开始)标签,帮

weixin_38797742的博客 431

vscode 一些基本知识

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。     vscode  作为一款逐渐火热的编辑器。...

amyloverice的博客 20万+
上一篇: Vue 总结:组件间的通讯方式(父子传参、兄弟传参、任意两个组件间传参、多个组件嵌套传参)
下一篇: Vue数据响应式、模板解析的实现原理(实现一个简易的Vue)
Wilson_gzw
博客等级 码龄7年 0粉丝 8原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值