visual studio code前端插件的安装及前端插件应用

visual studio code插件的安装及应用

没有求知欲的人,就是没有翅膀的小鸟。长路漫漫,自学就会成为一种习惯。还记得刚入门的时候,对编辑器什么的简直是天方夜谭,好像懵懂的雏鸟第一次探出了头,不知世界的包罗万象。记得第一次接触的编辑器是DW,那是很久之前在学校就接触的编辑器,感觉DW就像是清末被世界遗弃的孩子,然后后面去学习中接触到了sublime,但是对这款编辑器是一点儿也不了解,后面又接触了hbuilder,这款编辑器也还可以,有很多同伴都在用,但是我总觉得visual studio code总是能给人眼前一亮的感觉,毕竟是Microsoft出的一款,可以安装各种插件,就像光秃秃的翅膀被插满了羽毛,羽翼丰满。
其实用了很久对这些插件还是不够了解,所以借以清明放假打消一下时间,更加了解这款编辑器。

对于新手来说首先是下载这款编辑器,直接搜visual studio code官网中下载,免费的,有稳定版的,还有业内人士版(vscode insiders)的,蓝色的vscode是非常稳定的发行版本,vscode insiders版,相当于bate版本,测试版,会有一些新的vscode可能会在未来加入的功能,但是其中可能会有一些bug存在,使用的过程中需要小心一些。然后下载下来便可以了,下面是使用的过程及插件的安装。

1.修改语言,如果英语六级的话,便就可以不用修改,按住ctrl+shift+x打开拓展,安装Language Packs插件,然后按住Ctrl + Shift + P打开命令调色板,搜索Configure Display Language命令然后按Enter键,将locale.json创建一个文件,其默认值设置为您的操作系统语言。修改为zh-cn语言即可。

2.HTML Snippets:超级实用且初级的 H5代码片段以及提示;

3.HTMLHint:html代码检测;

4.HTML CSS Support :让 html 标签上写class 智能提示当前项目所支持的样式。新版已经支持scss文件检索,这个也是必备插件之一;

5.Auto Close Tag :匹配标签,关闭对应的标签。很实用【HTML/XML】;

6.Auto Rename Tag :修改 html 标签,自动帮你完成尾部闭合标签的同步修改;

7.Path Autocomplete :路径智能补全;

8.Path Intellisense :路径智能提示;

9.JavaScript Snippet Pack:针对js的插件,包含了js的常用语法关键字,很实用;

10.View InBrowser:从浏览器中查看html文件,使用系统的当前默认浏览器;

11.Class autocomplete for HTML:编写html代码的朋友们对html代码的一大体现就是重复,如果纯用手敲不仅累还会影响项目进度,这款自动补全插件真的很棒;

12.beautify :格式化代码的工具,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用;

13.jQuery Code Snippets:jquery 重度患者必须品;

14.Debugger for Chrome:让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试,真666~;

15.jQuery Code Snippets:jquery 重度患者必须品;

16.vscode-icon:让 vscode 资源树目录加上图标,必备良品!

17.VSCode Great Icons:另一款资源树目录图标

18.colorize :会给颜色代码增加一个当前匹配代码颜色的背景,非常好;

19.Color Info:提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。

20.Bracket Pair Colorizer:让括号拥有独立的颜色,易于区分。可以配合任意主题使用。

21.vscode-fileheader:顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间

22.Document This :js 的注释模板 (注意:新版的vscode已经原生支持,在function上输入/** tab)

23.filesize:在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间;

24.Code Runner :代码编译运行看结果,支持众多语言;

25.GitLens:丰富的git日志插件;

26.vetur:vue语法高亮、智能感知、Emmet等;

27.VueHelper:vue代码提示.

参照:https://blog.csdn.net/x550392236/article/details/78646555

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页