@Author：Runsen
@Date：2020/6/11

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾（作者：Runsen ）

作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。决定今天比昨天要更加努力。我的征途是星辰大海！

写代码，IDE很重要。Pyhon用Pycharm，Java用IDEA，由于我还装了anaconda，一系列数据分析软件，SPSS，Stata，内存实在不行。只好选择VsCode作为前端的开发工具。

文章目录

VsCode下载
插件的安装
Vscode界面介绍
VScode用户设置
前端推荐插件
快捷键

VsCode下载

首先就是安装了，在百度上直接搜索vscode，全英文的就是

在里面点击下载，下载压缩包
下载好之后直接点击.exe文件就可以运行vscode了

Vscode是一个轻量的编译器，所以默认是通过打开文件夹的功能来打开对应的工程。而且下面会列举出最近打开的工程，方便打开用户打开最近打开的工程进行编辑和修改。

插件的安装

vscode之所以强大，是因为有许多插件
我先只讲三个重要的插件

chinese中文插件
open in browser 打开浏览器
material icon theme 图标主题
vscode是一个国外的编程软件，所以说打开的页面都是英文
第一个插件chinese就是汉化插件，安装之后都更改成了中文界面
第二个是前端必备的插件，安装好了之后才可以把写好的代码在网页中打开
第三个是文件图标的主题，便于区分各种类型的文件，看着方便，美观

如果你是新手，就直接看VScode的教程

Vscode界面介绍

（主要分为5个区域，分别是活动栏，侧边栏，编辑栏，面板栏，状态栏）

①：活动栏从上到下依次为，打开侧边栏，搜索，使用git，debug，使用插件
②：侧边栏，新建项目文件和文件夹
③：编辑栏，编写代码的区域
④：面板栏，从左到右依次为，问题，输出，调试栏，终端（terminal），最重要的是terminal，用来输入相关命令

VScode用户设置

使用快捷键 Ctrl+Shift+P ，然后搜索setting

这里解析几个常用配置项：

（1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;

（2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。

（3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为true;

（4）editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { “source.organizeImports”: true }；

（5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；

然后文件–首选项–设置，打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修改默认配置。个人更倾向于编写json的方式进行配置，下面会附上我个人的配置代码

设置了上面的选择，转化成json，就是下面的

{"files.associations": {"*.vue": "vue","*.wpy": "vue","*.wxml": "html","*.wxss": "css"},"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe","git.enableSmartCommit": true,"git.autofetch": true,"emmet.triggerExpansionOnTab": true,"emmet.showAbbreviationSuggestions": true,"emmet.showExpandedAbbreviation": "always","emmet.includeLanguages": {"vue-html": "html","vue": "html","wpy": "html"},//主题颜色 "git.confirmSync": false,"explorer.confirmDelete": false,"editor.fontSize": 14,"window.zoomLevel": 1,"editor.wordWrap": "on","editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,//失去焦点后自动保存"files.autoSave": "onFocusChange",// #值设置为true时，每次保存的时候自动格式化；"editor.formatOnSave": false,//每120行就显示一条线"editor.rulers": [],// Python解释器"python.pythonPath": "F:\\anaconda\\python.exe","editor.suggestSelection": "first","vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",// 这些文件将不会显示在工作空间中"files.exclude": {"**/.classpath": true,"**/.project": true,"**/.settings": true,"**/.factorypath": true},// leetcode的设置"leetcode.hint.configWebviewMarkdown": false,"leetcode.workspaceFolder": "C:\\Users\\YIUYE\\.leetcode","workbench.settings.openDefaultSettings": true,// 没有本事的用ui"workbench.settings.editor": "json",// #让vue中的js按"prettier"格式进行格式化"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatterOptions": {"js-beautify-html": {// #vue组件中html代码格式化样式"wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样"wrap_line_length": 200,"end_with_newline": false,"semi": false,"singleQuote": true},"prettier": {"semi": false,"singleQuote": true}}
}

前端推荐插件

做前端开发的时候，我们需要打开浏览器进行预览和调试页面。这个插件就可以实现静态、动态页面的实时预览，保存就能看见页面更新，不需要手动去刷新。

在vscode安装eslint插件和错误自动修复

还有vetur。Vue 开发生态必备插件（官方推荐），支持 Syntax Highlighting， Emmet 2.0，Snippet，Foramtting，IntelliSense，Linting 等

Auto Close Tag，适用于 JSX、Vue、HTML，在打开标签并且键入 </ 的时候，能自动补全要闭合的标签；
Auto Rename Tag，适用于 JSX、Vue、HTML，在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键；
Path Intellisense，文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成；
NPM Intellisense，NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成；
IntelliSense for CSS class names，CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示；
JavaScript Snippet Pack：js代码片段（必备）
markdownlint：markdown 语法检查
**GitLens **：Git神器，码农必备。如果你不知道，那真是out了。

快捷键

格式调整

