三十二、vscode前端的开发工具介绍和使用 -凯发k8官方网

@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，全英文的就是

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

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

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

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

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

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

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

使用快捷键 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的征途是星辰大海！

总结

以上是凯发k8官方网为你收集整理的三十二、vscode前端的开发工具介绍和使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。