Vue系列教程(03)- Vue开发利器(VsCode)

简介: Vue系列教程(03)- Vue开发利器(VsCode)

1. 前言

工欲善其事必先利其器,就像Java开发需要IDEA一样,Vue的开发也需要利器,便是:VsCode

介绍:

  • VsCode是微软开发并开源,同时可以免费使用的轻量级IDE
  • 它与VisualStudio的区别,没有VS 那么重。 下面是官方的FAQ的回答:

Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE.

翻译后的意思是:

VS Code是个简化高效的代码编辑器,同时支持如是调试、任务执行,版本管理等开发操作。它的目标就是提供一个快速的编码-编译-调试的工具。然后其它的交给IDE,像Visual Studio IDE

2. 下载安装

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

版本说明:

  • User Installer版:会安装在当前计算机帐户目录,意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode
  • System Installer版:安装在非用户目录,例如C盘根目录,任何帐户都可以使用。(建议使用此版本)

vscode默认提供的User Installer版,大多数人都是用的这个版本。

安装在此处不再详述,直接点击下一步(next)直至安装成功即可,安装成功后如下:

3. 创建并导入vue项目

3.1 插件安装

1.安装vue插件vetur(实现支持vue文件的代码高亮):

  • 步骤: 点击左边的Extensions图标,输入vetur,找对对应版本然后点击install即可

2.同样方式安装ESLint 插件:

3.2 使用脚手架安装项目

1.点击Terminal菜单,选择new Terminal:

2.创建一个命令行终端窗口,然后切换到对应的准备存放代码的目录:

cd 创建的目录
vue create vue-test

创建成功:

3.3 导入项目

File(文件) -> 打开文件夹 ->选择刚刚新创建的项目:

打开成功:

3.4 运行项目

1.点击Terminal菜单,选择new Terminal,并在terminal里面执行:

npm run serve

浏览器打开:http://localhost:8080/ ,运行成功:

4. 快捷键设置

1.点击左下角设置按钮:

2.选择键盘快捷方式

3.更改绑定(以下是我的个人偏好):

快捷键 默认 更改后
向上移动行(Move Line Up) Option + Up Command + Up
向下移动行(Move Line Down) Option + Down Command + Down
代码提示(Trigger Suggest) Control+Space Shift+J

其它代码提示可以参考:https://www.cnblogs.com/informatics/p/8315339.html,这里直接copy过了。

全局

  • Command + Shift + P / F1 显示命令面板
  • Command + P 快速打开
  • Command + Shift + N 打开新窗口
  • Command + W 关闭窗口

基本:

  • Command + X 剪切(未选中文本的情况下,剪切光标所在行)
  • Command + C 复制(未选中文本的情况下,复制光标所在行)
  • Option + Up 向上移动行
  • Option + Down 向下移动行
  • Option + Shift + Up 向上复制行
  • Option + Shift + Down 向下复制行
  • Command + Shift + K 删除行
  • Command + Enter 下一行插入
  • Command + Shift + Enter 上一行插入
  • Command + Shift + \ 跳转到匹配的括号
  • Command + [ 减少缩进
  • Command + ] 增加缩进
  • Home 跳转至行首
  • End 跳转到行尾
  • Command + Up 跳转至文件开头
  • Command + Down 跳转至文件结尾
  • Ctrl + PgUp 按行向上滚动
  • Ctrl + PgDown 按行向下滚动
  • Command + PgUp 按屏向上滚动
  • Command + PgDown 按屏向下滚动
  • Command + Shift + [ 折叠代码块
  • Command + Shift + ] 展开代码块
  • Command + K Command + [ 折叠全部子代码块
  • Command + K Command + ] 展开全部子代码块
  • Command + K Command + 0 折叠全部代码块
  • Command + K Command + J 展开全部代码块
  • Command + K Command + C 添加行注释
  • Command + K Command + U 移除行注释
  • Command + / 添加、移除行注释
  • Option + Shift + A 添加、移除块注释
  • Option + Z 自动换行、取消自动换行

多光标与选择:

  • Option + 点击 插入多个光标
  • Command + Option + Up 向上插入光标
  • Command + Option + Down 向下插入光标
  • Command + U 撤销上一个光标操作
  • Option + Shift + I 在所选行的行尾插入光标
  • Command + I 选中当前行
  • Command + Shift + L 选中所有与当前选中内容相同部分
  • Command + F2 选中所有与当前选中单词相同的单词
  • Command + Ctrl + Shift + Left 折叠选中
  • Command + Ctrl + Shift + Right 展开选中
  • Alt + Shift + 拖动鼠标 选中代码块
  • Command + Shift + Option + Up 列选择 向上
  • Command + Shift + Option + Down 列选择 向下
  • Command + Shift + Option + Left 列选择 向左
  • Command + Shift + Option + Right 列选择 向右
  • Command + Shift + Option + PgUp 列选择 向上翻页
  • Command + Shift + Option + PgDown 列选择 向下翻页

查找替换:

  • Command + F 查找
  • Command + Option + F 替换
  • Command + G 查找下一个
  • Command + Shift + G 查找上一个
  • Option + Enter 选中所有匹配项
  • Command + D 向下选中相同内容
  • Command + K Command + D 移除前一个向下选中相同内容

