VSCode的使用

VSCode的使用:
1.下载安装:https://code.visualstudio.com/Download

2.安装常用插件:
选中左侧工具栏的最后一项(扩展项)--->搜索常用的插件安装
1)Auto Close Tag :匹配标签,关闭对应的标签
Auto Rename Tag: 自动重命名

2)beautify : 良好的拓展性,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用

3) View In Browser 或 Open In Browser 运行在浏览器中打开文件

4)HTML CSS Support : 这个也是必备插件之一

5)Path Autocomplete : 路径智能补全
Path Intellisense : 路径智能提示.

6)CSS Peek:使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。
当你在 HTML 文件中右键单击选择器时,
选择“ Go to Definition 和 Peek definition ”选项,
它便会给你发送样式设置的 CSS 代码。

7)HTML Boilerplate:通过使用 HTML 模版插件,
你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。
你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构

9)Color Info:这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。
你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了

10)Live Server:模拟服务器,可以使用http协议打开页面
Preview on WebServer:模拟服务器,可以使用http协议打开页面

11)Vetur:VScode中的VUE工具
12)Vue snippets:Vue的提示插件
13)vue 2 snippets:Vue2的提示插件
14) Vue VSCode Snippets

15)relative path:相对路径的书写
使用方法:1)安装relative path插件
2)在需要书写相对路径的文件中通过快捷键ctrl+shift+h,调出文件搜索面板
3)在文件在文件搜索面板中搜索出对应的文件,将光标放置在需要设置路径的文件处,选中所要设置的文件即可、

16)路径转换插件:Path Tools
使用方法:1)安装Path Tools
2)选中工作区中的文件,右击复制文件路径
3)将文件路径填写到对应的位置
4)选中所填写的文件路径,安装快捷键ctrl+shift+p(或快捷键F1)调出命令面板
5)在命令面板中输入
path Tools: Relative: 将路径转换为相对于当前文件的相对路径.
Resolve: 将路径转换为完整路径.
Windows:将路径转化为windows操作系统的完成路径.

Angular相关插件:
16)Angular 1 JavaScript and TypeScript Snippets for VS Code
17)Angular1 snippets for shark template

React相关插件
18)React/Redux/react-router Snippets
19)Simple React Snippets
20)Atom JavaScript Snippet
21) Reactjs code snippets

VScode中所有插件都有对应使用文档,只需搜索到对应插件后点击就可查看

原文地址:https://www.cnblogs.com/LancelotZ/p/11378724.html

时间: 2024-11-05 12:23:11

VSCode的使用的相关文章

在linux系统中安装VSCode(Visual Studio Code)

1.从官网下载压缩包(话说下载下来解压就直接可以运行了咧,都不需要make) 访问Visual Studio Code官网 https://code.visualstudio.com/docs?dv=linux64 我是64位的: wget https://az764295.vo.msecnd.net/stable/7ba55c5860b152d999dda59393ca3ebeb1b5c85f/code-stable-code_1.7.2-1479766213_amd64.tar.gz 2.解

TypeScript+vsCode环境搭建

why? 1.基于前面文章的主观意见,所以个人倾向于将mvc的思想也使用到编程工具的使用上.工具嘛,无非是减少必要劳动力,提高工作效率的东西. 2.本人pc机上的vs2012自从装了resharper 之后,从启动速度上就慢了很多,启动一个项目要等待很长时间,且vs中对于ts的智能提示的速度让人难以忍受. start 0.本文是基于nodejs下进行的,没有配置好的同学请自行Google,非本文阐述内容. 1.github下载最新版TypeScript git clone https://git

完全离线安装VSCode插件--Eslint

最近折腾了一番,总算把Eslint插件在离线的情况下安装好了.之前查了挺多,但是很多方法还是在没有完全离线的情况下进行的.之所以想完全离线安装,主要是因为我们工作的地方是禁止访问外网的,所以像直接执行npm命令来进行一些包的安装,其实对我来说是用不了的. 好了,现在进入正题,说下我的解决方式吧. 1.在无法联网的电脑上先把VSCode安装好. 2.在家里有网的电脑上,在vsCode里面的扩展直接安装eslint插件,然后在该路径(C:\Users\Administrator\.vscode\ex

vscode Python Pylint(代码检测插件)

暑假刚开始想了解一下Python,使用vscode进行编写,根据vscode 的提示安装了一些不知道干啥的插件,编写过程中提示说  "Linter pylint is not installed"  之后参训了解到:我们只在vscode里面下载了辅助插件,但是没有下载Python的扩展安装包. 在安装Python过程中还会遇到 ImportError: No module named setuptools(安装模块出错的问题). 原因:这是新手很常遇见的错误提示.不用担心,这是因为Wi

vscode设置背景图片

最近在知乎上看见有人设置了vscode编辑器的背景图片,觉得很新鲜,就尝试以一下,倒是成功了. 1.首先在vscode扩展中,找到background这个插件,快捷键Ctrl+shift+x 2.完成第一步就已经有默认背景了,可是想设置自己喜欢的怎么办?往下看 打开 文件>首选项>设置 在右侧设置里 "background.enabled": true, "background.useDefault": false, "background.c

精选!15 个必备的 VSCode 插件(前端类)

精选!15 个必备的 VSCode 插件(前端类) 15 天前 ? Plugins, Web前端 ? 暂无评论 Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件.为了帮助大家挑选出值得下载的插件,我们针对性的收集了一些实用.有趣的插件与大家分享. 1. Open-In-Browser 由于 VSCode 没有提供直

python debug ——vscode

vscode 是微软开发的编辑器,添加python插件就可以直接运行python脚本,也可以添加Jupyter插件用"#%%"魔术在开始行注释后 运行在python kernel . 前提是已经安装好python,ipython,建议使用anaconda安装包. 安装python支持插件后,在脚本打开后点击最左边调试键,绿色开始键就可以进入debug模式了. 有变量,和表达式跟踪监视,比pycharm要简便多了

vscode自定义代码块

vscode中设置自定义代码块打开首选项,选择用户代码片段,打开后选择编程语言选中后打开文件,按照格式编辑内容 "Print to console log": { "prefix": "csl", "body": [ "console.log('$1')" ], "description": "log output to console" },

vscode安装golint扩展失败

环境: win7 64位系统 问题: 安装完vscode,打开.go文件时,vscode会推荐安装go扩展 go安装完成后提示下载依赖工具 go get -u -v github.com/nsf/gocode go get -u -v github.com/rogpeppe/godef go get -u -v github.com/golang/lint/golint go get -u -v github.com/lukehoban/go-outline go get -u -v sourc

配置vscode c/c++像sublime那样按Ctrl+shift+B编译直接运行

需求: 最近喜欢折腾各种编辑器. 用了vscode官方的c/c++插件,配好launch.json和tasks.json之后用debug还是感觉很不错的. 但是感觉对于acm有些用不上,反而不太灵敏,用起来也不太方便. 就想配成像subliime自带的那样: 1.编译之后直接运行 2.可以把输出显示在下面这种 过程: 考虑到vscode默认ctrl+shift+B是build,只要在tasks.json里写"build"的task就行了,像这样 { // See https://go.