VSCode 必装的 10 个高效开发插件
2018-10-15 08:35
926 查看
本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率。
VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效开发必装插件」。
VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。
官网为:https://code.visualstudio.com/
vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示,这样我们在查看长长的文件列表的时候,可以直接通过文件的图标就可以快速知道文件的类型,而不是去看文件的后缀。
安装了 One Dark Pro 插件后,可以一键将 VSCode 编辑器的颜色调整成暗色系,编码起来更加舒适。
插件支持的语言非常多,基本堵盖了目前所有的语言,而且你还可以自定义代码格式化的结构。
而 VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成好,安装后即可使用,对于代码格式与规范的细节还可以自定义,并且一个团队可以共享同一个配置文件,这样一个团队所有人写出的代码就可以使用同一个代码规范,在代码签入前每个人可以完成自己的代码规范检查。
以往的前端调试,主要是 JavaScript 调试,你需要在 Chrome 的控制台中找到对应代码的部分,添加上断点,然后在 Chrome 的控制台中单步调试并在其中查看值的变化。
而在使用了 Debugger for Chrome 后,当代码在 Chrome 中运行后,你可以直接在 VSCode 中加上断点,点击运行后,Chrome 中的页面继续运行,执行到你在 VSCode 中添加的断点后,你可以直接在 VSCode 中进行单步调试。
关于 Chrome 调试工具的使用,你可以参考我在我们的知识星球中分享的原创视频教程「50 个 Chrome Developer Tools 必备技巧」,课程分享了前端开发中必备的浏览器调试工具 Chrome Developer Tools 使用过程中必备的 50 个使用与调试技巧,这些知识是你成为合格的前端开发人员必备技能。
支持的语言有: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, 以及一些自定义的命令。
Document This 可以快速地帮你生成注释,如一些函数的注释还能帮你抽取出参数的定义等,是你编写规范代码必备的工具。
而有了 IntelliSense for CSS class names in HTML 插件后,你可以在 HTML 中需要调用 CSS 类名的地方,此插件会智能地给你已定义 CSS 类名的提示。
VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效开发必装插件」。
VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。
官网为:https://code.visualstudio.com/
1. VSCode 的基本使用视频教程
大家分享过我原创的 10 集视频教程「VSCode 高效开发必装插件」。此课程为 VSCode 编辑器系列课程。VSCode 强大的插件库使得其在提升开发效率方面更加的无敌,系列课程给大家分享了必装插件的安装、配置与使用技巧相关的知识。视频课程
- 001 - 课程简介
- 002 - 如何让你的文件类型一目了然
- 003 - 如何更加高效地管理项目
- 004 - 自动格式化你的代码
- 005 - 如何一键搭建各类语言的学习测试环境
- 006 - 如何和 Chrome 联动调试
- 007 - 如何实时自动检测你的代码规范与代码中的错误
- 008 - 如何提升 React 等前端开发的效率
- 009 - 如何集成并美化你的终端到 VSCode 中
- 010 - Visual Studio 重度使用者如何迁移到 VSCode
2. 10 个必装的编辑器插件
相当于视频教程的补充更新,这里再次给大家整理出 10 个必装的 VSCode 编辑器插件。编辑器的基本使用与插件的安装可以直接参考上面的视频教程。2.1 文件图标 vscode-icons
- 插件名称:vscode-icons
- 插件地址:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示,这样我们在查看长长的文件列表的时候,可以直接通过文件的图标就可以快速知道文件的类型,而不是去看文件的后缀。
2.2 暗色主题 One Dark Pro
- 插件名称:One Dark Pro
- 插件地址:https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
安装了 One Dark Pro 插件后,可以一键将 VSCode 编辑器的颜色调整成暗色系,编码起来更加舒适。
2.3 代码美化 Beautify
- 插件名称:Beautify
- 插件地址:https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
插件支持的语言非常多,基本堵盖了目前所有的语言,而且你还可以自定义代码格式化的结构。
2.4 代码检查工具 ESLint
ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。而 VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成好,安装后即可使用,对于代码格式与规范的细节还可以自定义,并且一个团队可以共享同一个配置文件,这样一个团队所有人写出的代码就可以使用同一个代码规范,在代码签入前每个人可以完成自己的代码规范检查。
2.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 个使用与调试技巧,这些知识是你成为合格的前端开发人员必备技能。
2.6 万能语言运行环境 Code Runner
- 插件名称:Code Runner
- 插件地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.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, 以及一些自定义的命令。
2.7 快速注释 Document This
- 插件名称:Document This
- 插件地址:https://marketplace.visualstudio.com/items?itemName=joelday.docthis
Document This 可以快速地帮你生成注释,如一些函数的注释还能帮你抽取出参数的定义等,是你编写规范代码必备的工具。
2.8 CSS 类名智能提示
- 插件名称:IntelliSense for CSS class names in HTML
- 插件地址:https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
而有了 IntelliSense for CSS class names in HTML 插件后,你可以在 HTML 中需要调用 CSS 类名的地方,此插件会智能地给你已定义 CSS 类名的提示。
2.9 代码拼写检查 Code Spell Checker
- 插件名称:Code Spell Checker
- 插件地址:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
2.10 备忘插件 TODO Highlight
- 插件名称:TODO Highlight
- 插件地址:https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
3. 总结
当然,这里介绍的插件只是必备插件中的 10 个,其实根据你开发的语言,还有很多非常能提高开发效率的工具需要安装,你可以自行在 VSCode 的插件中心查询下载安装。相关文章推荐
- VS Code 折腾记 - (10) 你想发布自己捣鼓的snippets到VSCode插件市场!
- 我的 React Native 技能树点亮计划 の 为 React Native 开发准备的 VS Code 插件
- (四)ReactNative VSCode IDE开发插件
- vsCode编辑器 开发小程序插件
- 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?
- vscode前端常用插件推荐,搭建JQuery、Vue等开发环境
- VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)
- 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?
- xmake-vscode插件开发过程记录
- VSCode安装go语言开发环境,go插件问题解决
- VS Code之Vue开发常用插件
- vscode 插件开发入门
- VSCode插件开发全攻略(一)概览
- VSCode插件开发全攻略(七)WebView
- VSCode插件开发全攻略(二)HelloWord
- VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)
- VSCode插件开发全攻略(三)package.json详解
- VSCode插件开发全攻略(六)开发调试技巧
- vsCode 【推荐】微软旗下最好用的前端开发IDE编辑器 常用插件