首页 > 其他分享 >前端VScode推荐插件

前端VScode推荐插件

时间:2022-10-04 22:38:46浏览次数:44  
标签:文件 插件 VScode 代码 HTML prettier 前端 CSS

Auto Close Tag 自动添加HTML / XML关闭标签 
Auto Rename Tag 自动重命名配对的HTML / XML标签 
Beautify 格式化代码 【必须】
Bracket Pair Colorizer 颜色识别匹配括号 
Code Runner 非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等
安装完成后,右上角会出现:▶ 
change-case 虽然 VSCode 内置了开箱即用的文本转换选项,但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式,包括驼峰命名、下划线分隔命名,snake_case 命名以及 CONST_CAS 命名等 
Chinese (Simplified) Language Pack for Visual Studio Code 中文简体语言包

安装后,在 ​​locale.json​​​ 中添加 ​​"locale": "zh-cn"​​​,即可载入中文(简体)语言包。要修改 ​​locale.json​​​,你可以同时按下 ​​Ctrl+Shift+P​​ 打开命令面板,之后输入 "config" 筛选可用命令列表,最后选择配置语言命令。

Color Info 这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了 
CSS Peek 使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码 
Debugger for Chrome 前端调试, 
ESLint EsLint可以帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性 
filesize 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间 
Git History 以图表的形式查看 git 日志 
GitLens — Git supercharged 显示文件最近的 commit 和作者,显示当前行 commit 信息 
HTML Boilerplate 通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构 
HTMLHint HTML 代码格式检测 
HTML Snippets 代码自动填充 
htmltagwrap 在选中HTML标签中外面套一层标签
”Alt + W” (“Option + W” for Mac) 
Image Preview 鼠标移到路径里显示图像预览 
Indenticator 突出目前的缩进深度 
intelliSense for CSS class names in HTML 把项目中 css 文件里的名称智能提示在 html 中 
JavaScript (ES6) code snippets es6代码片段 
Live Server 浏览器实时刷新 
Node.js Modules Intellisense 可以在导入语句中自动完成JavaScript / TypeScript模块 
npm Intellisense require 时的包提示 
Path Intellisense 路径自动补全 
Quokka.js Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈
使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了 
Regex Previewer 这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项 
SVG Viewer 此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序,你无需离开编辑器,便可以打开 SVG 文件并查看它们。同时,它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项 
Vetur Vue 语法高亮显示, 语法错误检查, 代码自动补全 【vue项目必须】
(配合 ESLint 插件效果更佳) 
vscode-fileheader 顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
快捷键: Ctrl+Alt+i
(默认信息可在 文件→首选项→设置 中修改)

{
"window.zoomLevel": 1,
"terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe", // 使用git终端(直接显示当前分支)
"files.autoSave": "onFocusChange",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.autofetch": true,
"fileheader.Author": "xxx",
"fileheader.LastModifiedBy": "xxx",
"prettier.semi": false, // 结尾不加分号
"prettier.singleQuote": true, // 单引号
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 格式化不加分号
"singleQuote": true // 格式化以单引号为主
}
},
}setting.json





标签:文件,插件,VScode,代码,HTML,prettier,前端,CSS
From: https://blog.51cto.com/u_15707676/5731957

相关文章

  • 【中兴】web训练营~一文带你走进前端 | 百图制作
    ......
  • VSCode阅读Linux源码(35)
    环境经测试在以下环境上编译成功或编译失败:Ubuntu2004LTS(非虚拟机,真实系统),Ubuntu2204LTS(VMware虚拟机)环境上编译成功;Ubuntu2004LTS(Hyper-V系统),Ubuntu2204......
  • 项目开发神器VsCode配置指南!(含C++、Python、Java环境配置)
     Datawhale干货 作者:吴忠强,东北大学,Datawhale成员本篇文章虽然是VsCode挂名,但其实介绍了两款神器:Vscode和Vim,这两个结合起来,开发效率蹭蹭蹭!!!之前接触过VsCode但很少......
  • vue3 基础-插件 plugin 案例演示
    前篇有介绍关于插件plugin的无敌强大和基本使用流程后,当时从俺的经验上看是没咋去使用它的,即英雄无用武之地.本篇也是从网上找个案例来为plugin的强大来小试牛刀......
  • linux配置前端npm yarn
    linux配置前端npmyarn这几天更新了windows系统,安装一下wsl,试一下之前就想用的zsh,感觉还不错。之后就直接用Linux接管windows命令。现在安装一下前端常用的工具npm......
  • vscode vim keybinds.json vscode的按键配置
    vscode的keybindings.json//Placeyourkeybindingsinthisfiletooverridethedefaultsauto[][//以前配置的上下左右移动按键{"key":"alt+j","......
  • 快速看懂前端在干啥!
    前言本文旨在帮助我的搭档快速看懂这些前端语言在讲什么东东。非常简略!!!!一、认识HTML基本结构有开就有合,例如<p>和</p>、<h1>和</h1>等。当然也有直接自闭合的例......
  • 手写现代前端框架diff算法-前端面试进阶
    前言在前端工程上,日益复杂的今天,性能优化已经成为必不可少的环境。前端需要从每一个细节的问题去优化。那么如何更优,当然与他的如何怎么实现的有关。比如key为什么不能使用......
  • 最简单搭建前端轻量级项目开发服务
    本文讨论了如何搭建一个简单的前端项目开发服务,这个服务要实现以下几点:Javascript的打包压缩;scss的编译打包压缩;简单文件http服务;监测文件变化自动刷新浏览器;零......
  • python在VScode中中文输出乱码的解决方案
    ————————————————版权声明:本文为CSDN博主「Rhett.Yao」的原创文章。原文链接:https://blog.csdn.net/m0_63109538/article/details/126419637——————......