Visual Studio Code使用技巧以及常用插件的安装与使用总结_vascode安装对比插件

前端开发常用工具介绍

• sublime text：收费的代码编辑器 ,打开速度快,效率高
• Visual Studio Code（vs code）:微软开发的免费编辑器,集成终端效果好!
• atom：github发布的代码编辑器
• webstorm：誉为web前端开发神器, 但是 合成的插件和配置太多,导致开启速度慢 , 适合初学者!
  • 如果安装,安装 11 版本,不要下载最新的,部分电脑系统兼容问题很大!
• HBuilder：国产的web开发工具

vscode的基本配置

1. 点击右下角小齿轮(设置按钮)（或者快捷键ctrl + shift + p），选择命令面板

2. 搜索snippets

3. 搜索javascript 找到 javascript.json

将下面的内容复制粘贴，覆盖掉默认设置就可以了

// 将设置放入此文件中以覆盖默认设置
{
    //自动保存
    "files.autoSave": "afterDelay",
   
     // 以像素为单位控制字号。
     "editor.fontSize": 18,
     //一个制表符等于的空格数
     "editor.tabSize": 2,
     // 自动更新扩展
     "extensions.autoUpdate": false,
     //关掉自动更新
     "update.channel": "none",
     // 通过使用 tab 键 补全代码
     "emmet.triggerExpansionOnTab": true,
    "window.zoomLevel": 1,
    "vsicons.dontShowNewVersionMessage": true,
    "workbench.startupEditor": "newUntitledFile",
    "workbench.sideBar.location": "right",
    "explorer.confirmDelete": false
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

常用插件

1. open in browser

打开默认浏览器 快捷键： alt+b
也可以在右击鼠标，选择 Open In Default Brower

2.Path intellisense 自动提示路径

3.Auto Close Tag :

匹配标签，关闭对应的标签。很实用【HTML/XML】

4.Auto Rename Tag

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

5.HTML Snippets：

超级实用且初级的 H5代码片段以及提示

6.HTMLHint：

html代码检测

7.HTML CSS Support

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

8.Path Autocomplete

路径智能补全

9.JavaScript Snippet Pack

针对js的插件，包含了js的常用语法关键字，很实用；

10.Class autocomplete for HTML

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

10.beautify

格式化代码的工具，可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用

11.jQuery Code Snippets：

jquery 重度患者必须品

12.vscode-icon：

让 vscode 资源树目录加上图标，必备良品！

13.VSCode Great Icons：

另一款资源树目录图标

14.colorize :

会给颜色代码增加一个当前匹配代码颜色的背景，非常好

15.Color Info：

提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

16.Bracket Pair Colorizer：

让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

17.vscode-fileheader：

顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

18.Document This :

js 的注释模板 （注意：新版的vscode已经原生支持,在function上输入/** tab）

19.filesize：

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

20.Code Runner :

代码编译运行看结果，支持众多语言

21.Bootstrap 3 Sinnpet：

常用 bootstrap 的可以下

22.GitLens：

丰富的git日志插件

23.VueHelper：

vue代码提示

24.Bookmarks：

一个书签工具,还是很有必要的

25.Prettier 代码自动化格式化

26.cssrem

将rem自动换算城rem，注意默认的font-size为16px; 需要根据设计图自己去修改配置