vs code官方下载地址 : https://code.visualstudio.com/Download
 
下载好的vs code相当是一款纯文本编辑器,接下来开始进行对其配置:
 
  1. 页面设置(vscode通过添加指令的方式进行属性设置):

  在用户配置文件中配置,可以通过控制台熟读setting快速打开(MAC用户通过command+,快速呼出配置界面)

  files.autoSave :个人配置:

 

 
  1. vscode提供了丰富的插件库(个人所用到得插件):

  View In Browser

    • 预览页面(ctrl+F1)MAC (command+F1)

  vscode-icons

  • 侧栏的图标,对于一个有视觉强迫症的人是必须要的
  • 安装好后的配置:
  • HTML Snippets
    • 支持HTML5的标签提示

    HTML CSS support

    • css自动补齐

    JS-CSS-HTML Formatter

    • 格式化代码(ctrl+alt+f)

    jQuery Code Snippets

    • jquery 自动提示

    Path Autocomplete

  • 路径自动补齐(在有输入‘ / ’号的情况下提示路劲补全)

   ESLint

    • 检测JS语法是否错误必备
     Vue 2 Snippets
  • vue必备,提供vue.js2.0的语法库

     Debugger for Chrome

  • 通过谷歌浏览器进行断点调试,方便调试
 

  1. 常用快捷键:
ctrl+b 切换侧边栏
ctrl+\ 拆分编辑器
ctrl+鼠标滚轮 缩放编辑器的字体
alt+shift+f 整理代码格式
alt+z 切换自动换行
ctrl+· 打开终端调试
ctrl+shift+n 新建窗口
ctrl+p 文件内搜索(聚焦在某个文件)
ctrl+shif+f 全编辑器搜索(聚焦在资源管理器)
单击文件 预览(再点别的会替换成其他)
双击文件 编辑文件(固定在工作区)
 

  1. 工作区间设置
          设置文件位置(中文版):文件->首选项->工作区设置->setting.json
          设置文件位置(中文版):File > Preferences->setting.json
     
控制在多少个字符后编辑器会自动换到下一行。将其设置为 0 则将打开视区宽度换行(自动换行)。将其设置为 -1 则将强制编辑器始终不换行。"editor.wrappingColumn": 0
 
控制行号的可见性 "editor.lineNumbers": true
控制编辑器是否应呈现缩进参考线"editor.renderIndentGuides": true
 
控制是否自动保存更新后的文件。接受的值:“off”、“afterDelay”、“onFocusChange”(编辑器失去焦点)、“onWindowChange”(窗口失去焦点)。如果设置为“afterDelay”,则可在 "files.autoSaveDelay" 中配置延迟。"files.autoSave": "off"
 
控制资源管理器是否应该允许通过拖放移动文件和文件夹,(默认就是true,不需要专门修改)。"explorer.enableDragAndDrop": true
 
缩进 head 和 body 部分(默认false)。"html.format.indentInnerHtml": false
 

  1. 开始工作
     新建一个html文档,会发现没有模版代码,这个时候我们在第一行输入!,点击tab键,就会生成:
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   
</body>
</html>
 
把其中的两段代码去掉。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
 

 
 

