vsCode安装使用教程和插件安装方法


Posted in Javascript onAugust 24, 2020

vsCode是什么

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

vsCode安装

voCode是免费的软件

下载地址链接: 官网下载.

vsCode安装使用教程和插件安装方法

vsCode汉化

按F1 搜索 Configure Display Language 设置 zh-cn 关闭软件重启。

vsCode安装使用教程和插件安装方法
vsCode安装使用教程和插件安装方法

如果重启后还是英文的,那么在商店查看已安装的插件,把中文插件Chinese(simplified) 重新安装一遍,然后重启软件即可。

vsCode安装使用教程和插件安装方法

vsCode常用命令说明

vsCode安装使用教程和插件安装方法

注意

  1. Ctrl+shift+F 在文件中查找,可以同时替换。还可以指定在什么文件中,同时指定要排除什么文件等。
  2. 我们安装vscode后,可以直接在任意一个项目目录下,鼠标右键然后将这个项目在服务器上打开。(如果你已经有打开了一个窗口,那么他会打开一个新窗口)

vsCode左边图标说明

vsCode安装使用教程和插件安装方法

vsCode基本使用

1.直接拖入项目文件夹进入软件

方式一: 拖入工作区(这样的话,会保留当前以及打开的项目文件夹)

方式二: 拖入工作区右边的窗口,这样的话会让拖入的窗口覆盖掉原本以及打开的窗口
(这时vscode会问你是否保存一个文件,用来保存原本工作区信息,以便下次打开此文件)

备注:对于左侧的文件夹可以直接使用快捷键复制粘贴等。

方式三:

也可以安装http server插件,安装完成后按下f1,然后输入http会看到下面两个选项,选择with current file那个能够创建一个服务器运行当前文件。另外一个会找当前目录下的index.html,然后打开它。

vsCode安装使用教程和插件安装方法

2.在vscode里面创建项目文件夹

vsCode安装使用教程和插件安装方法

3.格式化代码

在代码里面右键菜单,会弹出相应的格式化等功能选项,也有定义引用查找等菜单。

4.在浏览器中打开网页

安装插件:Open HTML in Default Browser

•用默认浏览器打开 HTML 文件
•在资源管理器中,HTML 文件右键显示 在浏览器中打开 菜单
•在编辑器中,HTML 文件右键显示 在浏览器中打开 菜单
•可以同时打开多个页面

我们在工作区项目上右键菜单就能看到在资源管理器中打开文件的选项

5.以服务器形式打开文件

方式一:

安装live server 插件,点击重新加载或者重启vscode,然后鼠标右键就可以在服务器上打开,
这种模式打开会自动刷新页面。

方式二:
按下快捷键:Ctrl+` 打开命令行终端,执行cnpm install live-server -g
安装好后每次要运行只需要打开终端后执行一下live-server即可

使用live-server是把整个网站打开到服务器上的。不管你当前定位到哪一个目录,他打开的都是默认的首页文件,

如:index.html

如果你根目录下全是文件夹,或者没有index.html等默认首页文件,那么服务器就会显示一些文件夹让你选择。

如:

vsCode安装使用教程和插件安装方法

6.如果要关闭live-server那么只需要在控制台执行以下ctrl+c,然后输入y确认下即可关闭。

7.Live-server可以在任意项目根目录下,打开终端窗口,然后输入live-server即可让当前项目在服务器上打开执行

8.在以服务器打开的模式下,我们更改了文件内容后只要保存下,浏览器就会自动的刷新**,而不需要我们显式的在浏览器里面刷新。

8.前端常用插件

vsCode安装使用教程和插件安装方法

vsCode安装使用教程和插件安装方法

如果你是小白,没有必要非要弄懂插件的作用,先安装,后面用着用着你就熟悉了
安装方法

vsCode安装使用教程和插件安装方法

在vosCode中显示html界面

vsCode安装使用教程和插件安装方法
vsCode安装使用教程和插件安装方法
vsCode安装使用教程和插件安装方法

总结

到此这篇关于vsCode安装使用教程和插件安装方法的文章就介绍到这了,更多相关vscode插件安装内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 #Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 #Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 #Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 #Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 #Javascript
js中this的指向问题归纳总结
Nov 28 #Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 #Javascript
You might like
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP多态代码实例
2015/06/26 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Python检测网站链接是否已存在
2016/04/07 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
python连接mongodb密码认证实例
2018/10/16 Python
python实现dijkstra最短路由算法
2019/01/17 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
参观监狱心得体会
2014/01/02 职场文书
迎新晚会主持词
2014/03/24 职场文书
优秀教研组申报材料
2014/12/26 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
生产现场禁烟通知
2015/04/23 职场文书
不同意离婚代理词
2015/05/23 职场文书
公司年会开场白
2015/06/01 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang