前端VSCode常用插件和快捷键和前端辅助软件

一、常用插件

关于VSCode的常用插件。

Chinese(Simplified)

安装Chinese插件，将英文版改为中文版：

1. 单击左侧Extensions;
2. 将Search Extensions in Marketplace中输入 Chinese ；
3. 单击右侧 install 进行安装；
   

Auto Rename Tag

修改开始标签，结束标签跟着自动变化。

One Dark Pro(颜色主题)

颜色主题。

格式化代码

使用VSCode系统自带，自动保存格式化代码

1. 单击左下角 管理 按钮；
2. 选择 设置 命令；
3. 右侧单击 用户 ；
4. 选择 文本编辑器 中的 正在格式化 ；
5. 最右侧勾选：Format On Paste 与 Format On Save
   

open in browser(浏览器预览)

浏览器预览页面。代码页面中，右击选择浏览器打开Open In Default Browser。

注意：打开的文件要在VSCode的目录中

Live Server(实时预览★）

浏览器实时预览页面推荐

VSCode-icons(设置文件图标主题)

左侧目录中的文件图标。

Easy LESS(生成新的css文件)

less文件不能直接引入到html中，此插件可将less文件生成一个新的css文件。

会了吧(翻译英文)

安装此插件之后，左侧会出现 会 图标。单机图标，左侧会出现此页面中的单词中文意思。

二、快捷键

关于VSCode的常用快捷键。

快速复制一行

Shift+Alt+下箭头(上箭头)/Ctrl+C和Ctrl+V

同时选定多个相同单词

Ctrl+D
双击选定一个单词，然后按下Ctrl+D往下依次选择相同的单词。

添加多个光标

Ctrl+Alt+下箭头(上箭头)

全部替换某些单词

Ctrl+H
右侧选择全部替换即可。

快速跳到某一行

Ctrl+G
输入想要跳转到的行数，例如“：40”，跳转到第40行。

选择某个区块进行操作

按住Shift+Alt，然后拖动鼠标。

单行注释与多行注释

Ctrl+/
Shift+Alt+A

自定义快捷键

1. 单击左下角，选择键盘快捷方式；
2. 输入快捷键；
3. 单击左侧小铅笔，输入快捷键，按下Enter键；

三、前端辅助工具

辅助工具可以让大家更好地学习前端。

像素大厨

测量设计图中的宽高、边距、字体大小以及css代码等。非常方便!!!
官网：像素大厨下载地址

前端代码编辑器 VSCode

官网：VSCode下载地址

截图软件Snipaste

官网：Snipaste下载地址

Typora 编写MarkDown笔记

官网：Typora下载地址

git 版本控制工具

提交、合并、分支、回滚等功能。
官网： git官网

node★

JS的运行环境。
各个版本下载官网地址：node

MySQL数据库

node + mysql 数据库搭建服务器。

Postman

测试接口，POST。

官网：Postman下载地址