首页 > 其他分享 >Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】

时间:2023-04-22 13:08:43浏览次数:36  
标签:插件 Code vsCode 代码 提示 HTML 设置 CSS


一、VsCode 常见的配置

1、取消更新

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_CSS

  • 把插件的更新也一起取消了

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_CSS_02


2、设置编码为utf-8:默认就是了,不用设置了


3、设置常用的开发字体:Consolas, 默认就是了,不用设置了

  • 字体对开发也很重要,不同字体,字母形态都不太一样,尤其是标点符号,逗号和分号的区分,有的字体看着这两者就很像


4、设置ctr+滚轮,改变字体大小

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_HTML_03


5、设置行号:默认就有,不用设置了


6、自动保存:

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_Vue_04


7、设置选项卡多行展示

  • 这样打开了很多个文件,就不会导致有的打开的文件被隐藏

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_CSS_05


8、设置查看当前类或文件的结构 OUTLINE

  • 相当于idea 查看当前类或接口的结构 Structure

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_HTML_06


二、VsCode 常用好用插件

1、实时刷新网页的插件:LiveServer

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_HTML_07


2、open in browser

支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_Vue_08


补充一下:LiveServer 和 open in browser 区别:注意观察浏览器地址栏

  • open in browser:直接打开HTML文件就是通过File协议打开的
  • LiveServer: 通过http 协议打开的,地址栏会上看到主机名, Live Server启动了一个本地开发服务器,静态和动态页面都可以实时重载。

3、自动闭合HTML/XML标签:Auto Close Tag

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_CSS_09


4、图片自动检查:Image preview

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_CSS_10


5、资源树目录:vscode-icon

它不仅能够给文件夹、文件添加上舒适的图标,而且可以自动检测项目,根据项目不同功能配上不同图标

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_HTML_11


6、AI 智能提示的插件:Tabnine

用IDE编写代码的时候可以给出智能提示,写的越多提示的越准确

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_CSS_12



选择性安装的插件

像颜色提示、主题那种,还有语法检查、语法智能提示等

本地历史代码记录: local history

git相关的插件:Git History

  • Git History提供了一个可视化的git日志。不再需要在终端查看git日志。可以比较各个分支、提交和跨提交的文件。

HTML CSS Support

  • 智能提示CSS类名以及id

HTML Snippets

  • 智能提示HTML标签,以及标签含义

JavaScript(ES6) code snippets

  • ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

jQuery Code Snippets

  • jQuery代码智能提示

CSS Peek

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


一、VsCode 开发相应项目推荐安装的插件

1、开发 Vue 项目必装的插件

(1)【vue2】安装一个方便阅读 vue 代码的插件:Vetur

  • 安装之后,vue 代码,文本颜色开始发生变化[注释是绿色的哈哈哈],不安装,代码全是白色的。

Vetur插件介绍:功能包括-语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。

  • vue3 使用的是插件 Vue Language Features (Volar)

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_CSS_13


2、开发 Lua 项目必装的插件

(1) 安装一个方便阅读 lua 代码的插件:lua

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】_CSS_14


作者:一乐乐




标签:插件,Code,vsCode,代码,提示,HTML,设置,CSS
From: https://blog.51cto.com/u_15657677/6215229

相关文章

  • codeforces #864 div2 B
    GCDPartition这道题首先要解决一个问题,要把区间分成几块,可以证明分成两块是更优首先我们假设把区间分成了m(>=2)块b1,b2,b3,...,bm,则答案是gcd(b1,b2,b3,...,bm),则b1,b2是gcd(b1,b2,b3,...,bm)的倍数,那么b1+b2也是gcd(b1,b2,b3,...,bm)的倍数,所以gcd(b1,b2,......
  • FPGA终于可以愉快地写代码了!Vivado和Visual Studio Code黄金搭档
    ​ 如果你是一位FPGA开发者,那么你一定会对VIvado这款软件非常熟悉。但是,对于vivado兼容的第三方编辑器软件,你知道VisualStudioCode吗?这是个非常不错的选择,VisualStudioCode搭配众多插件,能让你FPGA开发如虎添翼,效率飞升!别犹豫了,赶紧来看看本文,把这款神器装起来吧!VisualStud......
  • 【DP】LeetCode 718. 最长重复子数组
    题目链接718.最长重复子数组思路分析动态规划题目的时候只需要考虑最后一个阶段,因为所有的阶段转化都是相同的,考虑最后一个阶段容易发现规律在数组的动态规划问题中,一般dp[i]都是表示以nums以第i个元素组成(即nums[i-1])的状态;dp[i][j]分别表示以nums1前i个元素(......
  • vscode中react组件
    title:"vscode中ES7+React/Redux/React-Nativesnippets插件使用"date:2023-04-0723:21:32tags:['Vscode','插件']categories:["工具篇"]通过使用这个插件我们可以很方便的进行组件/方法/文件的导入本篇博客仅对插件进行介绍翻译,便于自己以后使用常用片段列表imr:......
  • AtCoder Regular Contest 114 F Permutation Division
    洛谷传送门AtCoder传送门这题居然是之前某场模拟赛(contest701)的T1……(@Vidoliga场切但是被卡常/bx)下面记\(m\)为原题面中的\(K\),\(a_i\)为原题面中的\(P_i\)。不难发现后手的策略是把所有段按照段的第一个数从大到小排序接在一起。考虑若\(a_1\lem\),则先手能把所......
  • #yyds干货盘点# LeetCode程序员面试金典:最长有效括号
    题目:给你一个只包含'(' 和')' 的字符串,找出最长有效(格式正确且连续)括号子串的长度。 示例1:输入:s="(()"输出:2解释:最长有效括号子串是"()"示例2:输入:s=")()())"输出:4解释:最长有效括号子串是"()()"示例3:输入:s=""输出:0代码实现:classSolution{publicint......
  • #yyds干货盘点# LeetCode面试题:删除排序链表中的重复元素
    1.简述:给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回已排序的链表 。 示例1:输入:head=[1,1,2]输出:[1,2]示例2:输入:head=[1,1,2,3,3]输出:[1,2,3]2.代码实现:classSolution{publicListNodedeleteDuplicates(ListNodehead){......
  • AtCoder Regular Contest 114 D Moving Pieces on Line
    洛谷传送门AtCoder传送门挺有意思的题。首先显然地,一个棋子不会走回头路。于是一个棋子沿着边走的效果就是区间异或。更进一步,设\(s_i\)为\(i-1\toi\)的边颜色与\(i\toi+1\)的边颜色是否相同(差分),相当于对于每个\(i\)都选择\(s_{a_i}\)和\(s_{x_i}\),将它们异或......
  • Educational Codeforces Round 147 (Rated for Div. 2)
    EducationalCodeforcesRound147(RatedforDiv.2)链接EducationalCodeforcesRound147(RatedforDiv.2)A题如果第一位数是0,直接打印0如果第一位数是'?',有9个数可以选择,如果其他位数是'?',有10中情况选择,相乘就可以了#include<iostream>#include<algo......
  • 【LeetCode动态规划#11】打家劫舍系列题(涉及环结构和树形DP的讨论)
    打家劫舍力扣题目链接(opensnewwindow)你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。给定一个代表每个房屋存放金额的非负整数数组......