VS Code 必装插件

本文介绍了Visual Studio Code(VSCode)中对于前端开发者极具帮助的插件,如中文显示、快捷打开浏览器、代码美化、自动标签闭合、实时预览等。通过这些插件,可以提升开发效率,实现代码智能提示、格式化和实时更新。同时,还提到了用于路径填充、代码运行、缩进辅助和CSS选择器查看的实用工具。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • Chinese (Simplified) Language  【简体中文】

         安装这个插件后,vs code功能操作都将显示中文

  •  Open in browser 【在浏览器中打开】 

    该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari

  • vscode-icons 【资源树目录加上图标样式】

左侧的文件列表,每个不同的类型都会显示不同的图标,以便可以进行区分

  • HTML CSS Support 【智能提示CSS样式】

    html 标签上写class 可以根据首字母 智能提示当前项目所支持的css样式

  •  Image preview 【图片预览】

        鼠标移到img 图片名字上,可以显示出该图片的路径

  •  Auto Rename Tag 【同步修改html标签】

 自动对一个Html标签,头尾进行同步修改。只要修改了头部标签,尾部标签自动修改

 

  • Auto Close Tag   【自动闭合Html标签】

  • Beautify 【美化代码格式】

 格式化javascript,JSON,CSS,Sass,和HTML,将代码对其

 通过右击选择 【格式化文档】,然后选择【Beautify】,可以将代码对齐

  •  Code Runner 【运行】

 非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等,安装完成后,右上角出现:

  •  Indenticator【显示代码缩进深度】

突出目前代码的缩进深度 

 

  • CSS Peek 【选择器查看定义/引用】

此插件可以追踪至样式表中 CSS 类定义的地方。

当在 HTML 文件中右键单击选择器时,选择"转到定义”便会发送样式设置的 CSS 代码。

 

 当在CSS文件中右键单击选择器时,选择"转到引用”便可以查看在css文件中,该选择器有哪些其他选择引用了样式

用四种不同颜色交替显示文本前面的缩进

 自动填图像、css js 文件 路径名称

  • Live Server【修改浏览器实时变化】

前端代码修改后,保存文件后,浏览器将根据修改的代码进行实时的变化

vscode最新插件合集(20190814)part1,共2个分包(part1/2),都下载后用命令“copy /b extensions.zip.rm1+extensions.zip.rm2 extensions.zip”合并再解压。 包合以下插件: wholroyd.jinja-0.0.8 daltonjorge.scala-0.0.5 eriklynd.json-tools-1.0.2 truman.autocomplate-shell-0.1.1 sensourceinc.vscode-sql-beautify-0.0.4 danields761.dracula-theme-from-intellij-pythoned-0.1.4 gerane.theme-druid-0.0.2 luqimin.forgive-green-0.2.1 mohsen1.prettify-json-0.0.3 chrmarti.regex-0.2.0 kalitaalexey.vscode-rust-0.4.2 ZakCodes.rust-snippets-0.0.1 itryapitsin.scala-0.1.7 itryapitsin.scalasnippets-0.1.7 vahidk.tensorflow-snippets-0.3.3 formulahendry.terminal-0.0.10 qub.qub-xml-vscode-1.2.8 waderyan.nodejs-extension-pack-0.1.9 jasonnutter.search-node-modules-1.3.0 christian-kohler.path-intellisense-1.4.2 christian-kohler.npm-intellisense-1.3.0 josephtbradley.hive-sql-0.0.4 magicstack.magicpython-1.1.0 ms-python.anaconda-extension-pack-1.0.1 mooman219.rust-assist-0.2.3 slevesque.vscode-hexdump-1.7.2 coenraads.bracket-pair-colorizer-1.0.61 bibhasdn.django-snippets-1.1.1 bibhasdn.django-html-1.3.0 octref.vscode-json-transform-0.1.2 xabikos.javascriptsnippets-1.7.2 jithurjacob.nbpreviewer-1.2.2 kondratiev.sshextension-0.5.0 humy2833.ftp-simple-0.7.0 batisteo.vscode-django-0.19.0 fwcd.kotlin-0.1.13 reditorsupport.r-lsp-0.1.0 ms-vsts.team-1.149.2 donjayamanne.jupyter-1.1.5 rust-lang.rust-0.6.1 grapecity.gc-excelviewer-2.1.32 vscjava.vscode-java-pack-0.7.1 ms-toolsai.vscode-ai-0.5.1 dbaeumer.vscode-eslint-1.9.0 ms-vscode.azure-account-0.8.4 rogalmic.bash-debug-0.3.5 donjayamanne.python-extension-pack-1.6.0 redhat.vscode-yaml-0.4.1 adisreyaj.swagger-snippets-0.0.1 alefragnani.bookmarks-10.4.4 arjun.swagger-viewer-2.2.2 dotjoshjohnson.xml-2.5.0 fisheva.eva-theme-0.7.7 vscjava.vscode-java-dependency-0.5.1 deerawan.vscode-hasher-1.0.1 vscjava.vscode-java-debug-0.20.0 scala-lang.scala-0.3.4 eg2.vscode-npm-script-0.3.8 vscjava.vscode-maven-0.18.1 ms-vscode.go-0.11.4 lextudio.restructuredtext-113.0.0 pkief.material-icon-theme-3.8.1 ms-azuretools.vs
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值