vscode 全称 Visual Studio Code 是一个由微软开发的,同时支持Windows、Linux和macOS操作系统且开放源代码的文本编辑器,支持很多用得着用不着的功能。
一、下载安装
直接到 官网 点击 Download 进行下载安装,网站会自动判断你的操作系统,提供符合你操作系统的下载链接,也可以自己选很方便。
二、汉化以及前端插件安装
点击下面左边红色框的按钮,然后在输入框输入自己想要安装的插件名然后点击安装,安装完成后点击重新加载就可以了。
(1)Chinese Language
简体中文汉化插件,和我一样英文不好的童鞋可以安装这个插件进行汉化。这个插件重载之后还没有汉化成功的话,把编辑器关闭重新打开就行了。
(2)vscode-icons
让 vscode 资源树目录加上图标,有利于我们进行文件格式的判断。
(3)HTML Snippets
很实用的 HTML 代码提示插件。
(4)HTML CSS Support
HTML 标签上写class 智能提示当前项目所支持的样式。
(5)jQuery Code Snippets
jQuery 代码提示,用 jQuery 框架的必须装。
(6)Path Intellisense
自动路径补全,方便我们进行图片、CSS、JavaScript等文件的路径编写。
(7)Bootstrap 3 Sinnpet
Bootstrap 3 代码提示插件,常用的话需要下载一个。
(8)Atuo Rename Tag
修改 html 标签,自动帮你完成尾部闭合标签的同步修改。
(9)Bracket Pair Colorizer
给括号设置不同的颜色,有利于括号多的时候进行区分。
(10)小程序助手
(11)minapp
(12)wechat-snippet
这三个都是微信小程序的代码提示及自动补全插件,现在微信小程序这么火怎么可以不下载。
(13)HTMLHint
HTML代码检测
(14)beautify
格式化代码插件,感觉编辑器自带的就够用了。
(15)Document this
js 的注释模板 (注意:新版的vscode已经原生支持,在function上输入/** tab)
(16)vscode-fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
(17)Indent-Rainbow
使得对齐更加具有可读性
(18)IntelliSense for CSS class names in HTML
基于你的项目以及通过link标签引用的外部文件,该智能插件提供 HTML 中 CSS class 名字的补全。
(19)Trailing Spaces
高亮那些冗余的空格,可以快速删掉
(20)lit-html
在 JavaScript/TypeScript 的文件中,如果有使用到 HTML 标记,lit-html 提供语法高亮和相应的补全支持。
(21)CSS Peek
可以在 HTML 中通过 CSS id 或则 class 来定位到其定义。