zoukankan      html  css  js  c++  java
  • Visual Studio Code 使用指南

        安装

      VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验。

      HTML Snippets:增强了zen-coding,增加了H5的自动补全,安装后每次打开自动启用(可能与其他插件冲突)。

      下载地址:https://code.visualstudio.com/Download

      配置

      Ctrl + Shift + P 或 F1 打开命令面板(也可以使用 查看-》命令面板打开);

      输入 user set 后按回车打开用户配置;

      使用 “editor.fontFamily”:“Consolas, ‘Courier New’, monospace” 选择字体样式,默认为“Consolas, ‘Courier New’, monospace”;使用 editor.fontSize“:14 控制字体大小,默认为14;使用 ”editor.wrappingColumn“:0使文本自动换行,默认为300;在左侧的默认配置中会有详细的中文描述,配置文件是json格式的文本文档。

      

      插件

      Ctrl + Shift + P 或 F1 打开扩展面板,输入 install 后按回车打开扩展安装面板;或点击侧边栏的最后一个按钮;或使用ctrl + shift + x命令打开;或使用 查看-》扩展打开扩展面板。

      在对话框中输入[string ]@sort:installs可以根据下载量排序查看,选择所需插件,单击安装即可。

      @sort:installs:根据下载量排序查看所有插件,asc 升序排列,desc 降序排列。

      @sort:raTIng :分级查看,asc 升序排列,desc 降序排列。

      string可以为空

      推荐插件

      C/C++:添加C/C++支持,包括但不限于自动补全

      Python:自动缩进,补全,查错,debug,代码格式化等等

      beauTIfy:格式化html,css,js

      vscode-icons:一款很火的图标主题

      HTML Snippets:可以在不输入 《 的情况下提示

      View In Browser:在浏览器中打开 HTML 文件

      Crane - PHP Intellisense:PHP代码的自动补全插件

      jQuery Code Snippets:一款jQuery重度患者的插件

      Debugger for Chrome :调试JavaScript

      Git History:显示git log和line history

      Git 的使用

      需要本机已经安装 Git

      无需安装插件,单机侧边栏的第三个图标即可进行 add、commit、push、pull。(或者使用ctrl+shift+g打开,或使用 查看-》Git 打开Git)

      

      主题更换

      图标主题:Ctrl+shift +p 打开命令面板,输入 icon theme 后回车,选择一个即可。

      颜色主题:Ctrl+shift +p 打开命令面板,输入 color theme 后回车,选择一个即可。

      

      跳转

      跳转到文件:Ctrl+P。

      跳转到符号:Ctrl+shift+o,可以跳转到文件中的方括号、大括号等等。

      跳转到行:Ctrl+G,可以跳转到指定行。

      

      Debug

      使用ctrl+d 打开debug面板。

      可以根据需要配置launch.json

      

      常用功能

      Emmet:使用 Tab 自动补全HTML标签

      Markdown Preview:使用 Ctrl + shift + v预览markdown文件

      使用shift + alt + up/down可以向上/下复制选中内容或者当前行

     

      常用插件

      View In Browser

      - 预览页面(ctrl+F1)

      vscode-icons

      - 侧栏的图标,对于一个有视觉强迫症的人是必须要的

      HTML Snippets

      - 支持HTML5的标签提示

      HTML CSS support

      - css自动补齐

      JS-CSS-HTML Formatter

      

      格式化

      jQuery Code Snippets

      jquery 自动提示

      Path Autocomplete

      - 路径自动补齐

      Npm Intellisense

      - npm包代码提示

      ESLint

      - 检测JS必备

      Debugger for Chrome

      - 方便调试

      Auto Rename Tag

      - 自动同步修改标签

      Bootstrap 3 Snippets

      - bootstrap必备

      Vue 2 Snippets

      - vue必备

      background

      - 一个萌萌的插件,可以自己设置vsc的背景图

      

      常用快捷键

      (在快捷键部分, ⌘ 指 Command 键,⇧ 指 Shift 键,⌃ 指 Control 键,⌥ 指 OpTIon/Alt 键。)

      这里主要就是实验F1上的快捷键,一些我认为没用的我就不列出来了。

      向上(下)复制行 shift + alt + top(down)

      向上(下)移动行* alt + top(down)*

      新建一个窗口 ctrl + shift + N

      行增加缩进: ctrl + [

      行减少缩进 * ctrl + ]**

      裁剪尾随空格(去掉一行的末尾那些没用的空格): ctrl + shift + x

      强烈建议把这个启用,这样保存的时候就会自动删掉那些没用的空格,在很多公司的代码规范里都是不允许存在这些空格的。

      显示隐藏侧边栏:ctrl + B

      拆分编辑器(最多拆分成三块):ctrl + /按ctrl + 1(2,3)就可以在拆分后的编辑器里切换

      方法缩小ctrl +(-)

      关闭编辑器 ctrl + W(F4)

      切换编辑器 ctrl + shift + left(right)

      也可以用 ctrl+1(2,3)

      显示和隐藏侧边栏 ctrl + B

      切换全屏 F11

      切换自动换行 alt + Z

      显示Git ctrl + shift + G

      前提是你的项目必须是一个git项目

      这个还是很有用的,有时候我们的屏幕不够大,可是代码没有自动换行,所以被遮住的代码就会看不到,但是你用这个快捷键就可以换行看到了。这个我是在用户设置里面设置成自动换行的。

      

      修改用户设置

      把默认的用户设置成适合我们自己的还是很重要的。

      也很简单,文件 – 首选项 – 用户设置,然后出来左边的默认设置是不能改的,需要在右边setTIngs.json中覆盖。

      

      修改快捷键

      文件 – 首选项 – 键盘快捷方式,和修改用户设置的时候一样,找到你要修改的快捷键名字,右边覆盖就可以了,一些还没有绑定快捷键的功能可以在左边的最下面看到,然后快捷键的名字就是这个。

       新建文件

      右键 – 新建文件,文件后缀名自己加上,自动识别。

           新建.html文件后,空白页,没有页面默认代码结构,此时在编辑区输入html,回车第二个或者第三个即可。

    技术群 : 192713488

  • 相关阅读:
    android数据恢复
    UVA 690 Pipeline Scheduling
    2017 国庆湖南 Day4
    2017 国庆湖南 Day5
    2017 国庆湖南 Day6
    2017国庆 清北学堂 北京综合强化班 Day1
    2017 国庆湖南Day2
    bzoj 2962 序列操作
    UVA 818 Cutting Chains
    UVA 211 The Domino Effect
  • 原文地址:https://www.cnblogs.com/webonline/p/8541122.html
Copyright © 2011-2022 走看看