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. android activity状态保存

    一.被其他任务打断(来电话),再次打开希望保留数据 private String SAVE_INSTANCE_TAG = "ATWAL"; @Override protected ...

  2. python基础训练营06

    任务六 时长: 啥是佩奇代码复现 参考链接:https://mp.weixin.qq.com/s/whtJOrlegpWzgisYJabxOg 画一只佩奇: 代码: from turtle impor ...

  3. JavaSE复习(四)File类与IO流

    File类 构造方法 public File(String pathname) :通过将给定的路径名字符串转换为抽象路径名来创建新的 File实例. public File(String parent ...

  4. [整理]docker内部时区修改的两种方法

    方法一 终端执行 date命令,查看宿主服务器的时区是否正确 如果正确: 执行 docker cp /etc/localtime 容器ID:/etc/localtime 将本地时间拷贝到docker内 ...

  5. flex builder 4

    下载地址(需要登录):http://trials.adobe.com/AdobeProducts/FLBR/4/win32/FlashBuilder_4_LS10.exe 很全的在线帮助文档:http ...

  6. Android问题:could not install *smartsocket* listener;Address already in use

     今天启动genymotion后,发现没有ip地址,运行项目时报错:     可见,没有连接到模拟器,无法运行,而先前说过没有ip,自然而然连接不上,   解决放法:将资源管理器打开,将adb全部退出 ...

  7. VFS dup ,dup2

    Linux支持各种各样的文件系统格式,如ext2.ext3.reiserfs.FAT.NTFS.iso9660等等,不同的磁盘分区.光盘或其它存储设备都有不同的文件系统格式,然而这些文件系统都可以mo ...

  8. Unity3D - UGUI实现Tab键切换输入框、按钮(按Tab键切换高亮显示的UI)

    1.在Hierarchy面板创建能被选中的UI(Button.InputField等). 2.在Canvas上创建C#脚本 TabCutPichon. 3.编写脚本. using System.Col ...

  9. 利用Github Pages建立仓库“门面”

    嘛是Github Pages? Github Pages 是一个静态网站托管服务,用来从你的Github仓库中直接发布 个人.组织或项目的网站页面 Github Pages发布的页面统一使用githu ...

  10. 搭建ELK 6

    ELK 6.2.4搭建 https://www.cnblogs.com/harvey2017/p/8922164.html 开源实时日志分析ELK平台能够完美的解决我们上述的问题,ELK由Elasti ...