代码行缩进 Ctrl+[ 、 Ctrl+]
Ctrl+C 、 Ctrl+V 复制或剪切当前行/当前选中内容
代码格式化：Shift+Alt+F，或 Ctrl+Shift+P 后输入 format code
上下移动一行：Alt+Up 或 Alt+Down
向上向下复制一行：Shift+Alt+Up 或 Shift+Alt+Down
在当前行下边插入一行 Ctrl+Enter
在当前行上方插入一行 Ctrl+Shift+Enter
代码展开/收起 ctrl + K + J /ctrl + K + o

光标相关

移动到行首：Home
移动到行尾：End
移动到文件结尾：Ctrl+End
移动到文件开头：Ctrl+Home
移动到定义处：F12
定义处缩略图：只看一眼而不跳转过去 Alt+F12
移动到后半个括号：Ctrl+Shift+]
选择从光标到行尾：Shift+End
选择从行首到光标处：Shift+Home
删除光标右侧的所有字：Ctrl+Delete
扩展/缩小选取范围：Shift+Alt+Left 和 Shift+Alt+Right
多行编辑(列编辑)：Alt+Shift+鼠标左键，Ctrl+Alt+Down/Up
同时选中所有匹配：Ctrl+Shift+L
Ctrl+D 下一个匹配的也被选中 (在 sublime 中是删除当前行，后面自定义快键键中，设置与 Ctrl+Shift+K 互换了)
回退上一个光标操作：Ctrl+U

重构代码

找到所有的引用：Shift+F12
同时修改本文件中所有匹配的：Ctrl+F12
重命名：比如要修改一个方法名，可以选中后按 F2，输入新的名字，回车，会发现所有的文件都修改了
跳转到下一个 Error 或 Warning：当有多个错误时可以按 F8 逐个跳转
查看 diff：在 explorer 里选择文件右键 Set file to compare，然后需要对比的文件上右键选择 Compare with file_name_you_chose

前端相关

shift+Alt+F 代码格式化（推荐安装beautify插件后使用）
！+ enter 生成html骨架
直接写标签名（或加+ # / ./ []）再加enter可以自动补全

还有很多自己慢慢看

当然如果需要改快捷键，也是很简单的，比如vscode的复制下一行的快捷键是ALT+SHIFT+下箭头

我还是喜欢用Ctrl+D

如果本文对你有帮助，大家可以点赞转发一波，有错误大家可以评论指出，感谢！

大家继续加油，未来可期！Runsen的征途是星辰大海！

三十二、VsCode前端的开发工具介绍和使用相关推荐

三十二、http与www服务介绍
一.用户访问百度(www.baidu.com) 用户访问在url中输入地址后,首先会访问本地的缓存和hosts文件,如果没有,会访问本地DNS,在就是根域和顶级域名等,在前面已经说过了,这里不再赘述. ...
【Visual C++】游戏开发笔记三十二浅墨DirectX提高班之一 DirectX大局观认知篇
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8172615 作者:毛星云(浅 ...
【正点原子FPGA连载】第三十二章基于lwip的TCP服务器性能测试实验摘自【正点原子】DFZU2EG_4EV MPSoC之嵌入式Vitis开发指南
第三十二章基于lwip的TCP服务器性能测试实验上一章的lwip Echo Server实验让我们对lwip有一个基本的了解,而Echo Server是基于TCP协议的.TCP协议是为了在不可靠的互 ...
【正点原子Linux连载】第三十二章 U-Boot启动流程详解 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
1)实验平台:正点原子阿尔法Linux开发板 2)平台购买地址:https://item.taobao.com/item.htm?id=603672744434 2)全套实验源码+手册+视频下载地址: ...
【正点原子FPGA连载】第三十二章RTC实时时钟LCD显示实验 -摘自【正点原子】新起点之FPGA开发指南_V2.1
1)实验平台:正点原子新起点V2开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=609758951113 2)全套实验源码+手册+视频下载地址:ht ...
axi dma 寄存器配置_FPGA Xilinx Zynq 系列（三十二）AXI 接口
大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是缘分.大侠可以关注FPGA技术江湖,在"闯荡江湖"."行侠仗义"栏里获取其他感兴趣的资源,或者一起煮酒言欢. ...
OpenCV学习笔记（三十一）——让demo在他人电脑跑起来 OpenCV学习笔记（三十二）——制作静态库的demo，没有dll也能hold住 OpenCV学习笔记（三十三）——用haar特征训练自己
OpenCV学习笔记(三十一)--让demo在他人电脑跑起来这一节的内容感觉比较土鳖.这从来就是一个老生常谈的问题.学MFC的时候就知道这个事情了,那时候记得老师强调多次,如果写的demo想在人家那 ...
python建站部署_SpringBoot入门建站全系列（三十二）接入xxl-job分布式任务调度平台...
SpringBoot入门建站全系列(三十二)接入xxl-job分布式任务调度平台一.概述 XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源 ...
FreeSql （三十二）Aop
FreeSql AOP 已有的功能介绍,未来为会根据用户需求不断增强. 审计 CRUD 马云说过,996是修福报.对于多数程序员来说,加班是好事...起码不是闲人,不会下岗. 当如果因为某个 sql ...

三十二、VsCode前端的开发工具介绍和使用