新手如何使用VS Code看这一篇就够了!

简介: VS Code新手使用教程

原文链接https://note.noxussj.top/?source=aliyun


介绍

Visual Studio Code 是一款非常轻量的前端代码编写工具,也是目前比较主流的。其中还包含了丰富的插件市场、非常好看的界面风格、可在软件内直接使用命令行工具等。

建议

在学习前端之前可以先把软件下载好,方便实践操作。


安装

官方下载地址:https://code.visualstudio.com

image1.d2db935e.png

image2.d0779fa4.png


汉化

我们下载完后是英文版的,所以要去 VS Code 的插件市场中去下载中文版插件 Chinese

image3.bbd4aee0.png

安装插件后,重新启动 VS Code。

image4.90f718d3.png


开发习惯配置

以下是我的个人习惯,小伙伴们可以自行看是否需要。

设置手动代码提示快捷键

文件 -> 首选项 -> 键盘快捷键方式

或者 Windows 快捷键:CTRL + K + S

image5.8610f379.png


扩展插件

VS Code 强大的插件市场,主要介绍几款常用的插件。

提示

如果你目前用不上这些插件,可以先不用安装。

One Dark Pro

该插件是一款好看的代码主题。

image6.21b6d2e9.png

GitLens — Git supercharged

Git 记录查看工具,方便随时随刻查看某个人某时间点改了某一行代码。方便查看单个文件的修改记录。目前小伙伴们可能用不上,需要先掌握 Git 技术后才能用。

image7.a40696c6.png

Path Autocomplete

URL 路径补充插件,当你需要查找某个 src 路径的时候,它会给你代码提示。例如写 img 标签的 src 路径时候能用上。

image8.4c264abf.png

Vuter

用于高亮 .vue 文件的代码,主要适用于 Vue2.0。目前如果用不上可以先不安装。

image9.e8f95935.png

Prettier - Code formatter

用于格式化大部分语言代码,还可以搭配配置文件,自定义格式化风格。

在项目根目录下新建 .prettierrc 文件。

{
"printWidth": 170,
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"trailingComma": "none"}

image10.68823e31.png

Live Server

可以直接把你的 .html 文件部署到服务端。

image11.85c3d931.png


快捷键大全

列举了比较常用的快捷键方式

功能名称

快捷键

当前文件搜索

Ctrl + F

全局搜索

Ctrl + Shift + F

全选

Ctrl + A

将选中文本转换为大写

Ctrl + U(需要设置快捷键)

将选中文本转换为小写

Ctrl + P(需要设置快捷键)

折叠代码

Ctrl + K + 0~9(代表多少级)

展开折叠代码

Ctrl + K + J

跳入选中函数方法体

F12

复制

Ctrl + C

粘贴

Ctrl + V

打开终端

Ctrl + ~

删除当前行

Ctrl + X

撤销更改

Ctrl + Z

代码换行

Alt + Z

注释/取消注释

Ctrl + /

选中多列

Shift + Alt + 鼠标移动

连续选中关键词

Ctrl + D

复制行

Shift + Alt + ↑ 或者 ↓

移动行

Alt + ↑ 或者 ↓

重命名

F2

切换打开文件

Ctrl + Tab

切换应用

Alt + Tab

创建HTML5页面结构

输入 html5

跳转到上一个修改处

Alt + ←

跳转到下一个修改处

Alt + →


相关文章
|
资源调度 API 开发者
Three入门 【基础知识,并搭建第一个场景】
Three入门 【基础知识,并搭建第一个场景】
99 0
|
6月前
|
XML Web App开发 JavaScript
解析神器Xpath详解+实战
解析神器Xpath详解+实战
|
7月前
编程笔记 01工具及参考资料
编程笔记 01工具及参考资料
|
小程序 前端开发 JavaScript
小程序的入门
小程序的入门
72 0
Axure快速入门(02) - 入门例子(登录案例)
Axure快速入门(02) - 入门例子(登录案例)
71 0
|
算法 C语言 C++
04 C++ - 入门程序
04 C++ - 入门程序
47 0
|
JSON 小程序 JavaScript
小程序入门
小程序入门
181 0
|
BI 定位技术 Python
SWMM从入门到实践教程 04 快速入门案例的模拟执行
在左侧双击Options中的Dates,即可弹出时间的设置。此处为了教学,建议仅模拟6个小时,加快结果的生成。实际项目中,可以根据需求对指定场次的降雨时常进行模拟,并注意这个时常一定不低于降雨时常(我们的雨量计设置了2小时降雨,所有66个小时的模拟也是合理的)。
|
前端开发
前端知识学习案例7vs code-安装扩展
前端知识学习案例7vs code-安装扩展
67 0
前端知识学习案例7vs code-安装扩展
|
前端开发
前端知识学习案例16vs code-多行选择
前端知识学习案例16vs code-多行选择
80 0
前端知识学习案例16vs code-多行选择