10个必需要安装的高效开发VSCode插件
这篇文章主要介绍10个必需要安装的高效开发VSCode插件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联专注于赤峰网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供赤峰营销型网站建设,赤峰网站制作、赤峰网页设计、赤峰网站官网定制、成都微信小程序服务,打造赤峰网络公司原创品牌,更为您提供赤峰网站排名全网营销落地服务。
VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。
官网为:https://code.visualstudio.com/
10 个必装的编辑器插件
相当于视频教程的补充更新,这里再次给大家整理出 10 个必装的 VSCode 编辑器插件。编辑器的基本使用与插件的安装可以直接参考上面的视频教程。
1、文件图标 vscode-icons
插件名称:vscode-icons
插件地址:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
首先为了我们在编码时有一个高效、易用的界面,我们需要对一些不明了的组件做一些美化。
vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示,这样我们在查看长长的文件列表的时候,可以直接通过文件的图标就可以快速知道文件的类型,而不是去看文件的后缀。
2、暗色主题 One Dark Pro
插件名称:One Dark Pro
插件地址:https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
长时间的编码,暗色调的编码环境更不容易让视力疲劳,而且也可以让自己更加专注。
安装了 One Dark Pro 插件后,可以一键将 VSCode 编辑器的颜色调整成暗色系,编码起来更加舒适。
3、代码美化 Beautify
插件名称:Beautify
插件地址:https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
Beautify 插件可以快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整,代码强迫症必备,较好的代码格式在后期维护以及他人阅读时都会有很多的便利。
插件支持的语言非常多,基本堵盖了目前所有的语言,而且你还可以自定义代码格式化的结构。
4、代码检查工具 ESLint
插件名称:ESLint
插件地址:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
而 VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成好,安装后即可使用,对于代码格式与规范的细节还可以自定义,并且一个团队可以共享同一个配置文件,这样一个团队所有人写出的代码就可以使用同一个代码规范,在代码签入前每个人可以完成自己的代码规范检查。
5、必备调试工具 Debugger for Chrome
插件名称:Debugger for Chrome
插件地址:https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
此工具简直就是前端开发必备,将大大地改变你的开发与调试模式。
以往的前端调试,主要是 JavaScript 调试,你需要在 Chrome 的控制台中找到对应代码的部分,添加上断点,然后在 Chrome 的控制台中单步调试并在其中查看值的变化。
而在使用了 Debugger for Chrome 后,当代码在 Chrome 中运行后,你可以直接在 VSCode 中加上断点,点击运行后,Chrome 中的页面继续运行,执行到你在 VSCode 中添加的断点后,你可以直接在 VSCode 中进行单步调试。
关于 Chrome 调试工具的使用,你可以参考我在我们的知识星球中分享的原创视频教程「50 个 Chrome Developer Tools 必备技巧」,课程分享了前端开发中必备的浏览器调试工具 Chrome Developer Tools 使用过程中必备的 50 个使用与调试技巧,这些知识是你成为合格的前端开发人员必备技能。
6、万能语言运行环境 Code Runner
插件名称:Code Runner
插件地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
如果你需要学习或者接触各种各样的开发语言,那么 Code Runner 插件可以让你不用搭建各种语言的开发环境,直接通过此插件就可以直接运行对应语言的代码,非常适合学习或测试各种开发语言。
支持的语言有:C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定义的命令。
特征
● 运行当前活动文本编辑器的代码文件
● 通过文件资源管理器的上下文菜单运行代码文件
● 在文本编辑器中运行选定的代码段
● 每个Shebang运行代码
● 每个文件名glob运行代码
● 运行自定义命令
● 停止代码运行
● 在输出窗口中查看输出
● 设置要运行的默认语言
● 选择要运行的语言
● 通过在集成终端中运行代码来支持REPL
7、快速注释 Document This
插件名称:Document This
插件地址:https://marketplace.visualstudio.com/items?itemName=joelday.docthis
优秀的代码除了优秀的性能、规范的格式,注释也是不可或缺的,而且注释也应该有一套标准的注释方法,特别对于 JavaScript 这种语言。
Document This 可以快速地帮你生成注释,如一些函数的注释还能帮你抽取出参数的定义等,是你编写规范代码必备的工具。
8、CSS 类名智能提示
插件名称:IntelliSense for CSS class names in HTML
插件地址:https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
在 HTML 中调用定义好的样式名时,有时需要经常在 HTML 与 CSS 文件之间切换,来回地查看你已定义好的 CSS 类名。
而有了 IntelliSense for CSS class names in HTML 插件后,你可以在 HTML 中需要调用 CSS 类名的地方,此插件会智能地给你已定义 CSS 类名的提示。
特征
● 为您提供可在工作区中找到的CSS类定义的自动完成(在CSS文件中定义或在“支持的语言模式”部分中列出的文件类型中定义)
● 支持通过linkHTML文件中的元素引用的外部样式表
● 用于手动重新缓存自动完成中使用的类定义的命令
● 用户设置覆盖应在缓存过程中考虑或排除哪些文件夹和文件
9、代码拼写检查 Code Spell Checker
插件名称:Code Spell Checker
插件地址:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
此插件安装后就不用管就好了,在你代码中有单词拼写错误时,你就会发现它的好处,因为我们写代码毕竟都是大量的英文单词变量定义,插件还可以给出错误拼写单词的建议。
10、备忘插件 TODO Highlight
插件名称:TODO Highlight
插件地址:https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
在很多的其他代码编辑器中都有 TODO 标注功能的,如你写到某一部分的代码时,其中部分的功能需要稍后再来实现,这是就可以在对应的代码处添加一个 TODO 类型的注释,那么后期就可以快速地跳转到这部分继续写,而且当项目很大的时候,TODO 就变得更加有用,因为有时候 TODO 可能有几十个,帮助你标注那些功能需要继续实现或优化。
以上是“10个必需要安装的高效开发VSCode插件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网页标题:10个必需要安装的高效开发VSCode插件
网页链接:http://scyanting.com/article/isgheo.html