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. Spring+SpringMVC+MyBatis+easyUI整合基础篇（十二）阶段总结

    不知不觉,已经到了基础篇的收尾阶段了,看着前面的十几篇文章,真的有点不敢相信,自己竟然真的坚持了下来,虽然过程中也有过懒散和焦虑,不过结果还是自己所希望的,克服了很多的问题,将自己的作品展现出来,也发 ...

  2. Visual Studio 2015创建ASP.NET5项目“DNX SDK version 'dnx-clr-win-x86.1.0.0-beta5' 无法安装的错误

    使用asp.net5建立web application时遇到DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装的错误 解决办法: 运行cmd: 1.输入: @pow ...

  3. django进阶补充

    前言: 这篇博客对上篇博客django进阶作下补充. 一.效果图 前端界面较简单(丑),有两个功能: 从数据库中取出书名 eg: 新书A 在form表单输入书名,选择出版社,选择作者(多选),输入完毕 ...

  4. IOS百度地图之--->第二篇《大头针__简单使用及自定义》

    呵呵!大家不要只看帖不回帖么,要不然我都没有积极性了. 第一步:创建一个用来呈现mapview的viewcontroller,不废话直接贴代码        BasicMapViewControlle ...

  5. Screen的简单使用

    第1步:新建窗口 输入: screen [-S <作业名称>] 第2步:随便干些什么 在窗口中执行任意命令,干什么都行 第3步:挂起窗口 Ctrl + a d 第4步:还原窗口 scree ...

  6. flex与后台及页面间对象的传递

    1.从flex中发送请求后,利用<s:RemoteObject/>启用回调方法,类似于jQuery的post函数: <fx:Declarations>        <s ...

  7. js移动端横竖屏检测

    方法一:用resize事件来判断,利用屏幕的宽高比,来判断横竖屏 (兼容性较好) (function () { var updateOrientation = function () { var or ...

  8. winform 自定义分页控件 及DataGridview数据绑定

    分页效果如上图所示,用到的控件均为基本控件 ,其方法如下 右击项目-添加-新建项 选择用户控件 然后在用户控件中拖入所需要的Label,Button,Text 用户控件全部代码: using Syst ...

  9. python 自动化接口测试（6）

    迎接新的一波更新吧,这次是基于图灵机器人的一个api接口的测试. 这是api的接口:http://www.tuling123.com/openapi/api 我们试着通过浏览器直接访问看下 这是反馈的 ...

  10. 1135: 零起点学算法42——多组测试数据（求和)IV

    1135: 零起点学算法42--多组测试数据(求和)IV Time Limit: 1 Sec  Memory Limit: 64 MB   64bit IO Format: %lldSubmitted ...