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. 优雅的使用sublime写lua~ sublime lua相关必装插件推荐~~

    缘起 lua脚本语言虽好,代码写得飞快,可是写错了调试起来却很困难,lua使用者经常容易犯得一个错误是--写错变量名了,if end 嵌套太多没匹配~,多打了一个逗号, 假设定义了一个变量 local ...

  2. gitignore文件中添加新过滤文件,但是此文件已经提交,如何解决?

    gitignore文件中添加新过滤文件,但是此文件已经提交到远程库,如何解决? 第一步,为避免冲突需要先同步下远程仓库 git pull 第二步,在本地项目目录下删除缓存 git rm -r --ca ...

  3. Cannot use ImageField because Pillow is not installed.

    现象描述: 使用 ImageField ,创建数据库表时,提示如下: Cannot use ImageField because Pillow is not installed. HINT: Get ...

  4. CSS学习笔记汇总

    CSS语法格式:一个css规则,由一个选择器和一个格式声明语句构成    例如:h1{color:red; font-size:14px;} CSS选择器: 1.基本选择器 1)* 号选择器:通配符, ...

  5. pyhton中的Queue(队列)

    什么是队列? 队列就像是水管子,先进先出,与之相对应的是栈,后进先出. 队列是线程安全的,队列自身有机制可以实现:在同一时刻只有一个线程在对队列进行操作. 存数据,取数据 import Queue q ...

  6. TensorFlow安装-windows系统

    官方各版本的安装说明:https://www.tensorflow.org/install/ 本文介绍如何在windows环境下安装tensorflow, 跑起来简单的demo. 1.安装python ...

  7. CoreCLR源码探索(五) GC内存收集器的内部实现 调试篇

    在上一篇中我分析了CoreCLR中GC的内部处理, 在这一篇我将使用LLDB实际跟踪CoreCLR中GC,关于如何使用LLDB调试CoreCLR的介绍可以看: 微软官方的文档,地址 我在第3篇中的介绍 ...

  8. pacejs进度条监控服务端数据加载是否完毕

    记得刚刚入职新公司的时候,公司在做app里面的h5页面.跟之前公司的流程不太一样.之前都是写完静态页面后通过ajax加载接口数据,这公司省事了,写完静态页面直接扔给服务端,他们来填数据,确实给前端省事 ...

  9. 老司机实战Windows Server Docker:5 Windows Server Dockerfile葵花宝典

    前面两篇(简单运维1.简单运维2)介绍了一些Windows Server Docker相关的基本运维知识.今天这一篇,Windows Server Dockerfile葵花宝典,涵盖了许多典型场景的W ...

  10. android中的 Toast 和 AlertDialog

    Toast 一般用来显示一些不需要用户操作的提示信息,举个栗子: public void toast(String msg) { //---创建并设置显示的内容和显示时长 Toast toast = ...