关于vs code的个人配置的更多相关文章

  1. Fluent Nhibernate code frist简单配置

    Fluent Nhibernate code frist简单配置   前言 在以前的项目开发过程中使用nhibernate做完orm映射工具需要编写大量的xml映射文件,项目过程中往往会因为一个字段等 ...

  2. 第二节:创建模型,使用Code First,配置映射关系

    这一节,实现模型的创建,配置映射关系 使用Code First数据迁移. 创建模型 一,首先创建几个接口:实体接口,聚合根接口,值对象接口 1,实体接口: 2,聚合根接口: 3,值对象接口: 二,模型 ...

  3. Code Blocks中配置OpenGL方法

    关于在Code Blocks中配置OpenGL的方法,在网上一直没有找到实用的方法,后来在马龙师兄的帮助下终于配置成功了,现把配置过程记录如下. (1)下载codeblocks,最好是带mingw的版 ...

  4. Code First 关系配置整理

    之前EF一直有性能问题以及使用便利性问题, 终于到了EF6有了Migrations之后, 小弟也决定加入EF阵营了. 在学习FluentAPI配置关系的时候, 发现网上的好几个教程实际上博主自己都没有 ...

  5. Code First03---CodeFirst根据配置同步到数据库的三种方式

    上一节我们说到使用Fluent API对实体的配置,但是有一个问题了,在业务中我们可以用到的实体很多,那是不是每个都需要这样去配置,这样就造成我们重写的OnModelCreating方法很庞大了.所以 ...

  6. Code::Blocks项目配置基础

    File 菜单 New :新建( Empty file/file . class . project . build target ) . Recent projects/files :近期打开的项目 ...

  7. visual studio code 调试nodejs 配置简单HTTP服务器

    介绍 Visual Studio Code是一个轻量级的Web集成开发环境on Linux,Mac and Windows,特别是作为前端人员来了, 多了一个可供选择的生产力工具IDE,调试js代码简 ...

  8. 高效开发者是如何个性化VS Code插件与配置的?

    2年之前,我放弃了Sublime Text,选择了Visual Studio Code作为代码编辑器. 我每天花在VS Code上的时间长达5~6个小时,因此按照我的需求优化VS Code配置十分必要 ...

  9. 【译】第8节---EF Code First中配置类

    原文:http://www.entityframeworktutorial.net/code-first/configure-classes-in-code-first.aspx 前面的章节中我们知道 ...

随机推荐

  1. 如何修改SVN客户端中保存的密码

    本文主要讲述Linux命令行下怎么修改已经保存的客户端密码: 第一步,删除 subvision文件: rm -rf ~/.subvision 第二步:执行任意需要访问服务器的svn命令,会提示是否永久 ...

  2. gzip 与 gunzip 语法与示例

    gzip 与 gunzip 语法与示例 语法: gunzip -c 被压缩的文件 > 已解压的文件示例: 将 catalina.out.gz 文件解压到 catalina.out 文件中: gu ...

  3. 关于Tarjan(2)

    Tarjan有第二个神奇的用法,求强连通分量!!!!!!!!!!!!!!!!!!! 同样利用了dfn:dfs序,low:能回到的最早祖先的dfn: 废话少说 上板子 #include<iostr ...

  4. Shell中一键添加作者,版权信息

    第一步:编辑/etc/vimrc文件 [root@proxy ~]# cp /etc/vimrc /etc/vimrc.ori [root@proxy ~]# vim /etc/vimrc 第二步:直 ...

  5. Unity无缝循环世界实现

    一年前曾经碰到过已无限世界为题材的游戏开发比赛,虽然对比赛没有兴趣,但是对这个题材倒是有点想法.如何通过unity3d实现无缝的循环世界呢. 有一种想法是动态生成,一块场景一块场景进行动态加载.(做过 ...

  6. div内部元素居中

    要让div内部元素垂直居中,则给div加上此css样式: .div-vertical-middle{  height:200px;  width:304px;  line-height:50px;  ...

  7. 如何在IDEA中调试 Jar文件

    原创文章,转载请注明出处:http://www.cnblogs.com/acm-bingzi/p/6668333.html   问题: 一般情况下,可以打成Jar包的项目,它的源码运行Applicat ...

  8. AngularJS1.X学习笔记2-数据绑定

    上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了 ...

  9. 设置ZooKeeper服务器地址列表源码解析及扩展

    设置ZooKeeper服务器地址列表源码解析及扩展 ZooKeeper zooKeeper = new ZooKeeper("192.168.109.130:2181",SESSI ...

  10. MySQL关于Duplicate entry '1' for key 'PRIMARY'错误

    今天复习MySQL遇到Duplicate entry '1' for key 'PRIMARY'错误. 原因是主键值为'1'的数据已经存在,主键是唯一的,不可重复.