• Vue.js学习(七)—— Vue开发与调试工具之vscode


      VSCode是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。
     
    一、vscode安装
    1、进入vscode官网(https://code.visualstudio.com/Download

     2、双击下载的安装包,进入安装向导界面;点击下一步

     3、进入许可协议,点击“我接受协议”选项;点击下一步

     4、选择目标位置,就是你想把软件安装在哪个目录;选择合适的目录后继续点击下一步

     5、进入选择其他任务界面,默认已经勾选了必要的任务,这里尽量不要修改默认的,同时你也可以选择将打开方式添加到鼠标右键菜单上(勾选“其他”中的第一选项),继续点击下一步

     6、直接点击安装;几秒后,即可安装完成

    二、vscode插件安装

    1、进入vscode官网插件商店(https://marketplace.visualstudio.com/VSCode

    2、以安装Vetur插件为例

    3、点击install,会启动vscode

    4、在vscode中点击安装即可

    5、vue相关插件

    • vetur 语法高亮、智能感知
    • VueHelper vue代码碎片
    • Vue 2 Snippets vue2代码碎片

    三、将vscode设置成中文

    1、首先打开VSCode软件,可以看到刚刚安装的VSCode软件默认使用的是英文语言环境,如下图:

     2、接下来小编开始设置为中文语言环境,这里需要使用快捷键【Ctrl+Shift+P】来实现,如下图:

     3、在弹出的搜索框中输入【configure language】,然后选择搜索出来的【Configure Display Language】,如下图:

     4、然后就打开了locale.json文件,可以看到locale的属性值为en,如下图:

     5、删除locale后面的属性直到冒号,然后重新输入冒号会自动出现代码提示,如下图:

    6、这里选择“zh-CN”,如下图:

     

     7、然后保存locale.json文件,重新启动VSCode软件,可以看到,并没有变为中文语言环境,那是应为locale.json中的代码配置的意思是说软件启动加载语言配置包为中文,但是实际上刚刚安装的VSCode并没有中文语言包,所以这里并没有显示为中文语言环境,如下图:

    8、按照下图中红色箭头指示位置点击步骤1指向,然后在弹出的搜索框中输入Chinese,然后选择【Chinese (Simplified)Language Pack for Visual Studio Code】,然后点击右侧的【Install】,如下图:

     9、安装好中文语言包之后软件会提示重启VSCode,点击【Yes】重启VSCode软件,如下图:

     10、重启VSCode软件之后就会看到我们熟悉的中文语言环境界面了,如下图:

    四、导入工程

    以vue项目为例

    1、在vscode ide中选择"文件"-->"打开文件夹"

    2、将构建好的vue工程导入

    五、开发组件

    安装vue相关插件之后,vscode会有代码提示功能

    六、快捷键

    所有快捷键设置:文件→首选项→键盘快捷方式

    在当前行中间换行到下一行:ctrl+enter 
    
    当光标点击到某一行时,默认选中全行,可以直接复制剪切 
    
    直接删除某一行:shift+delete或者ctrl+shift+k 
    
    多行光标选择:alt+鼠标左键 
    
    自动生成html结构和meta声明:首先输入“!”,然后按tab键 
    
    标签自动补全:tab键 
    
    折叠所有代码:ctrl+k、ctrl+0 
    
    拆分编辑器:ctrl+ 查找框右边的3个参数分别为:区分大小写,全字匹配,使用正则 
    
    跳转行号:ctrl+G 
    
    添加函数注释:在函数上方输入“/**”,然后点击enter 
    
    格式化:alt+shift+f 
    
    注释:ctrl+/ 
    
    全部保存:ctrl+k, 然后只按s一个键 
    
    向上移动一行:alt+↑ 
    
    向下移动一行:alt+↓ 
    
    向上复制一行:alt+shift+↑ 
    
    向下复制一行:alt+shift+↓ 
    
    查找:ctrl+F 
    
    替换:ctrl+H 
    
    文件夹中查找:ctrl+shift+f 

    可以在打开的文件夹中搜索所有文件内容

    文件中替换:ctrl+shift+h 
    
    转到定义:F12 
    
    转到实现:ctrl+F12 
    
    打开文件夹:ctrl+k, ctrl+o 
    
    关闭文件夹:ctrl+k, 然后单按一个f 
    
    选中一段代码,通过“ctrl+[”可以左移,“ctrl+]”可以右移

    进入vscode官网插件商店(https://marketplace.visualstudio.com/VSCode

  • 相关阅读:
    VSCODE打开一个文件,另一个文件就关闭的问题的解决方法
    elementui的el-tree第一次加载无法展开和选中的问题
    Java线程知识:二、锁的简单使用
    “商家参数格式有误”应用切微信H5支付完美解决方案
    git 基础操作,公私钥认证/ssh公私钥登录
    Python数据分析之亚马逊股价
    Python分析6000家破产IT公司
    Python数据分析之股票数据
    Python数据分析之全球人口数据
    Vue 面试重点真题演练
  • 原文地址:https://www.cnblogs.com/javahr/p/13606317.html
Copyright © 2020-2023  润新知