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">
 
 
 
 

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

  1. vscode编辑器自定义配置

    { //删除文件确认 "explorer.confirmDelete": false, // 主题 "workbench.iconTheme": "v ...

  2. 前端之旅一：vscode调试web配置

    vscode调试web配置 第一步:安装vscode,并启动(vscode的安装包自行到其官网上下载) 第二步:在vscode上安装chrome插件 第三步:配置,启动调试 配置信息 { // Use ...

  3. vscode 安装与配置

    vscode 安装与配置 安装 安装 vscode 从官网 [https://code.visualstudio.com/Download] 下载速度奇慢,可以找到下载的网址,如下图所示,将其中红色框 ...

  4. Vue学习笔记-VSCode安装与配置

    一  使用环境: windows 7 64位操作系统 二  VSCode安装与配置  1.下载: https://code.visualstudio.com 直接点击即可. 2. 点击按装程序,默认安 ...

  5. VSCode·备份&还原配置及拓展项

    阅文时长 | 0.54分钟 字数统计 | 924字符 主要内容 | 1.引言&背景 2.备份VSCode配置 3.还原VSCode配置 4.Syncing常用命令 5.声明与参考资料 『VSC ...

  6. 使用 VSCode 给STM32配置一个串口 printf 工程

    使用 VSCode 给STM32配置一个串口 printf 工程 gcc 重定向 printf 和 keil 不一样. 文件准备 先从以前的工程中拷过一份串口的代码来,然后在 main 函数中初始化串 ...

  7. VSCode官方的配置同步方案

    前言 这几天在迁移电脑工作环境,对于VSCode,我实在不想从头做下载插件.配置代码规则这样的事情,于是求助百度,搜索结果靠前的解决方案基本都是使用Setings Sync插件,于是我就从了. 经过好 ...

  8. LibOpenCM3(四) VSCode IDE 环境配置

    目录 LibOpenCM3(一) Linux下命令行开发环境配置 LibOpenCM3(二) 项目模板 Makefile分析 LibOpenCM3(三) .ld文件(连接器脚本)和startup代码说 ...

  9. VScode插件以及配置

    Auto Rename Tag —— 自动同步修改标签 AutoFileName —— 自动补全路径提示 background —— 一个萌萌的插件,可以自己设置vsc的背景图 Bootstrap 3 ...

  10. Vscode的python配置（macOS）

    _ 1. Vscode是一款开源的跨平台编辑器.默认情况下,vscode使用的语言为英文(en),以下步骤改为中文 打开vscode工具,使用快捷键组合[Cmd+Shift+p],在搜索框中输入“co ...

随机推荐

  1. Delphi7目录结构----初学者参考

    打开Delphi的安装目录,如C:\Program Files\Borland\Delphi7,你将会看到目录下包含了一些文件和文件夹: ²        Source:存放的是Delpi提供的所有源 ...

  2. Android Studio引入AAR文件

    一.编译生成AAR文件 二.把AAR文件复制到项目的libs目录下 三.在项目的配置文件中加入如下代码: android { //other code repositories{ flatDir{ d ...

  3. 「日常训练」Mike and Feet（Codeforces Round #305 Div. 2 D）

    题意 (Codeforces 548D) 对一个有$n$个数的数列,我们要求其连续$x(1\le x\le n)$(对于每个$x$,这样的连续group有若干个)的最小数的最大值. 分析 这是一道用了 ...

  4. SQL SERVER 的操作复习

    一.数据库的创建(SQL语句)CREATE DATABASE AON PRIMARY --主文件组(    NAME='A_data',--逻辑文件名    --物理文件名    FILENAME=' ...

  5. 6.0 实现app登录

    1.0.0:学习ui自动化准备工作 待测app,我这里有准备两个apk,这两个都是我曾经做过的项目,后续的文章都是基于这两个app! 链接:https://pan.baidu.com/s/1I0vR9 ...

  6. iOS-SDWebImage的原理以及使用流程

    SDWebImage 支持异步的图片下载+缓存,提供了 UIImageView+WebCacha 的 category,方便使用.SDWebImage加载图片的流程: 1. 入口 setImageWi ...

  7. 最快的Hash表算法

    我们由一个简单的问题逐步入手:有一个庞大的字符串数组,然后给你一个单独的字符串,让你从这个数组中查找是否有这个字符串并找到它,你会怎么做?有一个方法最简单,老老实实从头查到尾,一个一个比较,直到找到为 ...

  8. Java集合整体框架

    Java中的集合类有List.Set.Map Collection的实现类:List.Set List的实现类:ArrayList.LinkedList.Vector Set的实现类:HashSet. ...

  9. 【转】Visio画用例模型图竟然没有include关系

    转自:http://blog.csdn.net/shuixin536/article/details/8289746 由于电脑上没有安装Rose,因此决定用visio来画UML中的用例模型图,在绘制的 ...

  10. Problem Collection I 位运算

    XOR ARC 092B CF 959E xor-MST CF 959F