• 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

  • 相关阅读:
    SQL横表纵表转换和对比
    计算机书籍
    附加原型链
    Object.create()
    解构赋值是浅拷贝
    Object.keys(xxx)与Object.getOwnPropertyNames(xxx)
    剑指 Offer 45. 把数组排成最小的数
    剑指 Offer 46. 把数字翻译成字符串
    剑指 Offer 43. 1~n 整数中 1 出现的次数
    剑指 Offer 41. 数据流中的中位数
  • 原文地址:https://www.cnblogs.com/webonline/p/8541122.html
Copyright © 2020-2023  润新知