写在前面

    在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code。

   都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德芙还丝滑的强大功能所折服。

   我是来给大家安利插件的,想做个比较全面的插件集合给大家。网上的我也看过一些,但是都比较零散,时间也久了一些,我结合最近的情况,总结一下

   造福大家,才是我想做的。手动比心❤。

正文

一.日常安利 VS code

  VS vode特点:

  • 开源,免费;
  • 自定义配置
  • 集成git
  • 智能提示强大
  • 支持各种文件格式(html/jade/css/less/sass/xml)
  • 调试功能强大
  • 各种方便的快捷键
  • 强大的插件扩展

  对前端这么友好,没理由不用。

Visual Studio Code(VScode )官网 :https://code.visualstudio.com/

Visual Studio Code(VScode )github地址 :https://github.com/Microsoft/vscode

二.怎么安装插件?

方法一:

  • 按F1或Ctrl+Shift+p,输入extensions,点击第一个就可以

方法二:

  • ctrl + P 然后输入 >ext install

方法三:

  • 点击图中位置

三.插件合集

插件官网:https://marketplace.visualstudio.com/

  每一个插件名都超链接到官网,注意查看

a.配置类插件:

1.Settings Sync

最好用的插件,没有之一,一台电脑配置好之后,其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了,

使用GitHub Gist同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。

2.Debugger for Chrome

从VS Code调试在Google Chrome中运行的JavaScript代码。

用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。

3.beautify

格式化代码工具

美化javascriptJSONCSSSass,和HTML在Visual Studio代码。

4.Atuo Rename Tag

修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改

5.中文(简体)语言包

Chinese (Simplified) Language Pack for Visual Studio Code

将界面转换为中文,对英语不好的人,非常友好。例如我。。。

6.Code Spell Checker

代码拼写检查器

一个与camelCase代码配合良好的基本拼写检查程序。

此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。

7.vscode-icons

显示Visual Studio代码的图标,目前该插件已被vscode内部支持:"文件" -> "首选项" -> "文件图标主题"

8.guides

显示代码对齐辅助线,很好用

9.Rainbow Brackets

为圆括号,方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员,当然还有JavaScript和其他程序员特别有用。

效果如下:

10.Bracket Pair Colorizer

用于着色匹配括号

11.Indent-Rainbow

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

12.filesize

在状态栏中显示当前文件大小,点击后还可以看到详细创建、修改时间

13.Import Cost

对引入的计算大小

14.Path Intellisense

可自动填充文件名。

15.WakaTime 

从您的编程活动自动生成的度量标准,见解和时间跟踪。

16.GitLens

git日志查看插件

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索,历史记录和和查看代码作者身份,还能通过强大的比较命令获得有价值的见解等等

17..REST Client

REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应。

18.Npm Intellisense 

用于在 import 语句中自动填充 npm 模块

require 时的包提示(最新版的vscode已经集成此功能)

19.Azure Storage

VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器,文件共享,表和队列。按照本教程从VS Code部署Web应用程序到Azure存储。

20.Project Manager

它可以帮助您轻松访问项目,无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的收藏项目,或选择自动检测VSCode项目,GitMercurialSVN存储库或任何文件夹。

从版本8开始,您就有了专门的项目活动栏

以下是Project Manager提供的一些功能:

  • 将任何项目保存为收藏夹
  • 自动检测VSCodeGIT中水银SVN存放区
  • 在相同或新窗口中打开项目
  • 识别已删除/重命名的项目
  • 一个状态栏标识当前项目
  • 专门的活动栏

21.Language Support for Java(TM) by Red Hatredhat.java

这个插件,这个下载次数,安装就对了。

22.Todo Tree 

此扩展可以快速搜索(使用ripgrep)您的工作区以获取TODO和FIXME等注释标记,并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上。

找到的TODO也可以在打开的文件中突出显示。

b.VS code 主题集合

1.Night Owl

一个非常适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。

2.Atom One Dark Theme

一个基于Atom的黑暗主题

3.Dracula Official

官方吸血鬼主题,博主用的就是这款,很漂亮

4.One Dark Pro

Atom标志性的One Dark主题,也是VS Code下载次数最多的主题之一!

5.Bimbo

简约而现代的神奇海洋主题

c.代码提示提示类

1.HTML Snippets

完整的HTML代码提示,包括HTML5

2.HTML CSS Support

在 html 标签上写class 智能提示css样式

3.jQuery Code Snippets

jQuery代码提示

超过130个用于JavaScript代码的jQuery代码片段。

只需键入字母'jq'即可获得所有可用jQuery代码片段的列表。

4.HTMLHint

html代码检测,支持html5

d.语言相关

1.C#

  • 适用于.NET Core的轻量级开发工具。
  • 伟大的C#编辑支持,包括语法突出显示,智能感知,转到定义,查找所有引用等。
  • 调试支持.NET Core(CoreCLR)。注意:不支持单声道调试。桌面CLR调试支持有限
  • 支持Windows,macOS和Linux上的project.json和csproj项目。

2.CodeMetrics

计算TypeScript / JavaScript文件的复杂性。

3.VUE插件

  vetur      语法高亮、智能感知、Emmet、vue提示等

  VueHelper    snippet代码片段

ESLint      将ESLint JavaScript集成到VS代码中。代码规范提示

  prettier    代码规范性插件

4.Java Extension Pack

它是一组流行的扩展,可以帮助在Visual Studio Code中编写,测试和调试Java应用程序。查看VS Code中的Java以开始使用。

Visual Studio Code的插件功能真的是强大到爆裂,还有仕么有意思的插件,欢迎大家在评论区补充,

觉得有用,记得点推荐哦,让别人也能看到;

相关文章:

你们都在用IntelliJ IDEA吗?或许你们需要看一下这篇博文

作者:Dawnzhang 
出处:https://www.cnblogs.com/clwydjgs/p/10078065.html
版权:本文版权归作者
转载:欢迎转载,但未经作者同意,必须保留此段声明;必须在文章中给出原文连接;

【转】Visual Studio Code(VS code)你们都在用吗?或许你们需要看一下这篇博文的更多相关文章

  1. Visual Studio Code(VS code)你们都在用吗?或许你们需要看一下这篇博文

    写在前面 在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code. 都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德 ...

  2. 你们都在用IntelliJ IDEA吗?或许你们需要看一下这篇博文

    写在前面 以前一直用的elipce,如今入坑IntelliJ IDEA,没想到啊.深深的爱上了它,强大到无所不能: "工欲善其事必先利其器",IntelliJ IDEA作为一个非常 ...

  3. visual studio 用 vs code 的 hot key

    记得 2 年多前开始用 vs code, 一开始非常不适应它的 hot key 一心想把 vs code 的 hot key 全改成 visual studio 的,但一直没有找到比较方便的办法 (总 ...

  4. Visual studio常用的code snippets

    作为全球第一的IDE,VS用起来自然相当的爽,当你在visual studio里敲出几个字母,能帮你生成一大段代码,省时省力又能装逼. 比如,你打一个 prop,然后按tab键,就能生成一个带get/ ...

  5. Visual Studio Code--开发大大们都在用的编辑器

    老公推荐的炒鸡nb的编辑器...说让我看起来像个假大神(微笑脸) 如何用VSCode练习python呢,还有VSCode有哪些常用的功能和快捷键呢?我会持续更新中... 1. 先来换个喜欢的颜色主题吧 ...

  6. Visual Studio 如何使用代码片段Code Snippet提高编程速度!!!

      使用Code Snippet简化Coding 在开发的项目的时候,你是否经常遇到需要重复编写一些类似的代码,比如是否经常会使用 for.foreach ? 在编写这两个循环语句的时候,你是一个字符 ...

  7. visual studio code .net 开发

    Visual Studio确实是相当好用,各种简化操作什么的简直不要太舒服.但其容量太大,有时不是很方便,所以今天简单介绍一下另一个工具--Visual Studio Code. 虽然相比于老大哥Vi ...

  8. 更有效率的使用Visual Studio(二)

    没想到上一篇文章有这么多人喜欢,多谢大家支持.继续- 很多比较通用的快捷键的默认设置其实是有一些缩写在里面的,这个估计也是MS帮助我们记忆.比如说注释代码的快捷键是Ctrl + E + C,我们如果知 ...

  9. 更有效率的使用Visual Studio(一)

    很多比较通用的快捷键的默认设置其实是有一些缩写在里面的,这个估计也是MS帮助我们记忆.比如说注释代码的快捷键是Ctrl + E + C,我们如果知道它是 Ctrl + Edit + Comment C ...

随机推荐

  1. MySql学习笔记三

    MySql学习笔记三 4.DML(数据操作语言) 插入:insert 修改:update 删除:delete 4.1.插入语句 语法: insert into 表名 (列名1,列名2,...) val ...

  2. 【Git版本控制】Idea中设置Git忽略对某些文件的版本追踪

    在Idea中有些本地文件无需与远程库同步,仅是本地使用.此时就需要将这些文件加入到Git的版本忽略中来. 设置步骤 1.搜索插件 .ignore,并安装 2.增加.gitignore文件 3.配置相应 ...

  3. 数据库操作之DBUtils

    概述 DBUtils是Java编程中的数据库操作实用工具,小巧简单实用. DBUtils封装了对JDBC的操作,简化了JDBC操作,可以少写代码. DBUtils三个核心功能介绍 QueryRunne ...

  4. windows下git安装过程

    参考廖雪峰博客: https://www.liaoxuefeng.com/wiki/896043488029600/896067074338496 git网站下载程序:   https://git-s ...

  5. 3.3 Spark的部署和应用方式

    一.Spark的部署 1.单机Local 2.集群 (1)Standalonc Spark自带的资源管理器,效率不高 (2)YARN 如果部署的是Hadoop集群,可以用YARN资源调度 (3)Mes ...

  6. MacOS上传文件到windows ftp时链接文件不见了

    最近打包遇到了一个问题,打包完MAC的sdk包后,得到的是一个framework的文件夹,我们需要将这个framework传到ftp服务器上,另外,还要把这个文件夹下的Release文件夹里的文件替换 ...

  7. nexus php composer host 模式repo 试用

    前边有介绍以及运行过基于nexus proxy 模式的php composer(其中也有一些坑),以下是关于host 模式的 简单使用 环境准备 docker-compose 文件   version ...

  8. 8.Vue的slot

    1.什么是slot 在  Vue.js  中我们使用  <slot>  元素作为承载分发内容的出口,作者称其为 插槽,可以应用在组合组件的场景中 2.使用 建立组件预留插槽 定义填充入插槽 ...

  9. 数据呈现到 ASP.NET Core MVC 中展示

    终于要将数据呈现到 ASP.NET Core MVC 中的 视图 上了 将数据从控制器传递到视图的三种方法 在 ASP.NET Core MVC 中,有 3 种方法可以将数据从控制器传递到视图: 使用 ...

  10. [LeetCode] 684. Redundant Connection 冗余的连接

    In this problem, a tree is an undirected graph that is connected and has no cycles. The given input ...