进阶:

  • Ctrl + Space 打开建议
  • Command + Shift + Space 参数提示
  • Tab Emmet插件缩写补全
  • Option + Shift + F 格式化
  • Command + K Command + F 格式化选中内容
  • F12 跳转到声明位置
  • Option + F12 查看具体声明内容
  • Command + K F12 分屏查看具体声明内容
  • Command + . 快速修复
  • Shift + F12 显示引用
  • F2 重命名符号
  • Command + Shift + . 替换为上一个值
  • Command + Shift + , 替换为下一个值
  • Command + K Command + X 删除行尾多余空格
  • Command + K M 更改文件语言

导航:

  • Command + T 显示所有符号
  • Ctrl + G 跳转至某行
  • Command + P 跳转到某个文件
  • Command + Shift + O 跳转到某个符号
  • Command + Shift + M 打开问题面板
  • F8 下一个错误或警告位置
  • Shift + F8 上一个错误或警告位置
  • Ctrl + Shift + Tab 编辑器历史记录
  • Ctrl + - 后退
  • Ctrl + Shift + - 前进
  • Ctrl + Shift + M Tab 切换焦点

编辑器管理:

  • Command + W 关闭编辑器
  • Command + K F 关闭文件夹
  • Command + \ 编辑器分屏
  • Command + 1 切换到第一分组
  • Command + 2 切换到第二分组
  • Command + 3 切换到第三分组
  • Command + K Command + Left 切换到上一分组
  • Command + K Command + Right 切换到下一分组
  • Command + K Command + Shift + Left 左移编辑器
  • Command + K Command + Shift + Right 右移编辑器
  • Command + K Left 激活左侧编辑组
  • Command + K Right 激活右侧编辑组

文件管理:

  • Command + N 新建文件
  • Command + O 打开文件
  • Command + S 保存文件
  • Command + Shift + S 另存为
  • Command + Option + S 全部保存
  • Command + W 关闭
  • Command + K Command + W 全部关闭
  • Command + Shift + T 重新打开被关闭的编辑器
  • Command + K Enter 保持打开
  • Ctrl + Tab 打开下一个
  • Ctrl + Shift + Tab 打开上一个
  • Command + K P 复制当前文件路径
  • Command + K R 在资源管理器中查看当前文件
  • Command + K O 新窗口打开当前文件

显示:

  • Command + Ctrl + F 全屏、退出全屏
  • Command + Option + 1 切换编辑器分屏方式(横、竖)
  • Command + + 放大
  • Command + - 缩小
  • Command + B 显示、隐藏侧边栏
  • Command + Shift + E 显示资源管理器 或 切换焦点
  • Command + Shift + F 显示搜索框
  • Ctrl + Shift + G 显示Git面板
  • Command + Shift + D 显示调试面板
  • Command + Shift + X 显示插件面板
  • Command + Shift + H 全局搜索替换
  • Command + Shift + J 显示、隐藏高级搜索
  • Command + Shift + C 打开新终端
  • Command + Shift + U 显示输出面板
  • Command + Shift + V Markdown预览窗口
  • Command + K V 分屏显示 Markdown预览窗口

调试:

  • F9 设置 或 取消断点
  • F5 开始 或 继续
  • F11 进入
  • Shift + F11 跳出
  • F10 跳过
  • Command + K Command + I 显示悬停信息

集成终端

  • Ctrl + 显示终端 Ctrl + Shift + 新建终端
  • Command + Up 向上滚动
  • Command + Down 向下滚动
  • PgUp 向上翻页
  • PgDown 向下翻页
  • Command + Home 滚动到顶部
  • Command + End 滚动到底部
目录
相关文章
|
4天前
|
前端开发 搜索推荐 C++
Marp 教程:如何在 VSCode 中引入自定义样式和主题
本文介绍了如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和独特。首先,你需要安装 VSCode 和 Marp 插件,了解 Marp 的基本结构。接着,通过创建自定义 CSS 文件并在 Markdown 文件中引入,实现样式定制。此外,还可以创建和使用自定义主题,以及进行高级自定义,如调整布局、引入自定义字体和定义复杂动画。最后,使用 Marp 的预览功能实时查看效果。
13 0
|
4天前
|
前端开发 C++
Marp 教程:使用 VSCode 编写专业 PPT
Marp 是一款基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可让你高效地创建专业 PPT。本教程将指导你如何在 VSCode 中安装 Marp 插件、配置主题和样式,并使用 Markdown 语法创建和美化幻灯片。内容包括基本结构、布局、图片与图表插入、表格制作,以及高级功能如动画效果、数学公式和代码高亮。最后,你将学会如何预览和导出幻灯片。
17 0
|
2月前
|
编译器 C语言 C++
VSCode安装配置C语言(保姆级教程)
VSCode安装配置C语言(保姆级教程)
|
2月前
|
Linux C语言 C++
vsCode远程执行c和c++代码并操控linux服务器完整教程
这篇文章提供了一个完整的教程,介绍如何在Visual Studio Code中配置和使用插件来远程执行C和C++代码,并操控Linux服务器,包括安装VSCode、安装插件、配置插件、配置编译工具、升级glibc和编写代码进行调试的步骤。
354 0
vsCode远程执行c和c++代码并操控linux服务器完整教程
|
4月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
4月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
595 1
|
5月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
342 3
|
5月前
vscode 生成项目目录结构 directory-tree 实用教程
vscode 生成项目目录结构 directory-tree 实用教程
357 2
|
5月前
|
前端开发 JavaScript 开发工具
vscode教程(含使用技巧、保存时自动格式化文件等设置)
vscode教程(含使用技巧、保存时自动格式化文件等设置)
478 0
|
6月前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
934 0
下一篇
DataWorks